html中怎样设置定时器

定时器在html中非常常见,比如轮播图啊,倒计时啊,都用到了定时器,今天咪咪我就来通过倒计时的案例,教教大家怎样使用定时器。

操作方法

  • 01

    新建一个html页面,然后设置一个按钮,并且给这个按钮绑定一个函数。比如咪咪我就设置了一个函数timer,待会我们就用这个函数。

  • 02

    现在我要做的就是一个倒计时定时器,假设倒计时间是5秒,所以我们就需要设置一个变量来保存秒数。并且我们还要获取到button这个元素哦。

  • 03

    如图,设置一个变量用来保存定时器。setInterval就是定时器函数,它有两个参数,第一个是函数,第二个是时间,这里我就设置了每隔1000毫秒就调用一次function()。

  • 04

    接着我们开始在function里面写代码,首先判断s是不是小于0,因为我做的定时器是从5秒开始倒计时,如果小于0就会出现负数,所以需要判断是否小于0,如果小于0就清除定时器,修改按钮里面的内容,并且让按钮可用。

  • 05

    如果不小于0,则修改按钮的内容,并且时间减去1,同时让按钮不可用。

  • 06

    倒计时定时器做好之后,最初的效果如图,此时按钮颜色是比较亮的,表示的是按钮处于可点击状态,并且里面的文字是“发送”。

  • 07

    而当我们点击按钮的时候,开始五秒倒计时,并且此时按钮文字改变了,而且按钮处于不可点击状态哦。而倒计时结束之后,按钮又会变成步骤6的模样,如果再次点击,则会再次循环哦。

(0)

相关推荐

  • 如何在Excel2003中快速设置表格背景以及边框的颜色

    在制作表格时我们常常希望更改表格的边框颜色和背景颜色来达到自己想要的效果!但是设置表格背景和边框颜色对于一些新手朋友来说算是比较困难的事情,今天电脑软硬件应用网就来指导指导刚入门的朋友如何在Excel ...

  • Excel2010中如何设置图表指定颜色表示负值

    在Excel中制作条形图或柱形图时,默认所有的数据条(或柱形)都是同一种颜色的。有时会遇到数据为负值的情况,如果能在图表中用其他颜色表示负值将会更加醒目。在Excel 2010中,设置方法如下: 如图 ...

  • WPS文字中如何设置页码

    Word中可以完成的工作WPS中同样可以完成,就拿设置页码来说吧!我们经常在制作书籍和毕业论文的时候都需要给文档的下方加上页码,这样以后我们阅读起来就可以清楚的知道我们在哪个位置了。WPS中是如何实现 ...

  • 在Windows8系统中如何设置宽带自动连接的图文步骤

    在Windows8系统中很多朋友不会设置宽带自动连接,每次都要手动连接很不方便,今天小编就告诉大家在Windows8系统中如何设置宽带自动连接的图文步骤 详细步骤如下: 一、 在创建宽带连接的时候选择 ...

  • 如何在Win8.1中快速设置VPN连接 Win 8.1中快速设置VPN连接的方法步骤

    在我们的日常工作中有时会需要用到VPN,那么如何在Win8.1中快速设置VPN连接呢?这就是我们今天要介绍的,其实这个功能说到底非常地简单,相信大家一看就会。 首先将鼠标滑动至屏幕右上角或右下角,呼出 ...

  • 在win8系统中怎么设置睡眠唤醒需要输入密码

    我的系统是windows8,我想设置睡眠唤醒需要输入密码,请问在windows8中怎么设置睡眠唤醒需要输入密码? 1.点击超级按钮的“设置”选项,如下图: 2.点击“设置”选项中下方的“更改电脑设置” ...

  • Word2003中怎样设置纸张和文档网格

    文章介绍一下Word2003 怎么来设置纸张和文档网格,有需要的同学可参考一下。 现在,还是不用急于录入文字,需要指定一下文字的样式。通常,很多人都是在录入文字后,用“字体”、“字号”等命令设置文字的 ...

  • Win7系统用户在局域网中共享设置方法

    现在,一般的家庭有两三台电脑已经相当普遍,而其中的一些品牌笔记本,则可能已经升级安装了最新的Windows 7操作系统(以下简称Win 7)。那么在这样的情况下,如何组建纯Win 7系统环境或Win ...

  • PowerPoint演示文稿中如何设置自定义动画

    动态的东西,总是给人活灵活现的感觉。在制作演示文稿时,除了会设置幻灯片的切换方式外,还通常会为幻灯片中的某些内容(如图片、文字等)设置动画效果,使幻灯片欣赏起来不至于太呆板。 1.制作进入动画效果 选 ...