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;
	}

    
	

		
			

		    咔哒
	    
	

主要代码在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"