随机生成字母

最新推荐文章于 2024-08-20 15:49:45 发布

诗霖雪

最新推荐文章于 2024-08-20 15:49:45 发布

阅读量487

点赞数 13

分类专栏： js案例文章标签： css css3 javascript

本文链接：https://blog.csdn.net/m0_56713342/article/details/134615007

版权

js案例专栏收录该内容

14 篇文章 1 订阅

订阅专栏

css代码

html代码

js代码

css代码

     .box {
            width: 400px;
            height: 400px;
            background-color: #797979;
            margin: 100px auto;
            padding-top: 100px;
        }

       .text{
            width: 200px;
            height: 50px;
            outline: none;
            border: 5px solid #545454;
            background-color: #797979;
            border-radius: 10px;
            font-size: 40px;
            margin: 0 auto;
        }

        button {
            color: white;
            background-color: #a955fe;
            outline: none;
            border: none;
            width: 60px;
            height: 30px;
            border-radius: 15px;
        }

        span {
            display: inline-block;
            width: 100px;
            height: 50px;
            border: 5px solid #f93200;
            background-color: white;
            font-size: 40px;

        }

        p {
            text-align: center;
        }

html代码

 <div class="box">
        <p class="text"></p>

        <p>
            <button>开始</button>
            <button>停止</button>
        </p>

        <p>您的选择是：<span></span></p>
    </div>

js代码

  const text = document.querySelector('.text')
        const btn = document.querySelectorAll('button')
        const span = document.querySelector('span')

        function Random(n, m) {
            if (n > m) {
                let temp = n
                n = m
                m = temp
            }
            return Math.floor(Math.random() * (m - n + 1)) + n

        }
      let arr = ['a', 'b', 'c', 'd', 'e', 'f', 'h', 'i', 'l', 'j', 'k', 'm', 'l', 'n', 'q', 'r', 'u', 'y', 'o', 'p', 'x', 'z', 's', 'v', 't', 'w']

        let timer
        btn[0].addEventListener('click', function () {

            
             timer = setInterval(function () {
                let random =Random(0,arr.length-1)
                text.innerHTML = arr[random]
               
     

            }, 60)

        })
        btn[1].addEventListener('click', function () {
            clearInterval(timer)
            span.innerHTML=text.innerHTML
        })