现在是2020-05-07 11:34修改
body中的onload没有生效的话,就把这个去掉,并在script代码中,添加
window.onload = startTime()
--------------我是分界线------------
出于企业管理的便捷性,上下班打卡应运而生,且由来已久。立足于本公司实际情况,特准备开发一套内部使用的打卡机制,若后期发展稳定,将推广。
由于暂时为制定详细的项目规划,本篇文章仅记录自己做的小功能——时间判断。
先来看下页面效果
HTML和CSS的代码很简单
.box{
width: 200px;
height: 200px;
}
.kada{
width: 150px;
height: 150px;
border: 3px solid #f00;
border-radius: 50%;
background-color: #fff;
}
<body onload="startTime()"> <!--一开始加载页面就触发这个获取当前时间的函数-->
<div class="box">
<button class="kada" id="kada">
<div id="txt"></div>
咔哒
</button>
</div>
</body>
主要代码在JS这里:
var kada = document.getElementById("kada");
kada.onclick = function(){ //当点击kada时触发时间比较
var thetime = '09:00:00'; //规定打卡时间
var time1 = txt.innerHTML; //当前时间
if(time1 <= thetime){
alert("打卡成功");
}else{
alert("已超过规定打卡时间");
}
}
function startTime(){ //获取当前时间的函数
var today=new Date()
var h=today.getHours() //时
var m=today.getMinutes() //分
var s=today.getSeconds() //秒
m=checkTime(m)
s=checkTime(s)
var txt = document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500) //每隔500就触发一次函数
}
function checkTime(i){ //检查分和秒,如果小于10,则在数字前加上0
if (i<10)
{i="0" + i}
return i
}
公众号宣传一波--》
"DataShow Charts"