主要就是Math.random() 的一些用法
用途自然是很广泛, 任何有随机概念的地方, 都有可能需要到
要理解, 怎么调整范围.
Math.random() 本身返回(0,1] 左开右闭 之间的数字
Math.round(Math.random()) 则返回 [0,1] 二者之一
下面是返回 (a,b] 的函数
function returnNum (a,b) {
var a = a || 0;
var b = b || 0;
var max = Math.max(a,b);
var min = Math.min(a,b);
console.log(max,min);
return Math.random() * (max - min) + min
}
如果取整, 就能返回 [a,b] 两边都闭合的之间的值
function returnNum (a,b) {
var a = a || 0;
var b = b || 0;
var max = Math.max(a,b);
var min = Math.min(a,b);
console.log(max,min);
return Math.round(Math.random() * (max - min) + min)
}
红包下落的小demo
<html>
<head>
<meta charset="UTF-8"/>
<title>红包下落demo</title>
<style type="text/css">
.wrapper {
width: 300px;
height: 500px;
border: 2px solid #333;
border-radius: 15px;
margin: 100px auto;
overflow: hidden;
position: relative;
}
.wrapper .redBox{
width: 50px;
height: 30px;
border-radius: 10px;
background-color: #f00;
position: absolute;
transform: rotate();
}
</style>
</head>
<body>
<div class="wrapper">
</div>
<script src="jqmin.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// 返回一个随机数
function returnNum (a,b) {
var a = a || 0;
var b = b || 0;
var max = Math.max(a,b);
var min = Math.min(a,b);
console.log(max,min);
return Math.round(Math.random() * (max - min) + min)
}
// setInterval 循环
function interval () {
setTimeout(function () {
down(makeRedBox());
interval()
},returnNum(100,400))
}
interval ();
// 创建 红包
function makeRedBox () {
var div = $("<div></div>").addClass('redBox');
var w = $(".wrapper").width();
div.css({
'left' : returnNum(0,w),
'top' : '-50px',
'transform' : 'rotate(' + returnNum(-40,40) + 'deg)'
})
div.appendTo($(".wrapper"))
return div
}
function down (div) {
var h = $(".wrapper").height()
div.animate({'top': h},returnNum(2000,4000),function () {
div.remove()
})
}
// left, top ,
// 掉落 消失
</script>
</body>
</html>
网友评论