前端小白，初来乍到。封装了几个基础方法。希望大佬们指点！
- 随机区间数方法
function randomNum(min,max){
return Math.round(Math.random()*(max-min)+min);
}
- 随机颜色方法
function randomColor(){
let str="0123456789abcdef";
let a="#";
for(let i=0;i<6;i++){
let random=randomNum(0,15);
a+=str.charAt(random);
}
return a;
}
- num位随机混合验证码方法
function randomCode(num){//随机生成num位数字字母混合验证码
let code="";
for(let i=0;i<num;i++){
let str=String.fromCharCode(randomNum(48,122));//asc码随机
if((str>='a'&&str<='z')||('0'<=str&&str<='9')||('A'<=str&&str<='Z')){
code+=str;
}else{
i--;
}
}
return code;
}
基于上面的方法做一个小demo，随机生成大小的小圆圈，碰壁运动，每次碰壁变色。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
background-color:black;
}
div{
position:absolute;
border-radius: 50%;
box-shadow: 1px 1px 5px 5px rgba(211,211,211,.5);
text-align: center;
color: #F6F9FC;
font-size: 24px;
}
</style>
</head>
<body>
</body>
</html>
<script src="hubble.js"></script>
<script type="text/javascript">
let time=null;
let count=1;
time=setInterval(function(){
clearInterval("time");
var obox=document.createElement("div");
document.body.appendChild(obox);
obox.style.backgroundColor=randomColor();
obox.style.width=randomNum(60,150)+"px";
obox.style.height=obox.offsetWidth+"px";
obox.style.lineHeight=obox.offsetHeight+"px";
obox.innerText=count;
// if(count==30){//停止个数
// clearInterval(time);
// }
touch(obox);
count++;
},1000);
</script>
/* hubble.js文件代码*/
function randomColor(){//随机颜色
let str="0123456789abcdef";
let a="#";
for(let i=0;i<6;i++){
let random=randomNum(0,15);
a+=str.charAt(random);
}
return a;
}
function randomNum(min,max){//随机区间数
return Math.round(Math.random()*(max-min)+min);
}
function randomCode(num){//随机生成num位数字字母混合验证码
let code="";
for(let i=0;i<num;i++){
let str=String.fromCharCode(randomNum(48,122));//asc码随机
if((str>='a'&&str<='z')||('0'<=str&&str<='9')||('A'<=str&&str<='Z')){
code+=str;
}else{
i--;
}
}
return code;
}
function touch(obj){//碰壁回弹
let speedX=randomNum(2,12);
let speedY=randomNum(5,15);
let time=null;
time=setInterval(function(){
obj.style.top=obj.offsetTop+speedY+"px";
obj.style.left=obj.offsetLeft+speedX+"px";
if(obj.offsetTop<0){
speedY*=-1;//碰到上边框换Y的方向
obj.style.backgroundColor=randomColor();
}
if(obj.offsetLeft<0){
speedX*=-1;//碰到左边框换X的方向
obj.style.backgroundColor=randomColor();
}
let maxLeft=window.innerWidth-obj.offsetWidth-15;
if(obj.offsetLeft>maxLeft){
speedX*=-1;//碰到右边框换X的方向
obj.style.backgroundColor=randomColor();
}
let maxBottom=window.innerHeight-obj.offsetHeight-15;
if(obj.offsetTop>maxBottom){
speedY*=-1;//碰到下边框换Y的方向
obj.style.backgroundColor=randomColor();
}
},30)
}
效果截图
![ZXWIU~]E)IS@J`FNN{CK_SU.png](https://img.haomeiwen.com/i3666741/19e1a3a5f95c7443.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
网友评论