网站模板 黑白,曹县 做网站的公司,C语言也能干大事网站开发pdf,wordpress wp_signon前言 今天来给大家盘点三个JavaScript案例#xff0c;分别是实现限时秒杀、定时跳转、改变盒子大小案例#xff0c;一起来看看吧#xff01; 一、实现限时秒杀案例 1.在淘宝网中#xff0c;商家为了促销经常搞一些活动#xff0c;例如限时秒杀是常见的一种活动#xff0c… 前言 今天来给大家盘点三个JavaScript案例分别是实现限时秒杀、定时跳转、改变盒子大小案例一起来看看吧 一、实现限时秒杀案例 1.在淘宝网中商家为了促销经常搞一些活动例如限时秒杀是常见的一种活动来增加消费者购买商品。 2.实现限时秒杀案例具体代码如下所示 HTML div classboxdiv stylewidth:190px距离5/20号限时秒杀还有/divdiv idday/div div idhour/div div idminute/divdiv idsecond/div /div在上面代码中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;}在上面代码中使用弹性布局displayflex用于盒子模型提供很大的一个灵活性。 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).innerHTML d 天;document.getElementById(hour).innerHTML h 时;document.getElementById(minute).innerHTML m 分;document.getElementById(second).innerHTML s 秒;}在上面代码中首先是创建秒杀结束时间利用Date对象的getTime()方法分别获取结束秒杀的时间和当前时间的毫秒数。判断秒杀时间是否到期如果没到期计算剩余天数、小时、分钟、秒数。如果到期清除计时器。 使用document.getElementById()方法根据指定的Id对象插入相应的内容。 效果图如下所示 二、实现定时跳转案例 1.在现实生活中用户付款成功后页面停留几秒钟显示信息之后返回到首页。小编带大家一起来学习利用定时器实现跳转的效果 2.实现定时跳转案例具体代码如下所示 HTML div styletext-align: center;h1定时跳转/h1a hrefhttps://www.baidu.com/span idsec5/span秒后自动跳转页面或点击链接跳转/a
/div在上面代码中实现简单的页面布局h1标签表示大标题a标签表示定义超链接span是行内元素。 JavaScript function jump(sec,url){var secdocument.getElementById(sec).innerHTML--sec;if(sec0){setTimeout(jump(sec,\url\) ,1000)}else{location.hrefurl;}
}
jump(5,https://www.baidu.com/)在上面代码中首先是使用document.getElementById()方法获取id为sec将初始化的秒数减一使用innerHTML方法插入到id为sec位置。 判断秒数是否大于0如果大于0继续计数。如果小于0直接跳转到指定的页面。 效果图如下所示 三、实现改变盒子大小案例 1.在Web项目开发中用户根据不同操作修改显示的内容、CSS样式是最常见的功能。小编带大家一起来学习一个改变盒子大小的案例 2.实现改变盒子大小的案例具体代码如下所示 HTML div idbox stylewidth:100px;height:100px;background:burlywood;点我发生变化/div在上面代码中实现一个宽和高为100px的divid为box。 JavaScript //获取指定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 小盒子;}};在上面代码中首先是使用document.getElementById()方法获取id为box定义一个num用来存储点击的次数为box添加点击事件并处理如果num的值为偶数盒子变小。如果num的值为奇数盒子变大。 本文案例参考《JavaScript前端开发案例教程》黑马程序员编著 四、总结 1.本文基于JavaScript基础实现限时秒杀、定时跳转、改变盒子大小的功能。对每一个div层进行详解让读者更好的理解。 2.在JavaScript中实现限时秒杀、定时跳转案例主要帮助理解定时器的使用改变盒子大小案例主要是帮助理解如何去修改显示的内容、CSS样式操作。 3.代码没有那么复杂希望对你有所帮助
