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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了有关字符串拼接的背景阴影等随机改变相关的知识,希望对你有一定的参考价值。

 

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

本文主要内容是通过随机数和字符串拼接来改变可以用数字表示的样式,
比如用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>

 

















































以上是关于有关字符串拼接的背景阴影等随机改变的主要内容,如果未能解决你的问题,请参考以下文章

Qwidget的背景颜色改变时程序随机崩溃

css 如何用图片改变表单边框的样式(圆角边框,有阴影)

阴影区域检测理论知识

SQL语句中有关单引号双引号和加号的问题

炫酷 CSS 背景效果的 10 个代码片段

字符串异常随机数小结