网站制作步骤流程图,软件下载网站排行,wordpress自定义404,整合营销说明#xff1a;该文属于 大前端全栈架构白宝书专栏#xff0c;目前阶段免费#xff0c;如需要项目实战或者是体系化资源#xff0c;文末名片加V#xff01;作者#xff1a;不渴望力量的哈士奇(哈哥)#xff0c;十余年工作经验, 从事过全栈研发、产品经理等工作#xf… 说明该文属于 大前端全栈架构白宝书专栏目前阶段免费如需要项目实战或者是体系化资源文末名片加V作者不渴望力量的哈士奇(哈哥)十余年工作经验, 从事过全栈研发、产品经理等工作目前在公司担任研发部门CTO。荣誉2022年度博客之星Top4、2023年度超级个体得主、谷歌与亚马逊开发者大会特约speaker、全栈领域优质创作者。 白宝书系列 启示录 - 攻城狮的自我修养 Python全栈白宝书 ChatGPT实践指南白宝书 产品思维训练白宝书 全域运营实战白宝书 大前端全栈架构白宝书 文章目录 ⭐ 定时器⭐ 延时器⭐ 异步语句⭐ 使用定时器实现动画 ⭐ 定时器
定时器 setInterval()函数可以设置一个定时器原理是可以重复调用一个函数在每次调用函数之间具有固定的时间间隔 示例代码
//第一个参数是需要被固定时间间隔调用的函数第二个参数是固定的时间间隔单位毫秒
setInterval(function () {//函数体
}, 2000);比如书写一段程序在控制台每1秒输出一个数字每个数字等于前一个数字加1
var a 0;
setInterval(function () {console.log(a);
}, 1000);setInterval()函数可以接收第3、4…个参数它们将作为实参按顺序传入函数 示例代码
setInterval(function (a, b) {//函数体
}, 2000, 11, 22); //11, 22将作为实参传入函数在编写程序时也可以先书写一个具体的函数再把这个函数名(注意函数名后面不要书写圆括号)作为参数传入setInterval() 示例代码:
var a 1;
function add(n) {a n;console.log(a);
};
setInterval(add, 1000, 100); //每秒调用一次add函数最后一个参数作为参数传入add函数清除定时器 clearInterval()函数可以清除一个定时器 示例代码
bodybutton idbtn清除定时器/buttonscriptvar oBtn document.getElementById(btn);var a 1;function add(n) {a n;console.log(a);};//设置定时器var timer setInterval(add, 1000, 1); //每秒调用一次add函数最后一个参数作为参数传入add函数//点击按钮清除定时器oBtn.onclick function () {clearInterval(timer);};/script
/body现在我们来做一个有趣的案例在页面上制作一个简易计时器单位秒点击开始按钮开始计时点击停止按钮停止计时
bodyh1 idinfo0/h1button idbtn1开始/buttonbutton idbtn2停止/buttonscriptvar oInfo document.getElementById(info);var oBtn1 document.getElementById(btn1);var oBtn2 document.getElementById(btn2);//注意需要将定时器定义为全局变量var timer;//点击开始设置定时器oBtn1.onclick function () {//先清除一次定时器,避免出现连续点击开始按钮触发多次事件监听创建多个定时器问题clearInterval(timer);var a 1;timer setInterval(function add() {oInfo.innerText a;}, 1000);};//点击停止清除定时器oBtn2.onclick function () {clearInterval(timer);};/script
/body⭐ 延时器
延时器 setTimeout()函数可以设置一个延时器当指定时间到了之后会执行函数注意不会重复执行 示例代码
setTimeout(function () {//2秒后执行一次这个函数
}, 2000);清除延时器 clearTimeout()函数可以清除延时器和clearInterval()非常类似 比如书写一个程序在用户打开页面2秒钟后弹出一个弹框欢迎进入哈士奇的主页如果用户在打开页面2秒内点击了任意空白部分则不弹出这个弹框。
bodyscriptvar timer;//设置延时器timer setTimeout(function () {alert(欢迎进入哈士奇的主页);}, 2000);document.onclick function () {//清除延时器clearTimeout(timer);}/script
/body⭐ 异步语句
在js中是有异步语句的比如setInerval()和setTimeout()就是两个异步语句。 **异步**不会阻塞CPU继续执行其他语句当异步完成时会执行“回调函数”callback 这是比较简单的异步语句大致了解就好在后面的用到ajax时还会接触更多的异步语句。
⭐ 使用定时器实现动画
动画是网页上非常常见的需求我们在前面已经学会了用css实现动画。动画的原理其实就是利用“视觉暂留”比如一个盒子在非常短暂的间隔时间里不停的改变它的位置我们肉眼看起来就像是它在“运动”所以我们可以利用定时器来实现动画。
下面我们做一个案例使用定时器来实现动画点击开始按钮盒子开始向右移动移动到500px的位置停止运动。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle#box {width: 100px;height: 100px;background-color: orange;position: absolute;top: 100px;left: 100px;}/style
/head
bodybutton idbtn开始运动/buttondiv idbox/divscriptvar oBtn document.getElementById(btn);var oBox document.getElementById(box);var left 100;oBtn.onclick function () {var timer setInterval(function name(params) {//每次执行函数改变一次left值并改变盒子的left属性left 2;oBox.style.left left px;//当left值达到500时清除定时器if (left 500) {clearInterval(timer);}}, 20);};/script
/body
/html这只是非常简单的例子事实上使用定时器实现动画并不方便比如想改变运动速度曲线、想使盒子运动到指定位置后再返回、想多种运动叠加比如一个方形一遍移动一边变为圆形等等都很难仅仅通过定时器来实现。最方便的实现动画的方法是jscss下篇我们就来介绍这个即简单又强大的实现动画的方法。
