乔越

发表文章数:114

热门标签

, , ,

四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » 编程语言 » HTML » 【前端学习】HTML5延迟执行和周期执行,案例

定时器是什么

  1. 延迟执行:指的是指定程序代码在指定时间后被执行,而不是立即执行。

  2. 周期执行:指的是指定程序代码在指定时间为间隔,重复被执行。

延迟执行

 setTiomeout()方法设置一个定时器 在定时器定时后执行一个函数或一段指定的代码 。

var timeoutID = scope.setTimeout(function/code[,delay])
参数 描述
code 必需。要调用的函数后要执行的 JavaScript 代码串。
delay 必需。在执行代码前需等待的毫秒数。

 

周期执行

setInterval()方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。

setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

setInterval(code/milisec[,'lang'])
参数 描述
code 必需。要调用的函数或要执行的代码串。
millisec 必须。周期性执行或调用 code 之间的时间间隔,以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值

动画

requestAnimationFrame() 告诉浏览器——你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数,该回调函数会在浏览器下一次重绘之前执行

window.requestAnimationFrame(callback);

参数

  • callback

    下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入DOMHighResTimeStamp参数,该参数与performance.now()的返回值相同,它表示requestAnimationFrame() 开始去执行回调函数的时刻。

返回值

一个 long 整数,请求 ID ,是回调列表中唯一的标识。是个非零值,没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

案例:开始与结束

 

【前端学习】HTML5延迟执行和周期执行,案例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <button id="start">开始时间</button>

    <button id="stop">停止时间</button>

    <h2 id="shouwtime"></h2>

    <script>

        // 全局 timeID

        var t;

        // 获取按钮

        var start = document.getElementById('start')

        var stop2 = document.getElementById('stop')

        // 开始按钮的执行事件

        start.addEventListener('click',stime);

        // 结束按钮事件

        stop2.addEventListener('click',function(){

            // 清除延迟事件

            clearTimeout(t);

            // 恢复按钮

            start.removeAttribute('disabled')

        });

        // 开始显示的事件 获取时间

        function stime(){

            // 禁用按钮

            start.setAttribute('disabled','disabled')

            // 获取时间

            var date = new Date();

            var hour = date.getHours();

            var minute = date.getMinutes();

            var second = date.getSeconds();

            // 格式化时间

            var time = hour + ":" + minute + ":" +second;

            // 显示时间

            var showtime = document.getElementById("shouwtime");

            showtime.textContent = time;

            // 设置延迟事件

            t = setTimeout(stime,1000);

        }

    </script>

</body>

</html>

案例:小方块移动

 

【前端学习】HTML5延迟执行和周期执行,案例

<!DOCTYPE html>

<html lang="en">

<head>

	<meta charset="UTF-8">

	<title>方块移动</title>

	<style>

		body {

			margin: 0;

		}

		#box {

			width: 50px;

			height: 50px;

			background-color: coral;

			position: absolute;

			top: 200px;

			left: 100px;

		}

	</style>

</head>

<body>

	<div id="box"></div>

	<script>

		var box = document.getElementById('box')

		var t

		//开关,false表示没有被点击过,应开始移动.

		var flag = false

		box.addEventListener('click', function () {

			if (!flag) {

				t = setInterval(function () {

					//1. 获取当前方块的left

					var style = window.getComputedStyle(box)

					var left = parseFloat(style.left)

					//2. 增加left样式属性值

					left++

					//3. 利用内联样式覆盖外联样式

					box.style.left = left + 'px'

				}, 10)

				flag = true

			} else {

				clearInterval(t)

				flag = false

			}

		})

	</script>

</body>

</html>

未经允许不得转载:作者:乔越, 转载或复制请以 超链接形式 并注明出处 乔越博客
原文地址:《【前端学习】HTML5延迟执行和周期执行,案例》 发布于2020-05-14

分享到:
赞(0) 打赏 生成海报

评论 1

2 + 5 =
  1. #1

    快递单号、空包代发网站www.dh5u.com

    jgrg2天前回复

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.5主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册