随机验证码

最新推荐文章于 2024-09-08 21:29:56 发布

fizz141242

最新推荐文章于 2024-09-08 21:29:56 发布

阅读量96

点赞数

分类专栏：随机验证码文章标签： javascript css html

本文链接：https://blog.csdn.net/fizz141242/article/details/118187456

版权

随机验证码专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客介绍了一个使用CSS和JavaScript实现的动态效果，当点击一个具有预设样式的灰色盒子时，会随机生成带有不同颜色和字体大小的英文和数字，并替换原有的文字。这个效果通过获取字符数组中的随机元素，结合随机颜色和字体大小生成新的HTML<span>元素，并将这些元素插入到盒子内。点击事件触发了这个动态变化，提供了一种交互式的页面元素更新方式。

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

css部分

 <style>
        *{
        /* 取消文字双击颜色 */
            user-select: none;
        }
        .box {
            width: 180px;
            height: 60px;
            background-color: #ccc;
            text-align: center;
        }

        span:nth-child(1) {
            color: yellow;
            font-size: 20px;
        }

        span:nth-child(2) {
            color: rgb(141, 141, 19);
            font-size: 30px;
        }

        span:nth-child(3) {
            color: rgb(104, 45, 201);
            font-size: 16px;
        }

        span:nth-child(4) {
            color: rgb(240, 50, 50);
            font-size: 40px;
        }
    </style>

 <div class="box">
        <span>a</span>
        <span>b</span>
        <span>c</span>
        <span>d</span>
    </div>

js部分

   <script>
     	// 取到随机数中可能出现的大小写英文和数字
        let arr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        let box = document.querySelector('.box')
        box.onclick = () => {
            let arr1 = '';
            for (let i = 0; i < 4; i++) {
            	 // Math.floor()为向下取整
            	 // 随机文字大小
                let fz = Math.floor(Math.random() * 20 + 20)
                 // 颜色rgb中的随机r
                let r = Math.floor(Math.random() * 256)
                 // 颜色rgb中的随机g
                let g = Math.floor(Math.random() * 256)
                 // 颜色rgb中的随机b
                let b = Math.floor(Math.random() * 256)
                 // 随机arr字符串
                let num=Math.floor(Math.random()*arr.length)
                arr1=arr1+'<span style="font-size:'+fz+'px;color:rgb('+r+','+g+','+b+')">'+arr[num]+'</span>'
            }
            box.innerHTML=arr1;
        }
    </script>

思路大致就是这样如有不足之处还请见谅！！！
另外下面为封装函数

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            /* 取消文字双击颜色 */
            user-select: none;
        }
        .box {
            width: 180px;
            height: 60px;
            background-color: #ccc;
            text-align: center;
        }

        span:nth-child(1) {
            color: yellow;
            font-size: 20px;
        }

        span:nth-child(2) {
            color: rgb(141, 141, 19);
            font-size: 30px;
        }

        span:nth-child(3) {
            color: rgb(104, 45, 201);
            font-size: 16px;
        }

        span:nth-child(4) {
            color: rgb(240, 50, 50);
            font-size: 40px;
        }
    </style>
</head>

<body>
    <div class="box">
        <span>a</span>
        <span>b</span>
        <span>c</span>
        <span>d</span>
    </div> 
    <script>
        // 取到随机数中可能出现的大小写英文和数字
        let arr = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        let box = document.querySelector('.box')
        box.onclick = () => {
            rom(box,arr,4);
        }
        function rom(className,array,n){
            let arr1 = '';
            for (let i = 0; i < n; i++) {
                let fz = Math.floor(Math.random() * 20 + 20)
                let r = Math.floor(Math.random() * 256)
                let g = Math.floor(Math.random() * 256)
                let b = Math.floor(Math.random() * 256)
                let num=Math.floor(Math.random()*array.length)
                arr1=arr1+'<span style="font-size:'+fz+'px;color:rgb('+r+','+g+','+b+')">'+array[num]+'</span>'
            }
            className.innerHTML=arr1;
        }
    </script>
</body>

</html>

fizz141242

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
随机验证码

css部分 <style> *{ /* 取消文字双击颜色 */ user-select: none; } .box { width: 180px; height: 60px; background-color: #ccc; text-align: center; } span:n
复制链接

扫一扫

专栏目录