前言
在vb中曾经学习过计时器，但是在BS中，计时器又是什么样的呢？
正文
在页面加载计时器，并显示当前时间，同时可以用按钮控制开始和停止。
Js代码：
1.页面加载事件
(里边包含javascript所有的代码，即以下所有代码)
onload = function(){}
2.将计时器的时间给页面的标签
window.date.innerHTML = new Date().toLocaleString();
3.计时器运行代码（1秒/变化）
var intervalId = setInterval(function () {
if (isRun) {
window.date.innerHTML = new Date().toLocaleString();
}
}, 1000);
4.按钮点击事件
（注释的代码是没有优化之前的，当然也可以成功运行）
获取按钮中的事件就是：document.getElementById("")
document.getElementById("btn").onclick = function () {
/*
if (this.value == "点击停止") {
isRun = !isRun;
this.value = "点击开始";
} else {
//就是要开始
isRun = !isRun;
this.value = "点击停止";
};
*/
isRun = !isRun;
this.value = "点击" + "开始,停止".split(',')[Number(isRun)];
};
5.body中添加标签和按钮
<body>
<p>现在时刻：<span id="date"></span></p>
<input type="button" name="name" value="点击停止" id="btn"/>
</body>
计时器的应用：倒数跳转
我们在很多网页可以看到一些倒数为0之后页面跳转的例子，那么这是怎么做的呢？
先看一个倒数跳转的小李子
实现方法：
在计时器的基础上加一个数字倒数和跳转页面的代码即可。
1.代码如下
新建一个html页
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
var span = document.getElementById("second");
var intervalId = setInterval(function () {
//设置计时器
//倒数的代码
var num = span.innerHTML - 1;
span.innerHTML = num;
if (num <= 0) {
//跳转
//停下计数器
clearInterval(intervalId);
location.href = "https://blog.csdn.net/hdy14";
}
},1000);
};
</script>
</head>
<body>
<p>请等待<span id="second">10</span>秒后跳转</p>
</body>
</html>
计时器的应用2： 走马灯
效果如下
代码：
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
onload = function () {
var p = document.getElementById("p");
setInterval(function () {
var txt = p.innerHTML;
var head = txt.charAt(0);
var body = txt.substr(1);
p.innerHTML = body + head;
}, 200);
};
</script>
</head>
<body>
<p id="p">欢迎来到Winni的世界，这里有你想要的快乐鸭?~~~~</p>
</body>
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！