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