HTML项目（打卡）——时间判断

最新推荐文章于 2024-07-15 07:00:00 发布

原创最新推荐文章于 2024-07-15 07:00:00 发布 · 3.9k 阅读

28 ·

CC 4.0 BY-SA版权

文章标签：

#获取当前时间 #时间判断

前端相关手记同时被 3 个专栏收录

33 篇文章

订阅专栏

16 篇文章

订阅专栏

前端HTML效果

10 篇文章

订阅专栏

本文介绍了一款用于企业上下班打卡的时间判断功能，通过HTML、CSS和JavaScript实现页面显示实时时间和打卡状态，若时间早于设定的打卡时间则打卡成功。

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