HTML项目(打卡)——时间判断

        现在是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"

  • 4
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值