js怎么做倒计时

在网页设计中，有时辰为了设计的需要，当用户在点击某个按钮的时辰就会倒计时进行计时。那么在网页中若何用javascript做倒计时呢？下面就随我一路进行现实操作吧。

东西/原料

软件：Adobe Dreamweaver cs4
演示浏览器：IE11.0浏览器

方式/步调

1
第一步：打开Adobe Dreamweaver玩也设计软件后，点击新建一个HTML网页文件。
2
第二步：点击“代码”视图后，就可以看到HTML的代码，因为要在网页中展示倒计时，所以需要先写一个结构对象<div>标签。
<body>
<div id="daojishi">将在这里显示倒计时</div>
</body>
3
第三步：为了在浏览器中不雅看比力便利，我们给这个div标签设置一个样式，让其居中在浏览器屏幕上显示。
<style>
#daojishi{ width:200px; height:200px; border: 1px solid #C03; margin: 300px auto; line-height:200px; text-align:center;}

</style>
4
第四步：此时起头编写js语句，起首在<body></body>标签的中心写上js剧本标签<script type="text/javascript"></script>
5
第五步：起首界说一个全局变量保留倒计时的数，再自界说一个函数：test()，
<script type="text/javascript">
var d = 10; //10秒倒计时
function test(){

}
</script>
6
第六步：在函数内部先获取要在网页中显示倒计时的标签：
<script type="text/javascript">
var d = 10;
function test(){
document.getElementById("daojishi").innerHTML="倒计时"+d+"秒";
}

</script>
7
第七步：起头写判定语句，若是倒计时小于0了，那么就要做出响应的反馈信息。
<script type="text/javascript">
var d = 10;
function test(){
document.getElementById("daojishi").innerHTML="倒计时"+d+"秒";
d--;
if(d<0){
document.getElementById("daojishi").innerHTML="时候到";
}
}
</script>
8
第八步：因为倒计时是动态转变的，所有需要每秒种都挪用一次所界说的函数，是以需要写上：
<script type="text/javascript">
var d = 10;
function test(){
document.getElementById("daojishi").innerHTML="倒计时"+d+"秒";
d--;
if(d<0){
document.getElementById("daojishi").innerHTML="时候到";
}
}
setInterval("test()",1000)；
</script>
9
第九步：保留该网页文件，在浏览器中打开进行预览。当倒计不时间到之后就会按照设置的信息显示“时候到”。
10
总结：
1、新建一个HTML文件后，在代码窗口中起首要编写一个标签用来显示到倒计时
2、给该标签写上响应的样式，以便在浏览器中进行不雅看
3、在<body>标签的中心写上剧本标签<script>
4、在剧本标签中起首界说一个全局变量来保留倒计时原始数，再自界说一个函数
5、起首挪用再网页中需要显示倒计时的标签
6、经由过程inner HTML属性进行内容的输出
7、对全局变量进行判定，若是倒计时小于0，那么就应该做出响应的反馈信息
8、因为是动态显示倒计时，是以需要每秒种挪用一次该函数,方式是写上setInterval();

发表于 2019-12-01 20:28
阅读 ( 1069 )
分类：其他类型

js怎么做倒计时

东西/原料

方式/步调

你可能感兴趣的文章

相关问题

0 条评论

作家榜 »

推荐文章