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

前言

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

一、实现限时秒杀案例

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

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

HTML

<div class="box"><div style="width:190px">距离5/20号限时秒杀还有</div><div id="day"></div> <div id="hour"></div> <div id="minute"></div><div id="second"></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;}

在上面代码中,使用弹性布局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').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 style="text-align: center;"><h1>定时跳转</h1><a href="https://www.baidu.com/"><span id="sec">5</span>秒后自动跳转页面或点击链接跳转</a>
</div>

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

JavaScript

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/")

在上面代码中,首先是使用document.getElementById()方法获取id为sec,将初始化的秒数减一使用innerHTML方法插入到id为sec位置。

判断秒数是否大于0,如果大于0,继续计数。如果小于0,直接跳转到指定的页面。

效果图如下所示:

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

1.在Web项目开发中,用户根据不同操作修改显示的内容、CSS样式是最常见的功能。小编带大家一起来学习一个改变盒子大小的案例!

2.实现改变盒子大小的案例,具体代码如下所示:

HTML

<div id="box" style="width:100px;height:100px;background:burlywood;">点我发生变化</div>

在上面代码中,实现一个宽和高为100px的div,id为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.代码没有那么复杂,希望对你有所帮助!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/270724.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为的鸿蒙系统是海思_死心了!华为鸿蒙系统首款终端确认,不是手机

欢迎点击上面ZAKER关注5 月底谷歌宣布断供华为。随后&#xff0c;华为 " 秘密 " 研发 7 年的自主产权操作系统鸿蒙被公之于众。随着关于鸿蒙系统的消息越来越多&#xff0c;如鸿蒙系统 2012 年便开始规划、鸿蒙系统在多个国家注册商标等。人们除了佩服华为的未雨绸缪…

网络知识:宽带下载网速是30MB/s,经过路由器后仅10MB/s,看完你就懂了

问题&#xff1a;宽带下载网速本是30MB/s&#xff0c;经过路由器后速度仅10MB/s&#xff0c;这是为什么&#xff1f; 宽带下载测速可以到30MB/s&#xff0c;说明外线和光猫还有电脑是没有问题的。目前家庭的组网基本都是光纤入户了&#xff0c;你的测速瓶颈既然不在光猫&#…

手机投屏到电脑的5种方式,你学到了吗

今天小编给大家分享5种手机投屏到电脑的方式&#xff0c;希望对大家能有帮助&#xff01; 方法一&#xff1a; 1、我们可以通过Win10自带的投影功能&#xff0c;将我们的手机和电脑连接同一个无线网络。 2、接下来我们就在电脑开始菜单栏里找到设置选项打开。 3、我们进入之后找…

poj 3728 Catch That Cow ([kuangbin带你飞]专题一 简单搜索)

题目大意&#xff1a;题目链接 就是给你N&#xff0c;K&#xff0c;每次有三种惭怍1&#xff0c;-1&#xff0c;*2&#xff0c;&#xff0c;问多少次操作能到K 解题思路&#xff0c;搜索直接算&#xff0c;。&#xff0c;&#xff0c;&#xff0c;哎&#xff0c;啥时候这种垃圾…

不拦截指定路径_控制层访问拦截

在控制层进行访问拦截也是我们在项目中常会遇到的需求,例如:项目中要求系统登录操作有时间限制--12306购票时间的限制等.对于这类需求我们一般有几种选择:过滤器FilterAOPSpringMVC拦截器...本文我们主要说一下SpringMVC拦截器的实现原理Spring MVC的拦截器是基于回调机制,可以…

电脑知识:Win10系统把系统盘的软件移到D盘的简单方法

❤️作者主页&#xff1a;IT技术分享社区 ❤️作者简介&#xff1a;大家好,我是IT技术分享社区的博主&#xff0c;从事C#、Java开发九年&#xff0c;对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉&#xff1a; 数据库领域优质创作者&#x1f3c6;&#x…

RuntimeException和Exception区别

Exception &#xff1a;受检查的异常&#xff0c;这种异常是强制我们catch或throw的异常。你遇到这种异常必须进行catch或throw&#xff0c;如果不处理&#xff0c;编译器会报错。比如&#xff1a;IOException。 RuntimeException&#xff1a;运行时异常&#xff0c;这种异常我…

语言高精度算法阶乘_JavaScript中的算法(附10道面试常见算法题解决方法和思路)...

