首页 > 代码库 > 有关字符串拼接的背景、阴影等随机改变

有关字符串拼接的背景、阴影等随机改变

2024-08-20 12:34:29   222人阅读

 

---恢复内容开始---

本文主要内容是通过随机数和字符串拼接来改变可以用数字表示的样式，
比如用RGB表示的背景色
边框大小、阴影位置和颜色、字体大小等通过字符串拼接的方式都可以实现，
本文只列举了背景随机和阴影随机位置：
实现效果如下：
技术分享技术分享
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding: 0}
        #box{
            width: 100px;
            height: 100px;
            border: 2px solid #ccc;
            position: absolute;
            top:50%;
            left: 50%;
            margin: -50px 0 0 -50px;
        }

    </style>
    <script>
        function rnd(n,m){//定义一个随机数的函数
            return parseInt(Math.random()*(m-n)+n);
        }
        function turn(obj){
            var r=rnd(0,256);
            var g=rnd(0,256);
            var b=rnd(0,256);
            //利用字符串拼接达到背景随机；
            obj.style.background=‘rgb(‘+r+‘,‘+g+‘,‘+b+‘)‘;
            //阴影随机
            obj.style.boxShadow=rnd(25,120)+‘px‘+‘ ‘+rnd(10,50)+‘px‘+‘ ‘+rnd(25,80)+‘px‘+‘ ‘+‘rgb(‘+r+‘,‘+g+‘,‘+b+‘)‘;} 
       window.onload=function(){
　　　　　　var oBox=document.getElementById(‘box‘);
　　　　　　oBox.onclick=function(){
　　　　　　　　turn(oBox);
　　　　　　}
　　　　} 
　　</script>
　　　　</head>
　　　　　　<body>
　　　　　　　　<div id="box">
　　　　　　</div>
　　</body>
</html>


 
有关字符串拼接的背景、阴影等随机改变






























        

            
                
                  
                
                

                    联系

                    我们