当前位置:网站首页 > Vue.js开发 > 正文

时钟的代码(时钟代码js)



window 对象给我们提供了 2 个非常好用的方法-定时器

  • setTimeout()
  • setInterval()

我将在这里介绍setTimeout()定时器,如果想看setInterval()定时器请看主页也有相关介绍内容哦!!!

setTimeout() 是属于 window 的方法,该方法用于在指定的毫秒数后调用函数或计算表达式。

语法格式可以是以下两种:

 

接下来我们先来看一个简单的例子:

 

在运行的时候我们可以看到页面在开启三秒后, 就会出现一个 alert 对话框。

setTimeout() 是设定一个指定等候时间 (单位是千分之一秒, millisecond), 时间到了, 浏览器就会执行一个指定的代码, 如下图:

setTimeout() 也可以用来执行指定的函数(function),如下实例,网页上的文字会在三秒后消修改。

 

实例中设定了等待 3 秒 (3000 milliseconds) 后浏览器就会执行 changeState( ) 这一个函数。

接下来我们可以通过 setTimeout() 不断执行指定函数来实现一个计数器:

 

实例中页面在载入后执行 countSecond() 函数,该函数内使用了 setTimeout() 方法,该方法在每隔一秒调用 countSecond() 函数,所以最终会导致 countSecond( ) 每秒执行一次,实现计数效果。

当然我们也可以在计数器的函数上添加一些片段,实现在指定条件下停止计数:

 

实例中在 x 小于 20 的时候会每秒执行一次 countSecond() 函数,在 x 大于等于20 的时候就会停止执行。

既然有开始计数,那么相对应的就要有停止计数,停止计时使用的函数为 clearTimeout()。

setTimeout() 方法可以使到浏览器不断执行一段代码或一个函数 当一个 setTimeout( ) 开始了循环的工作, 我们要使它停下来, 可使用 clearTimeout( ) 这方法。

clearTimeout() 语法:

 

timeoutID 为调用 setTimeout() 函数时所获得的返回值,使用该返回标识符作为参数,可以取消该 setTimeout() 所设定的定时执行操作。

 

使用 meter1 与 meter2 作为 timeoutID 的名称, 在设定 clearTimeout( ) 时, 就可指定对哪一个 setTimeout() 有效, 不会影响另一个 setTimeout() 的操作。

如下实例:

 

到此这篇时钟的代码(时钟代码js)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • pcie4.0x1速度(pcie4.0 速度)2025-01-07 13:54:10
  • vue.js从入门到项目实战(Vue.js从入门到项目实战(升级版)下载)2025-01-07 13:54:10
  • vue路由守卫的几种方法(vuerouter的路由守卫)2025-01-07 13:54:10
  • jsj是哪个男明星(jsy是哪个男明星的缩写)2025-01-07 13:54:10
  • ubuntu镜像文件可以删除吗(ubuntu18.04镜像文件)2025-01-07 13:54:10
  • pcie5.0电源和ATX3.0(pcie4.0供电)2025-01-07 13:54:10
  • vue路由守卫作用(vue3 路由守卫)2025-01-07 13:54:10
  • pcie5.0显卡供电线(显卡pcie供电线怎么插)2025-01-07 13:54:10
  • ettercap下载和安装(ettercap 0.8.3教程)2025-01-07 13:54:10
  • vue2生命周期啥时候做(vue 生命周期)2025-01-07 13:54:10
  • 全屏图片