js_开发小技巧记录（一）

(一)

生成从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>

View Code

(二)

纯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>

View Code