js的定时器分为持续性的和一次性的两种
- setInterval() ：按照指定的周期（以毫秒计）来调用函数或计算表达式。方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
- setTimeout() ：在指定的毫秒数后调用函数或计算表达式。
setInterval()
语法
setInterval(code,millisec)
参数 描述
- code 必需。要调用的函数或要执行的代码串。
- millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。
- 这是其中两个必选参数，相当于给code执行设定一个时间(延迟)，code里面一般用函数表达
- 示例1是最简单的定义，实例二利用函数来表达code的执行，但是在开发中一般都会像实力3一样给定时器设定参数接受，方便之后清楚清除器以及避免定时器之间的累加
示例
#示例1
window.setInterval("console.log('哈哈哈哈')", 1000);
#示例2
setInterval(function () {
console.log('呵呵呵呵');
}, 1000);
#示例3
<body>
<button id="btn1">开启定时器</button>
<button id="btn2">结束定时器</button>
<script>
window.onload = function () {
// 1.获取需要的标签
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var height = 150, timer = null;
// 2. 开启定时器
btn1.onclick = function () {
// 2.1 设置定时器
timer = setInterval(function () {
height += 1;
console.log("身高是" + height + "cm");
}, 1000);
};
// 3. 结束定时器
btn2.onclick = function () {
console.log(timer);
clearInterval(timer);
}
}
</script>
</body>
setTimeout()
语法
setTimeout(code,millisec,lang)
参数 描述
- code 必需。要调用的函数后要执行的 JavaScript 代码串。
- millisec 必需。在执行代码前需等待的毫秒数。
- 这个和之前的基本一样，只是这个是一次性定时器，不会重复执行
<body>
<button id="btn">3秒后吃饭</button>
<button id="btn1">停止</button>
<script>
window.onload = function () {
// 1. 获取需要的标签
var btn = document.getElementById("btn");
var btn1 = document.getElementById("btn1");
var timer = null;
// 2. 监听按钮的点击
btn.onclick = function () {
clearTimeout(timer);
// 一次定时器
timer = setTimeout(function () {
alert('请你去吃饭');
}, 3000);
};
btn1.onclick = function () {
clearTimeout(timer);
}
}
</script>
</body>
Date
Date 对象用于处理日期和时间。使用前需要先创建Fate对象
语法
var date=new Date()
- 基本上就是创建对象之后调用对应方法获取数据，我们只需要掌握一些常用的用法即可，其他更多选项可以在以后的练习中慢慢熟悉
// 1. 声明日期对象
var date = new Date();
// console.log(date);
console.log(date.getDate()); // 日
console.log(date.getDay()); // 星期几
console.log(date.getMonth() + 1); // 月
console.log(date.getFullYear() ); // 完整的年份
console.log(date.getHours() ); // 小时
console.log(date.getMinutes() ); // 分钟
console.log(date.getSeconds() ); // 秒
console.log(date.getMilliseconds() ); // 毫秒
console.log(date.getTime() ); // 时间戳，返回 1970 年 1 月 1 日至今的毫秒数。
案例
了解了以上两个的基本用法之后我们着手开始实现一个集合以上内容的简单案例——用js实现网页钟表，表针会自动根据时间流逝而转动
案例素材可以到这里领取, 提取码：g3ug
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
#box{
width: 600px;
height: 600px;
background: url("images/clock.jpg") no-repeat;
margin: 10px auto;
position: relative;
}
#hour, #min, #second{
position: absolute;
left: 50%;
top: 0;
width: 30px;
height: 600px;
margin-left: -15px;
}
#hour{
background: url("images/hour.png") no-repeat center center;
}
#min{
background: url("images/minute.png") no-repeat center center;
}
#second{
background: url("images/second.png") no-repeat center center;
}
</style>
</head>
<body>
<div id="box">
<div id="hour"></div>
<div id="min"></div>
<div id="second"></div>
</div>
<script>
window.onload = function () {
// 1. 获取需要的标签
var hour = document.getElementById("hour");
var min = document.getElementById("min");
var second = document.getElementById("second");
// 2.开启定时器
setInterval(function () {
// 2.1 获取当前的时间戳
var date = new Date();
// 2.2 求出总毫秒数
var millS = date.getMilliseconds();
var s = date.getSeconds() + millS / 1000;
var m = date.getMinutes() + s / 60;
var h = date.getHours() % 12 + m / 60;
// console.log(s);
// console.log(m);
// console.log(h);
// 2.3 旋转
hour.style.transform = 'rotate('+ h * 30 +'deg)';
min.style.transform = 'rotate('+ m * 6 +'deg)';
second.style.transform = 'rotate('+ s * 6 +'deg)';
}, 10);
}
</script>
</body>
</html>
网友评论