(一)
生成从minNum到maxNum的随机数
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 <!--1.引入jq--> 8 <script src="http://code.jquery.com/jquery-1.4.1.min.js"></script> 9 </head> 10 11 <body> 12 <!--2.html--> 13 <button>点我</button> 14 </body> 15 <script type="text/javascript"> 16 //3.js函数和事件 17 $("button").click(function(){ 18 var n = randomNum(1,5) 19 console.log(n) 20 }) 21 //生成从minNum到maxNum的随机数 22 function randomNum(minNum, maxNum) { 23 switch(arguments.length) { 24 case 1: 25 return parseInt(Math.random() * minNum + 1, 10); 26 break; 27 case 2: 28 return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10); 29 break; 30 default: 31 return 0; 32 break; 33 } 34 } 35 </script> 36 37 </html>
(二)
纯js雪花飘落效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <style> 8 body { 9 background-color: #000; 10 /*防止出现向下滚动条*/ 11 overflow: hidden; 12 } 13 </style> 14 </head> 15 16 <body> 17 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script> 18 <script> 19 function snow() { 20 //1、定义一片雪花模板 21 var flake = $("<div>").css({ 22 "position": "absolute", 23 "color": "#fff" 24 }).html('@'); 25 26 //获取页面的宽度，利用这个数来算出，雪花开始时left的值 27 var documentWidth = $(document).width(); 28 29 //获取页面的高度 相当于雪花下落结束时Y轴的位置 30 var documentHieght = $(document).height(); 31 32 //定义生成一片雪花的毫秒数 33 var millisec = 100; 34 //2、设置第一个定时器，周期性定时器，每隔一段时间（millisec）生成一片雪花； 35 var falling = setInterval(function() { 36 //随机生成雪花下落 开始 时left的值，相当于开始时X轴的位置 37 var startLeft = Math.random() * documentWidth; 38 39 //随机生成雪花下落 结束 时left的值，相当于结束时X轴的位置 40 var endLeft = Math.random() * documentWidth; 41 42 //随机生成雪花大小 43 var flakeSize = 5 + 20 * Math.random(); 44 45 //随机生成雪花下落持续时间 46 var durationTime = 4000 + 7000 * Math.random(); 47 48 //随机生成雪花下落 开始 时的透明度 49 var startOpacity = 0.7 + 0.3 * Math.random(); 50 51 //随机生成雪花下落 结束 时的透明度 52 var endOpacity = 0.2 + 0.2 * Math.random(); 53 54 //3、克隆一个雪花模板,定义雪花的初始样式，拼接到页面中 55 flake.clone().appendTo($("body")).css({ 56 "left": startLeft, 57 "opacity": startOpacity, 58 "font-size": flakeSize, 59 "top": "-25px", 60 }).animate({ //执行动画 61 "left": endLeft, 62 "opacity": endOpacity, 63 "top": documentHieght 64 }, durationTime, function() { 65 //4、当雪花落下后，删除雪花。 66 $(this).remove(); 67 }); 68 }, millisec); 69 //5秒后清除雪花 70 setTimeout(function(){ 71 clearInterval(falling); 72 },5000) 73 }; 74 snow(); 75 </script> 76 </body> 77 </html>