JavaScript模拟实现"双11"限时秒杀效果

【案例】限时秒杀

JavaScript模拟实现

代码实现思路:

① 设计限时秒杀页面。

② 指定限时秒杀的结束时间,及其对应的毫秒数。

③ 获取当前时间的毫秒数。

④ 计算当前与秒杀结束的时间差,大于0,计算剩余的天时分秒;否则结束秒杀。

⑤ 利用定时器完成秒杀的倒计时功能。

⑥ 利用两位数字显示秒杀的时间。

代码实现

	
	
	
	
	限时秒杀
	
	
	
	

一、全局作用域

window对象:是BOM中所有对象的核心,同时也是BOM中所有对象的父对象。

定义在全局作用域中的变量、函数以及JavaScript中的内置函数都可以被window对象调用。

JavaScript模拟实现

定义在全局作用域中的getArea()函数,函数体内的this关键字指向window对象。

对于window对象的属性和方法在调用时可以省略window,直接访问其属性和方法即可。

注意

在JavaScript中直接使用一个未声明的变量会报语法错误,但是使用“window.变量名”的方式则不会报错,而是获得一个undefined结果。除此之外,delete关键字仅能删除window对象自身的属性,对于定义在全局作用域下的变量不起作用。

二、弹出对话框和窗口

window对象中除了前面提过的alert()和prompt()方法外,还提供了很多弹出对话框和窗口的方法,以及相关的操作属性。

JavaScript模拟实现

JavaScript模拟实现

所有的属性和方法在常见的浏览器(如IE、Chrome等)中全部支持。

prompt()方法

作用:用于生成用户输入的对话框。

第1个参数:用于设置用户输入的提示信息。

第2个参数:用于设置输入框中的默认信息。

JavaScript模拟实现

代码实现

JavaScript模拟实现

confirm()方法

作用:弹出一个确认对话框,该对话框中包含提示消息以及确认和取消按钮。

参数:用于设置确认的提示信息。

返回值:点击“确定”按钮,返回true。点击“取消”按钮,返回false。

JavaScript模拟实现

open()方法

作用:用于打开一个新的浏览器窗口,或查找一个已命名的窗口。

语法:open(URL, name, specs, replace)。

第1个参数:打开指定页面的URL地址,若没有指定,则打开一个新的空白窗口。

第2个参数:指定target属性或窗口的名称。

第3个参数:用于设置浏览器窗口的特征(如大小、位置、滚动条等),多个特征之间使用逗号分隔。

第4个参数:设置为true,表示替换浏览历史中的当前条目,设置false(默认值),表示在浏览历史中创建新的条目。

JavaScript模拟实现

JavaScript模拟实现

注意

与open()方法功能相反的是close()方法,用于关闭浏览器窗口,调用该方法的对象就是需要关闭的窗口对象。

‍举个例子

JavaScript模拟实现

代码实现

	
	
	
	
	打开和关闭窗口
	
	
	

三、窗口位置和大小

BOM中用来获取或更改window窗口位置,窗口高度与宽度,文档区域高度与宽度的相关属性和方法有很多。

JavaScript模拟实现

JavaScript模拟实现

目前只有window.open()方法打开的的窗口和选项卡(Tab),FireFox和Chrome浏览器才支持口位置和大小的调整。

‍举个例子

在这里插入图片描述

代码实现

	
	
	
	
	窗口位置和大小
	
	
	
	
	
	
	
	
	

四、框架操作

window对象提供的frames属性可通过集合的方式,获取HTML页面中所有的框架,length属性就可以获取当前窗口中frames的数量。

JavaScript模拟实现

除此之外,还可以利用parent获取当前window对象所在的父窗口。

在这里插入图片描述

五、定时器

JavaScript中可通过window对象提供的方法实现在指定时间后执行特定操作,也可以让程序代码每隔一段时间执行一次,实现间歇操作。

JavaScript模拟实现

setTimeout()和setInterval()方法区别:

相同点:都可以在一个固定时间段内执行JavaScript程序代码。

不同点:setTimeout()只执行一次代码,setInterval()会在指定的时间后,自动重复执行代码。

JavaScript模拟实现

提示

setTimeout()方法在执行一次后即停止了操作;setInterval()方法一旦开始执行,在不加干涉的情况下,间歇调用将会一直执行到页面关闭为止。

若要在定时器启动后,取消该操作,可以将setTimeout()的返回值(定时器ID)传递给clearTimeout()方法;或将setInterval()的返回值传递给clearInterval()方法。

‍举个例子

在这里插入图片描述

代码实现

	
	
	
	
	计数器
	
	
	
	
	
	
	
	

以上就是JavaScript模拟实现"双11"限时秒杀效果的详细内容,更多关于JavaScript限时秒杀的资料请关注脚本之家其它相关文章!

你可能感兴趣的