前言:
此刻朋友们对“jquery时间日期轴”大概比较关切,看官们都想要了解一些“jquery时间日期轴”的相关资讯。那么小编在网络上汇集了一些对于“jquery时间日期轴””的相关知识,希望兄弟们能喜欢,同学们快快来学习一下吧!## 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. 绑定暂停按钮的点击事件,执行暂停方法
标签: #jquery时间日期轴