JavaScript中如何实现限时秒杀和定时跳转以及改变盒子大小

今天就跟大家聊聊有关JavaScript中如何实现限时秒杀和定时跳转以及改变盒子大小，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

创新互联服务项目包括富平网站建设、富平网站制作、富平网页制作以及富平网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，富平网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到富平省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

前言

今天来给大家盘点三个JavaScript案例，分别是实现限时秒杀、定时跳转、改变盒子大小案例，一起来看看吧!

一、实现限时秒杀案例

1.在淘宝网中，商家为了促销经常搞一些活动，例如限时秒杀是常见的一种活动，来增加消费者购买商品。

2.实现限时秒杀案例，具体代码如下所示：

HTML

             距离5/20号限时秒杀还有

*{ margin: 0; padding: 0; } .box { width: 702px; height: 378px; display: flex; flex-direction: row; align-items: center; justify-content: center; text-align: center; border: 1px solid #000; } .box div { display: flex; color: royalblue; width: 50px; height: 50px; border: 1px solid #ccc; align-items: center; justify-content: center; }

//设置秒杀结束时间 var endTime = new Date('2021', '4', '20'); //指定日期 var endSec = endTime.getTime(); //指定日期的毫秒数 // 声明变量保存剩余的时间 var d = h = m = s = 0; // 设置定时器，实现限时秒杀效果 var id = setInterval(show, 1000); function show() { var nowtime = new Date(); // 获取当前时间 // 获取时间差，单位秒 var gain = parseInt((endSec - nowtime.getTime()) / 1000); // 判断秒杀时间是否到期 if (gain > 0) { // 计算剩余天数 d = 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 + '天'; document.getElementById('hour').innerHTML = h + '时'; document.getElementById('minute').innerHTML = m + '分'; document.getElementById('second').innerHTML = s + '秒'; }

function jump(sec,url){ var sec=document.getElementById("sec").innerHTML=--sec; if(sec>0){ setTimeout('jump('+sec+',\''+url+'\') ',1000) }else{ location.href=url; } } jump(5,"https://www.baidu.com/")

//获取指定Id为box对象 var box = document.getElementById('box'); //存储点击的次数 var num = 0; // 处理点击事件 box.onclick = function() { num++; // 点击次数是奇数，盒子变大 if (num % 2) { this.style.width = '250px'; this.style.height = '250px'; this.innerHTML = '大盒子'; } else { // 点击次数是偶数，盒子变小 this.style.width = '100px'; this.style.height = '100px'; this.innerHTML = '小盒子'; } };

新网创想网站建设，新征程启航

JavaScript中如何实现限时秒杀和定时跳转以及改变盒子大小

一、实现限时秒杀案例

HTML

CSS

JavaScript

二、实现定时跳转案例

HTML

定时跳转

JavaScript

三、实现改变盒子大小案例

HTML

JavaScript

其他资讯