Files
apt-nl-map/static/Magic4/HMI_Sche_Test2.html

126 lines
4.5 KiB
HTML
Raw Normal View History

2024-12-04 10:21:04 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="NumberPad/css/bootstrap.min.css">
<link rel="stylesheet" href="NumberPad/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="NumberPad/css/htmleaf-demo.css">
<link rel="stylesheet" href="NumberPad/css/jquery.numpad.css">
<style type="text/css">
.nmpd-grid {border: none; padding: 20px;}
.nmpd-grid>tbody>tr>td {border: none;}
/* Some custom styling for Bootstrap */
.qtyInput {display: block;
width: 100%;
padding: 6px 12px;
color: #555;
background-color: white;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
</style>
<title>Document</title>
<script src="jquery-2.1.0.min.js"></script>
<script src="NumberPad/js/bootstrap.min.js"></script>
<script src="NumberPad/js/jquery.numpad.js"></script>
<script type="text/javascript">
// Set NumPad defaults for jQuery mobile.
// These defaults will be applied to all NumPads within this document!
$.fn.numpad.defaults.gridTpl = '<table class="table modal-content"></table>';
$.fn.numpad.defaults.backgroundTpl = '<div class="modal-backdrop in"></div>';
$.fn.numpad.defaults.displayTpl = '<input type="text" class="form-control" />';
$.fn.numpad.defaults.buttonNumberTpl = '<button type="button" class="btn btn-default" style="width: 80px; height: 80px"></button>';
$.fn.numpad.defaults.buttonFunctionTpl = '<button type="button" class="btn" style="width: 80px; height: 80px"></button>';
//$.fn.numpad.defaults.buttonNumberTpl = '<button type="button" class="btn btn-default"></button>';
//$.fn.numpad.defaults.buttonFunctionTpl = '<button type="button" class="btn" style="width: 100%;"></button>';
$.fn.numpad.defaults.onKeypadCreate = function(){$(this).find('.done').addClass('btn-primary');};
// Instantiate NumPad once the page is ready to be shown
$(document).ready(function(){
$('#stations').numpad();
});
function add(){
var li1 = document.getElementById("li1");
//创建li
var lis = document.createElement("li");
//创建文本
var texts =document.createElement('input');
texts.setAttribute('type', 'text');//输入框的类型
texts.setAttribute('name', "station");//输入框的名字
var length=document.getElementsByTagName('li').length;
texts.setAttribute('id',"station"+length.toString());
//把文本添加到li下面 appendChild
lis.appendChild(texts);
//获取到div
var invite = document.getElementById("invite");
invite.insertBefore(lis,li1);
$("#station"+length.toString()).numpad();
}
function minus(){
var lis=document.getElementsByTagName('li');
if(lis.length>=1) {
var li = lis[(lis.length - 1)];
li.parentNode.removeChild(li);
}
}
function sub(){
var inp = document.getElementsByName("station");
var inputs = new Array();
for(var i=0; i<inp.length;i++){
// alert(inp[i].value); //获得输入框的值
inputs[i] = inp[i].value;
}
alert(inputs); //将输入框的值赋予inputs数组中
}
var Button_Sch_Enable=0;
function ButtonImage_Vertical_Click(){
if(Button_Sch_Enable==0){
Button_Sch_Enable=1;
document.getElementById("buttonimage_Vertical").setAttribute("src","Led_Display/Button_Vertical_On.bmp");
}
else{
Button_Sch_Enable=0;
document.getElementById("buttonimage_Vertical").setAttribute("src","Led_Display/Button_Vertical_Off.bmp");
}
}
</script>
</head>
<body>
<table>
<tr>
<p>
Sche Enable:
<img id="buttonimage_Vertical" onclick="ButtonImage_Vertical_Click()" src="Led_Display/Button_Vertical_Off.bmp"/>
</p>
</tr>
<tr>
<form action="">
<p>Station<span>(点击按钮+ - </span></p>
<div id="invite">
<input type="text" name="station" id="stations">
</div>
<input type="button" value="+" onclick="add()">
<input type="button" value="-" onclick="minus()">
<p>
<input type="button" value="完成" onclick="sub()">
</p>
</form>
</tr>
</table>
</body>
</html>