盘点三个JavaScript案例—实现限时秒杀、定时跳转、改变盒子大小

时间：2023-03-20 23:56:26 科技观察

盘点三个JavaScript案例——实现限时尖峰、定时跳跃、改变盒子大小Let'sgo！一、限时闪购案例1、在淘宝网上，商家经常会进行一些促销活动。例如，限时闪购是增加消费者购买商品的常见活动。2、实现限时闪??购案例，具体代码如下：HTML5/20还有限时闪购

上面代码中id为day，hour，minute，second分别代表剩余的天数，小时数，分钟数，秒数。CSS*{margin:0;padding:0;}.box{width:702px;height:378px;display:flex;flex-direction:row;align-items:center;justify-content:center;text-align:center;border:1pxsolid#000;}.boxdiv{display:flex;color:royalblue;width:50px;height:50px;border:1pxsolid#ccc;align-items:center;justify-content:center;}在上面的代码中，使用弹性布局显示：flex，为盒模型提供了很大的灵活性。flex-direction属性表示控制轴的方向，row表示水平方向。justify-content属性表示项目在主轴上的对齐方式，center表示居中。align-items属性表示项目在横轴上的对齐方式，center表示居中。JavaScript//设置秒杀结束时间varendTime=newDate('2021','4','20');//指定日期varendSec=endTime.getTime();//指定日期的毫秒数//声明变量保存剩余时间vard=h=m=s=0;//设置定时器实现限时秒杀效果varid=setInterval(show,1000);functionshow(){varnowtime=newDate();//获取当前时间//获取时差，单位秒vargain=parseInt((endSec-nowtime.getTime())/1000);//判断秒杀时间是否超时if(gain>0){//计算theremainingdaysd=parseInt(gain/(60*60*24));//计算剩余小时数h=parseInt((gain/(60*60))%24);//计算剩余分钟数m=parseInt((gain/60)%60);//计算剩余秒数s=parseInt(gain%60);}else{clearInterval(id);//清除定时器d=h=m=s='00';}//显示网页剩余的天、时、分、秒document.getElementById('day').innerHTML=d+'day';document.getElementById('hour').innerHTML=h+'hour';文档.getElementById('分钟').innerHTML=m+'分钟';文档。getElementById('second').innerHTML=s+'second';}上面代码中，首先创建秒杀结束时间，通过Date对象的getTime()方法获取秒杀结束时间和秒杀结束时间的毫秒数分别是当前时间。判断秒杀时间是否超时。如果不是，则计算剩余的天数、小时数、分钟数和秒数。如果超时则清除计时器。使用document.getElementById()方法根据指定的Id对象插入相应的内容。效果图如下：二、实现定时跳转案例1、现实生活中，用户支付成功后，页面停留几秒显示信息，然后返回首页。小编带你学习使用定时器实现跳转的效果！2、实现定时跳转的情况，具体代码如下：HTML

定时跳转

5秒自动跳转页面或点击链接跳转上面的代码中，实现了一个简单的页面布局。h1标签代表标题，a标签代表超链接的定义，span是内联元素。JavaScriptfunctionjump(sec,url){varsec=document.getElementById("sec").innerHTML=--sec;if(sec>0){setTimeout('jump('+sec+',\''+url+'\')',1000)}else{location.href=url;}}jump(5,"https://www.baidu.com/")上面代码中，首先使用document.getElementById()方法获取id作为sec，使用innerHTML方法将初始化的秒减一插入到id为sec的位置。判断秒数是否大于0，大于0则继续计数。如果小于0，则直接跳转到指定页面。效果图如下：三、改变框体大小的案例1、在Web项目开发中，用户根据不同的操作修改显示的内容和CSS样式是最常见的功能。小编带大家学习一个改变盒子大小的案例！2、实现改变盒子大小的情况，具体代码如下：HTML点我改变上面代码实现了一个宽高为100px，id为box的div。JavaScript//获取指定Id作为盒子对象varbox=document.getElementById('box');//存储点击次数varnum=0;//处理点击事件box.onclick=function(){num++;//点击次数为奇数，框变大if(num%2){this.style.width='250px';this.style.height='250px';this.innerHTML='bigbox';}else{//点击次数为偶数，框变小this.style.width='100px';this.style.height='100px';this.innerHTML='smallbox';}};上面代码中，首先使用document.getElementById()方法获取id为box，定义一个num来存储点击次数，给box添加一个点击事件并处理，如果num的值为偶数，则盒子变小。如果num的值为奇数，则框变大。本文案例参考《JavaScript前端开发案例教程》，作者黑马程序员四。总结1、本文基于JavaScript基础，实现了限时秒杀、定时跳跃、改变方块大小等功能。详细解释每个div层，以便读者更好地理解。2、在JavaScript中，实现限时尖峰和定时跳跃的案例主要是帮助理解定时器的使用，改变框大小的案例主要是帮助理解如何修改显示内容和CSS样式操作。3.代码没有那么复杂，希望对你有帮助！

上一篇：2019年值得关注的4大区块链趋势

下一篇：什么？你还不知道怎么安装MySQL

盘点三个JavaScript案例—实现限时秒杀、定时跳转、改变盒子大小相关文章