Shulou(Shulou.com)06/03 Report--

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

前言

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

一、实现限时秒杀案例

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

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

HTML 距离5/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: 1px solid #000; } .box div { display: flex; color: royalblue; width: 50px; height: 50px; border: 1px solid #ccc; align-items: center; justify-content: center; }

在上面代码中，使用弹性布局display：flex，用于盒子模型提供很大的一个灵活性。

flex-direction属性表示控制主轴的方向，row表示水平方向。

justify-content属性表示项目在主轴上的对齐方式，center表示中间。

align-items属性表示项目在交叉轴上对齐方式，center表示中间。

JavaScript//设置秒杀结束时间 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')[xss_clean] = d + '天'; document.getElementById('hour')[xss_clean] = h + '时'; document.getElementById('minute')[xss_clean] = m + '分'; document.getElementById('second')[xss_clean] = s + '秒'; }

在上面代码中，首先是创建秒杀结束时间，利用Date对象的getTime()方法分别获取结束秒杀的时间和当前时间的毫秒数。判断秒杀时间是否到期，如果没到期，计算剩余天数、小时、分钟、秒数。如果到期清除计时器。

使用document.getElementById()方法根据指定的Id对象插入相应的内容。

效果图如下所示：

二、实现定时跳转案例

1.在现实生活中，用户付款成功后，页面停留几秒钟显示信息，之后，返回到首页。小编带大家一起来学习利用定时器实现跳转的效果!

2.实现定时跳转案例，具体代码如下所示：

HTML 定时跳转 5秒后自动跳转页面或点击链接跳转

在上面代码中，实现简单的页面布局，h2标签表示大标题，a标签表示定义超链接，span是行内元素。

JavaScriptfunction jump(sec,url){ var sec=document.getElementById("sec")[xss_clean]=--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，直接跳转到指定的页面。

效果图如下所示：

Third, to change the size of the box case

1. In Web project development, CSS style is the most common function for users to modify the displayed content according to different operations. Let's learn a case of changing the size of the box!

2. To implement the case of changing the size of the box, the specific code is as follows:

HTML dot I change

In the above code, implement a div with width and height of 100px, id is box.

JavaScript//Get specified Id as box object var box = document.getElementById('box'); //Store the number of clicks var num = 0; //Process click events box.onclick = function() { num++; //The number of clicks is odd, the box gets bigger if (num % 2) { this.style.width = '250px'; this.style.height = '250px'; this[xss_clean] = 'big box'; } else { //even number of clicks, box gets smaller this.style.width = '100px'; this.style.height = '100px'; this[xss_clean] = 'small box'; } };

In the above code, the first is to use the document.getElementById() method to get id as box, define a num to store the number of clicks, add click events to box and process them, if num is even, the box becomes smaller. If num has an odd value, the box gets bigger.

In JavaScript, the implementation of time-limited seconds, timed jump cases mainly help to understand the use of timers, change the size of the box case is mainly to help understand how to modify the content displayed, CSS style operations.

After reading the above, do you have any further understanding of how to implement time-limited seconds and timed jumps and change the size of boxes in JavaScript? If you still want to know more knowledge or related content, please pay attention to the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.