<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素</title>
<script>
//页面加载调用
window.onload=function(){
//每1秒刷新时间
setInterval("NowTime()",1000);
}
function NowTime(){
//获取年月日
var time=new Date();
var year=time.getFullYear();
var month=time.getMonth()+1;
var day=time.getDate();
//获取时分秒
var h=time.getHours();
var m=time.getMinutes();
var s=time.getSeconds();
//检查是否小于10
h=check(h);
m=check(m);
s=check(s);
document.getElementById("nowtime").innerHTML="当前时间:"+year+"年"+month+"月"+day+"日 "+h+":"+m+":"+s;
}
//时间数字小于10,则在之前加个“0”补位。
function check(i){
//方法一,用三元运算符
var num;
i<10?num="0"+i:num=i;
return num;
//方法二,if语句判断
//if(i<10){
// i="0"+i;
//}
//return i;
}
</script>
<script type="text/javascript">
var i=002;
function addClick(){
var newtr=table001.insertRow(-1);
var newtd0=newtr.insertCell();
var newtd1=newtr.insertCell();
var newtd2=newtr.insertCell();
newtd0.innerHTML='<strong id="plittle" style="text-align: center;margin-left: 204px;">'+i+'</strong>';
i=i+1;
newtd1.innerHTML='<form style="text-align: center;"><select id="text001"><option value="volvo">麻辣香锅</option><option value="saab">咖喱香锅</option><option value="fiat">黑椒香锅</option><option value="audi">番茄香锅</option></select></form>';
newtd2.innerHTML='<p id="plittle"><input type="checkbox" id="checkbox001" />出餐结束</p>';
}
</script>
<style>
#father{
border: 1px solid red;
width: 1300px;
height: 2170px;
margin: auto;
}
#top{
border: 1px solid red;
width: 1300px;
height: 39px;
margin: auto;
text-align: center;
font-size: 26px;
}
#under{
border: 1px solid red;
width: 1300px;
height: 1200px;
margin: auto;
}
#p{
border: 1px solid red;
width: 425px;
height: 35px;
margin: auto;
text-align: center;
font-size: 26px;
}
#plittle{
border: 1px solid red;
width: 425px;
height: 35px;
margin: auto;
text-align: center;
font-size: 24px;
color: green;
}
#text001{
font-size: 19px;
}
</style>
</head>
<body>
<div id="father">
<div id="top" class="top001">
<table id="table002" border="1" >
<tr>
<td><button style="font-size: 23px;background-color: yellow;" onclick="addClick()">添加订单</button></td>
<td><div id="nowtime" >在这里显示时间</div></td>
</tr>
</table>
</div>
<div id="under">
<table id="table001" border="1" >
<tr>
<td><p id="p">序列</p></td>
<td><p id="p">套餐</p></td>
<td><p id="p">状态</p></td>
</tr>
<tr>
<td><strong id="plittle" style="text-align: center;margin-left: 204px;">1</strong></td>
<td style="text-align: center;">
<form>
<select id="text001">
<option value="volvo">麻辣香锅</option>
<option value="saab">咖喱香锅</option>
<option value="fiat">黑椒香锅</option>
<option value="audi">番茄香锅</option>
</select>
</form>
</td>
<td><p id="plittle">
<input type="checkbox" id="checkbox001" />出餐结束
</p>
</td>
<tr>
</table>
</div>
</div>
</div>
</body>
</html>
前端点餐叫号页面
最新推荐文章于 2023-09-06 15:34:59 发布