## 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. 绑定暂停按钮的点击事件，执行暂停方法