网页常用功能之

这篇文章主要想讲的就是网页计时器的实现以及原理，效果就是点击开始开始计时，点击停止清除计时器，不再计时

恩 差不多就是上面个效果，上面没有开始计时的按钮，因为点了之后就把它隐藏起来了，这都不是关键，大家根据项目需要进行排版布局嘛

 这里我们就脑补一个开始按钮跟一个结束按钮  大概是介个样纸~

下面就是讲下怎么实现的吧

这里主要是用jquery写的 

 

<script language="javascript">
　　　　var timeIndex = 0;
　　　　$(function(){

　　　　　　$(".btn-clock").click(function(){ //点击btnl触发setTime()函数
　　　　　　　　setTime();
　　　　　　　　times = setInterval(setTime, 1000); //每隔1秒执行函数
　　　　});
　　　　　　$(".btn-stop").click(function(){
　　　　　　　　clearInterval(times); //清除对函数的调用
　　　　});
　　})

function setTime(){
　　var hour = parseInt(timeIndex / 3600); // 计算时
　　var minutes = parseInt((timeIndex % 3600) / 60); // 计算分
　　var seconds = parseInt(timeIndex % 60); // 计算秒
　　hour = hour < 10 ? "0" + hour : hour;
　　minutes = minutes < 10 ? "0" + minutes : minutes;
　　seconds = seconds < 10 ? "0" + seconds : seconds;
　　$("#showtime").val(hour + ":" + minutes + ":" + seconds);
　　timeIndex++;
}
</script>

强化记忆，好记性不如烂笔头，多学习，多思考。