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

转载于:https://www.cnblogs.com/wush-1215/p/8379178.html

js_开发小技巧记录（一）相关推荐

Delphi三层开发小技巧:TClientDataSet的Delta妙用
Delphi三层开发小技巧:TClientDataSet的Delta妙用 Delphi做三层开发时,很多人都会在客户端放一个TClientDataSet,中间层远程数据模块就对应放一个TDataSet ...
Android开发小技巧 | 一句命令搞定截屏
-- 简书作者谢恩铭转载请注明出处一句命令搞定截屏在安卓开发中, 我们很多时候都要用到截屏这个功能. 有时是为了演示, 有时是为了报告问题(比如在Bugzilla, Jira, Redmine ...
Android 开发小技巧 | 一句命令搞定截屏
-- 作者谢恩铭转载请注明出处一句命令搞定截屏在安卓开发中, 我们很多时候都要用到截屏这个功能. 有时是为了演示, 有时是为了报告问题(比如在Bugzilla, Jira, Redmine等B ...
flex开发小技巧集锦
关于flex开发网上有非常多的相关信息介绍,因此我们要想学习关于flex开发的知识信息技能是一件非常简单和方便的事情.而针对于flex开发小编要告诉大家的是一些flex开发小技巧.利用这些小技巧能够有 ...
日常安排php,PHP日常开发小技巧
PHP日常开发小技巧导语:PHP语言中,如果你懂得一些开发技巧,那么对你学PHP,会有很大的帮助.下面的是百分网小编为大家整理的PHP日常开发小技巧,希望对你能有所帮助. PHP批量取得checkb ...
Silverlight 游戏开发小技巧：动感小菜单2
Silverlight 游戏开发小技巧:动感小菜单2 动感小菜单其实是想模仿Apple的菜单按钮设计制作,但是画虎不成反类犬,看起来有点别扭,昨天各位园友提了这方面的建议,感觉太硬如果加入动画可能更好 ...
Silve“.NET研究”rlight 游戏开发小技巧：传说中的透视跑马灯
昨夜元宵佳节,各种灯会热闹非凡,伴随烟火灿烂好不热闹,可惜一点也没看着T_T,那就写一个跑马灯吧,可是跑马灯并不稀奇,各位高手们已经写过而且都各有特点,所以,写也要写点有特色的才好,游戏中经常能看到一 ...
一起谈.NET技术，Silverlight 游戏开发小技巧：动感小菜单
网页应用受限于自身的浏览器范畴,不能把华丽效果完全展示,正是因为如此,在网页上诞生了无数绚丽的设计,虽然动感程度和桌面应用无法比拟,但是在UI上却下足了功夫,用户体验可以说无以伦比,比如说小小的菜单, ...
Silverlight 游戏开发小技巧：轨迹跟随效果
Silverlight 游戏开发小技巧:轨迹跟随效果我们通常在游戏中有各种各样的粒子效果,其中有一种就是跟随鼠标发生的轨迹动画,在鼠标经过的地方会产生一些特效,这种方式我们在粒子当中经常使用,本篇使 ...
极客技术专题【009期】：web技术开发小技巧
为什么80%的码农都做不了架构师?>>> 日期:2013-8-26 来源:GBin1.com 技术专题:Seajs介绍 (分享人:choaklin) 专题演讲稿:SeaJS的 ...

js_开发小技巧记录（一）

js_开发小技巧记录（一）相关推荐

最新文章

热门文章