js如何实现随机数切换

itclanCoder

于 2023-01-16 09:01:00 发布

阅读量552

点赞数 2

文章标签： javascript 前端 vue.js html css

本文链接：https://blog.csdn.net/wzc_coder/article/details/128710882

版权

文章介绍了如何使用JavaScript实现点击图片实现图片和数字的随机切换效果，这种效果常见于电商网站和活动页面以增加互动性。通过设置定时器和开关按钮，结合HTML、CSS和JavaScript，可以创建图片的自动切换。对于数字的随机切换，文章提供了一个Vue.js的示例，展示了在组件中如何实现类似功能。核心是利用Math.random()生成随机数，并结合数组操作进行切换。

摘要由CSDN通过智能技术生成

前言

在一些电商网站,或一些活动页上,看到一些特效,比如:抽奖时,点击图片,实现图片的随机切换,数字的随机切换等,为了吸引用户的注意力,增加网页的互动性,这个效果是怎么实现的呢

具体示例

https://coder.itclan.cn/fontend/js/14-click-num-suiji/

点击文末左下角阅读原文,即可查看

随机切换图片代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>点击图片随机切换</title>
    <style>
        * {
        padding:0;
          margin:0
        }
        #wrap{
            width:420px;
            height:531px;
            margin:auto;
            border:1px solid #000;
            text-align: center;
            cursor: pointer
        }
    </style>
</head>

<body>
    <div id="wrap">
        <img src="images/1.jpg" alt="" width="100%" height="100%">
    </div>

    <script>
          var index = 0;
          var oWrap = document.getElementById('wrap');
          var timer = null; // 定义一个定时器
          var onOff = true; // 开关按钮
          play();
            function play(){
               timer = setInterval(function(){
                    index++;
                    if(index>10){
                       index = 1;
                    }
                    document.querySelector("img").src="images/"+index+".jpg"
               },100);
            }
            // 事件操作
            oWrap.onclick = function(){
              if(onOff){
                   clearInterval(timer); // 清除定时器
              }else{
                   play();
              }
              onOff = !onOff;
            }
    </script>
</body>
</html>

随机切换图片,其实就是在切换图片img的src,当然也可以把图片放到一个数组当中存储的,上面我是把一些图片放到一个images文件夹里面

通过相对路径的方式去实现的,上面定时器内的代码也可以使用for循环去实现的

实现这个效果,需要借助一个定时器,点击图片显示和暂停时,需要借助一个开关按钮即可实现

实现随机数的切换

具体代码如下所示,当使用原生js方法能实现后,在用vue或等其他一些框架,在里面实现相同的效果，核心代码实现依旧是没有变的

<template>
    <div id="wrap">
          <p class="text" :style="{color}">{{num}}</p>
          <p>
            <el-button :type="onOff == true?'primary':'danger'" @click="handleBtnCLick">{{onOff ==true?'暂停':'开始'}}</el-button>
        </p>
    </div>
</template>

<script>
    export default {
        name:"clickimgSuiji",
        data() {
            return {
                num: 0,
                numbers: [],
                timer: null,
                onOff: true, // 开关
                color: "red"

            }
        },
        mounted() {
            this.addNum();
            this.randomNum();
        },

        methods: {
          addNum() {
             for(let i = 1;i<=100;i++) {
                this.numbers.push(i)
             }
           },

           randomNum() {
              this.timer = setInterval(() => {
                // 定义一个random()函数，原理是 随机数和最大值减最小值的差相乘 最后再加上最小值
                // Math.floor(Math.random() * (max - min)) + min
                this.num = Math.floor(Math.random() * (this.numbers.length - 1)) + 1
              },100)
           },

           handleBtnCLick() {
              if(this.onOff) {
                this.color="#000";
                clearInterval(this.timer); // 清除定时器
              }else {
                this.color="red";
                this.randomNum();
              }
              this.onOff = !this.onOff;
           }
         
        }
    }
</script>

<style lang="scss" scoped>

#wrap{
  text-align: center;
}

.text {
    font-size: 20px;
    font-weight: bold;
}
</style>

重要的知识点

上面实现随机数的生成,在一定的数值范围内生成随机数

定义一个random()函数,原理是随机数和最大值减最小值的差相乘,最后再加上最小值

其中Math.floor()浮点数向下取整

Math.floor(Math.random() * (max - min)) + min

其他的,都是与原生js实现都是一样的,同样用的是定时器,加上一个开关去实现的

点击左下角查看更多

itclanCoder

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