最近写了一个红包雨的小功能,但感觉自己的js还有很多地方可以提高,望大神们可以帮忙指点一二

js部分

 1 ‘use strict‘;
 2 function RedEnvelope(options){
 3     if(this === window){
 4         return new RedEnvelope(options);
 5     }
 6     var defaults = {
 7         imgWidth:60,//红包的宽度
 8         position:‘absolute‘,
 9         imgEnvSrc:‘../images/game/redEnv/redEnv.png‘,
10         containerClass:‘.redEnv-contain‘
11     };
12     if(!options){
13         options = defaults;
14     }else{
15         for (var option in defaults) {
16             if (typeof options[option] === undefined) {
17                 options[option] = defaults[option];
18             }
19         }
20     }
21     this.options = options;
22     this.createEnv();
23 }
24 RedEnvelope.prototype.createEnv = function(){
25     var imgEnv = document.createElement(‘img‘);
26     imgEnv.src = this.options.imgEnvSrc;
27     imgEnv.style.width = this.options.imgWidth+‘px‘;
28     this.evnPosition(imgEnv);
29 }
30 RedEnvelope.prototype.evnPosition = function(img){
31     var containerWidth = $(this.options.containerClass).width();
32     var containerHeight = window.screen.height;
33     $(this.options.containerClass).prepend(img);
34     //红包初始的位置
35     img.style.position = this.options.position;
36     var startTop = parseInt(Math.random()*10+(-10))
37     var startLeft = parseInt(Math.random()*containerWidth);
38     //移动的位置
39     var moveLeft = parseInt(Math.random()*containerWidth+(-30));
40     var t=parseInt(Math.random() * 1000+1200);
41     this.evnAnimation({‘startLeft‘:startLeft, ‘startTop‘:startTop, ‘moveLeft‘:moveLeft,‘moveTop‘:containerHeight},t);
42 }
43 /*添加元素到主内容上*/
44 RedEnvelope.prototype.evnAnimation =  function (posObject,time){
45     $(this.options.containerClass).children(‘img:first‘).css({‘left‘:posObject.startLeft,‘top‘:posObject.startTop});
46     $(this.options.containerClass).children(‘img:first‘).animate(
47         {
48             ‘left‘:posObject.startLeft-posObject.moveLeft,
49             ‘top‘:posObject.moveTop
50         },
51         time,
52         ‘linear‘,
53         function(){
54             $(this).remove();
55         }
56     );
57     

html部分

<div class="redEnv-contain">
</div>

<script>
	setInterval(RedEnvelope,500);
</script>
时间: 2024-08-29 17:35:16

最近写了一个红包雨的小功能,但感觉自己的js还有很多地方可以提高,望大神们可以帮忙指点一二的相关文章

【原创】最近写的一个比较hack的小爬虫

目标:爬取爱漫画上面自己喜欢的一个漫画 分析阶段: 0.打开爱漫画主页,迎面就是一坨js代码..直接晕了 1.经过抓包和对html源码的分析,可以发现爱漫画通过另外一个域名发送图片,而当前域名中通过js动态生成图片的文件名.问题就在这里了,首先,图片的文件命名模式比较多,没办法通过js源码直接爬:其次,有两种不同的图片文件名表现形式,一种是字典,一种是通过运算后返回的字典字符串.所谓字典字符串,就是[a:b]变成"[a:b]". version 1: var cInfo={"

javascript实现的一个信息提示的小功能/

//什么状况.CSDN的排版怎么这么多状况,还是本人太次?调整几次都没弄好.最后一遍了-- 最近由于公司业务问题.须要做一些面向公众的平台,于是对UI要求会高一点, 对于传统的alert的这样的方式来提示用户操作错误显然会非常影响客户体验.于是做了一个小功能,来替代原本的alert.话不啰嗦,先上效果图. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDU3MTkxMw==/font/5a6L5L2T/fontsize/400/fill/I0

聊聊程序员如何学习英语单词:写了一个记单词的小程序

背景: 关于英文对程序员的重要性,就不多说了! 英语的学习,有很多,今天也不聊多,只聊英语单词! 关于单词的记忆,找过很多方法,下载过很多软件. 如图(其它不好用的都卸载了): 上图算是我以前用过软件,注意,是以前哦~~~ 意思就是没有坚持下来~~~~ 随时间的推移,最后它们还是被我遗忘了~~~ 为什么???不能:坚持!坚持!坚持! 学习思考: 一直在找方法: 1:下载过联想记忆法.背文章记单词,词根,各种视频~~~ 2:连单词的数据库都网上下载了一份了,期望从数据库的直接记忆单词快些~~~ 通

iOS:自己写的一个星级评价的小Demo

重新整理了下自己星级评价的Demo,可以展示星级评价,可以动态修改星级. github的地址:https://github.com/hunterCold/HYBStarEvaluationView a simple tool of star evaluation 一个简单的星级评价的工具 欢迎各位提出批评意见,也同时欢迎各位提供更多想法

用Go写了一个类似Proxy的小程序,可以用来访问goolge个人使用还是可以的.

package main import ( "fmt" "io" "net/http" ) func main() { http.HandleFunc("/", route) e := http.ListenAndServe(":80", nil) if e != nil { fmt.Println(e) } } func route(w http.ResponseWriter, r *http.Reque

coffeescript写的一个无限下拉小程序

locate=$(document).height()-$(window).height() times=0 scroller = (cb)-> if locate<=$(document).height()-$(window).height() times=0 locate+=100 scroll(0,locate) clearTimeout(timer) timer=setTimeout("scroller()",54) timer else await sleep 3

最近写了一个史上最简单的最实用的zepto.js实现tab切换

老规矩,先贴代码 <script> $(function(){ window.onload = function() { var $li = $('.taocan-title li'); var $ul = $('.taocan-content .con110'); $li.mouseover(function(){ var $this = $(this); var $t = $this.index(); $li.removeClass(); $this.addClass('active');

陈烨大神在群里发言,忠实记录并写下自己的一些感悟

下面是陈烨讲的一些,非测试的网友可以右上角叉叉,这些话里的错别字都是陈烨本人所写 目前移动无线的测试分这样几类 UI-->native接口-->app到server端测试-->server端接口测试-- >底层测试-->单元测试-->app性能-->安全测试-->持续集成. 但是这其中不是所有的都是自动化,更多的只是工具,作为测试的辅助 然后先说UI,UI的东西目前大家也都知道,迭代很快.UI本身实现的ROI酒很 低.然后appium,robotium,Ac

现学现卖的一个“快递查询“的小程序开发

最近微信小程序是炒的如火如荼,各种热门, 正好赶上这个热潮,这几天先把小程序技术文档看了个遍,结合教程手写了一个案例.今天写了一个快递查询的小demo,大致分为三步 产品需求,准备api,代码编写. 第一步:产品需求,我们需要实现如下图的一个功能,在文本框输入快递单号,点击查询,下面出来我们需要的快递信息 第二步:准备 我们先找一个快递的api接口,通过http://apistore.baidu.com/我们可以看到很多的api,我们找一个快递查询的 我们可以看到有接口地址,和一些参数.做好这个