前言
在一些电商网站,或一些活动页上,看到一些特效,比如:抽奖时,点击图片,实现图片的随机切换,数字的随机切换等,为了吸引用户的注意力,增加网页的互动性,这个效果是怎么实现的呢
01
具体示例
https...images文件夹里面
通过相对路径的方式去实现的,上面定时器内的代码也可以使用for循环去实现的
实现这个效果,需要借助一个定时器,点击图片显示和暂停时,需要借助一个开关按钮即可实现
03
实现随机数的切换...具体代码如下所示,当使用原生js方法能实现后,在用vue或等其他一些框架,在里面实现相同的效果,核心代码实现依旧是没有变的
div id="wrap">...randomNum() {
this.timer = setInterval(() => {
// 定义一个random()函数,原理是 随机数和最大值减最小值的差相乘...上面实现随机数的生成,在一定的数值范围内生成随机数
定义一个random()函数,原理是随机数和最大值减最小值的差相乘,最后再加上最小值
其中Math.floor()浮点数向下取整
Math.floor