https://juejin.im/post/6844903811505455118Introduction面试过程通常从最初的电话面试开始&#xff0c;然后是现场面试&#xff0c;检查编程技能和文化契合度。几乎毫无例外&#xff0c;最终的决定因素是还是编码能力。通常上&#xff0c;不仅仅要求能得到正确的答案&#xf…

硬件:LCD和LED相关知识介绍

目录 一、LCD简介 二、LED简介 三、LED和 LCD的区别 四、LED和 LCD显示器的区别 一、LCD简介 LCD是液晶显示屏(Liquid Crystal)Display的全称&#xff0c;主要有TFT、UFB、TFD、STN等几种类型的液晶显示屏无法定位程序输入点于动态链接库上。 笔记本液晶屏最常用的是TFT。 TFT…

Swagger+AutoRest 生成web api客户端(.Net)

简介 对于.net来说&#xff0c;用web api来构建服务是一个不错的选择&#xff0c;都是http请求&#xff0c;调用简单&#xff0c;但是如果真的要在程序中调用&#xff0c;则还有些工作要做&#xff0c;比如我们需要手写httpClient调用&#xff0c;并映射Model&#xff0c; 如果…

电脑技巧:六款Mac电脑上值得推荐的看图软件

❤️作者主页&#xff1a;IT技术分享社区 ❤️作者简介&#xff1a;大家好,我是IT技术分享社区的博主&#xff0c;从事C#、Java开发九年&#xff0c;对数据库、C#、Java、前端、运维、电脑技巧等经验丰富。 ❤️个人荣誉&#xff1a; 数据库领域优质创作者&#x1f3c6;&#x…

Git的smart Checkout\force checkout\Don‘t Checkout的区别

我们在develop分支修改了代码,但是没有commit,所以在切换到其他分支的时候回弹出这个窗口. smart checkout就会把冲突的这部分内容带到目的分支&#xff08;如果你没有点进窗口的那些文件处理冲突的话&#xff09; force checkout就不会把冲突的这部分内容带到目的分支 dont ch…

软件:推荐5款职场人必备的效率神器APP

目录 1.番茄TO DO&#xff08;支持Android、ios端下载&#xff09; 2.块时间 &#xff08;支持Android、ios端下载&#xff09; 3.滴答清单&#xff08;支持Android、ios端、PC端下载&#xff09; 4.Eventai&#xff08;仅ios端下载&#xff09; 5.Ihour&#xff08;支持Androi…

Windows常用必备软件整理,太全了,值得收藏

目录 1、Office系列 2、杀毒软件 3、视频播放和视频处理 4、音乐播放 5、压缩解压 6、输入法 7、PDF阅读软件 8、文件加密 9、网盘 10、社交聊天 11、日常办公软件 ‍12、图片/照片处理‍ 13、系统自带的工具 Windows常用必备软件整理&#xff0c;太全了&#xff0c;值得收藏&…

数据库:SQLServer数据库备份方式介绍

今天小编给大家梳理一下数据库备份的相关知识&#xff0c;希望对大家能有所帮助&#xff01;1、完整备份完整备份相当于针对整个数据库备份&#xff0c;包含数据库的全部内容。数据库完整备份可以将数据库的所有内容备份为一个.Bak文件。后续可以通过该备份文件在本机或者拷贝到…

注入双括号报错注入_SQL手动注入:sqlilabs(less110)

种一棵树最好的时间是10年前&#xff0c;其次是现在。忘了是谁前言说实话&#xff0c;由于前段时间学 python &#xff0c;对于 OWASP TOP10 漏洞的学习都有所落下&#xff0c;虽然现在也在慢慢复习当中&#xff0c;但是今晚谈及的 SQL 注入漏洞手动注入和自动化(sqlmap)注入的…

markdown学习/mou

markdown编辑器mou markdown编辑器的使用很简单&#xff0c;mac平台选择课 MOU 这款比较轻的客户端。 使用也很方便&#xff0c;打开软件&#xff0c;->helo->mou help 就有各种示例&#xff0c;照葫芦画瓢。 有些关键字需要转义,使用的时候要注意&#xff0c;比如插入一…

硬件知识:内存条出现故障的解决方案!

“电脑不时的突然出现蓝屏”&#xff0c;“开机之后毫无规律的死机”&#xff0c;“开不了机&#xff0c;一开机就出现嘶鸣声”&#xff0c;如果你的电脑出现了以上情况&#xff0c;就是你的内存兼容性出了问题&#xff0c;那么这种故障该如何解决呢&#xff1f;下面&#xff0…