## web前端必学功法之一：秒表完成
## web前端必学功法之一：秒表完成
功效案例：
```html
css样式：
<style>
.date{
width: 200px;
height: 50px;
background-color: black;
border-radius: 20px;
color: red;
font-weight: bold;
text-align: center;
line-height: 50px;
font-size: 30px;
margin: auto;
}
</style>
html局部:
<div class="date">
<span id="mydate"></span>
</div>
<div style="text-align: center;">
<button id="start">开头</button>
<button id="stop">停息</button>
</div>
```
秒表思绪分析：
1.获取时间：获取体系的如今时间，取得时分秒，(newDate());
2.设置定时器：依照指定的周期定时指定代码 (setInterval());
3.绑定事变：绑定开头按钮与停息按钮的点击事变
完成步调：
1.声明函数，获取体系如今时间 ，在页面中体现时间
2.声明开头办法：设置定时器，每一秒中实行一个获取如今时间的办法
3.声明停息，设置扫除定时器
4.当页面加载终了时，将时间表如今页面中，并调用开头办法
4.绑定开头按钮的点击事变，调用开头办法
5.绑定停息按钮的点击事变，调用停息办法
```javascript
这里我们使用两种办法举行完成
<script>
//声明函数，函数体系如今时间，在页面中体现时间
function getDate(){
//获取体系如今时间
var mydate = new Date();
//获取对应的时分秒
var hour = mydate.getHours(); //时
var minute = mydate.getMinutes(); //分
var second = mydate.getSeconds(); //秒
//具体时间字符串
var str= hour +":"+ minute + ":" +second;
//设置到页面中
document.getElementById("mydate").innerHTML = str;
}
//定时器的唯一标识ID
var dateId;
//开头办法
function startdate(){
//设置定时器 ,每一秒钟实行一个获取如今时间的办法
dateId = setInterval(getDate,1000);
// setInterval(getDate,100);
}
//停息办法
function stopDate(){
//设置扫除定时器
clearInterval(dateId);
}
// 当页面加载终了时，将时间表如今页面中，并调用开头办法
// 未点击按钮之前，先实行一次
window.onload =function(){
//获取体系如今时间，表如今页面中
getDate();
//实行开头办法
startdate();
}
//绑定开头按钮的点击事变
document.getElementById("start").onclick =function(){
startdate();
}
//绑定停息按钮的点击事变
document.getElementById("stop").onclick =function(){
stopDate();
}
</script>
jQuery办法完成，注意：要引入jQuery.js文件
<script>
//jquery写法
//获取体系如今时间
function getDate(){
//获取体系如今时间
var mydate = new Date();
//获取如今时间的时分秒
var hour = mydate.getHours();
var minute = mydate.getMinutes();
var second = mydate.getSeconds();
//拼接时间
var str = hour +":"+minute+":"+ second;
//设置在页面中的span标签中
$("#mydate").html(str);
}
//设置定时器ID
var dateId;
//声明开头办法
function startDate(){
//设置定时器，每一秒中实行一个获取如今时间的办法
dateId = setInterval(getDate,1000);
}
//声明停息办法
function stopDate(){
clearInterval(dateId);
}
//当页面加载终了时，将时间表如今页面中，并调用办法
$(function(){
//获取体系如今时间
getDate();
//调用开头办法
startDate();
})
//绑定开头按钮的点击事变，实行开头办法
$("#start").click(function(){
startDate();
})
//绑定停息按钮的点击事变，实行停息办法
$("#stop").click(function(){
stopDate();
})
</script>
```
## 秒表完成总结
1.熟习了解并运用获取体系如今时间，new Date();
2.熟习了解并运用获取体系如今时间的时分秒，并拼接时间
3. 绑定开头按钮的点击事变，实行开头办法
4. 绑定停息按钮的点击事变，实行停息办法
