javascript 触发HTML元素绑定的函数

2016-06-03 04:10:12 88必发客户端

复制代码 代码如下:if (document.createEvent) { var clickEvent = document.createEvent("MouseEvents"); clickEvent.initEvent("click", false, true); this.fileEl.dom.dispatchEvent(clickEvent);//ff } else if (document.createEventObject) { this.fileEl.dom.fireEvent("onclick",

为了避免变量之间的覆盖与冲突,可以生成命名空间,命名空间是一种特殊的前缀,在js中,通过{ }对象实现。 在不同的匿名函数中,根据功能声明一个不同的命名空间,每个匿名函数中GLOBAL对象的属性都不直接挂在GLOBAL上,而是挂在次匿名函数的命名空间下,如: 复制代码 代码如下: <script type="text/javascript"> var GLOBAL={} </script> <script type="text/javascript"> (function(){ var a=123, a1=256; GLOBAL.A={} GLOBAL.A.str=a; })(); </script> <script type="text/javascript"> (function(){ var b1=123, b2=256; GLOBAL.B={} GLOBAL.B.str=a; })(); </script> 如果同一个匿名函数中的程序非常复杂,变量名很多,命名空间可以进一步扩展,生成二级命名空间: 复制代码 代码如下: <script type="text/javascript"> var GLOBAL={} </script> <script type="text/javascript"> (function(){ var a=123, a1=256; GLOBAL.A={}; GLOBAL.A.CAT={}; GLOBAL.A.DOG={}; GLOBAL.A.CAT.name="mini"; GLOBAL.A.CAT.move=function(){ } GLOBAL.A.DOG.name="mini"; GLOBAL.A.DOG.move=function(){ } })(); </script> 因生成命名空间是非常常用的功能,可以进一步将生成命名空间的功能定义成一个函数,方便调用,如下: 复制代码 代码如下: <script type="text/javascript"> var GLOBAL={} GLOBAL.namespace=function(str){ var arr=str.split("."), o=GLOBAL; for(i=arr[0]=="GLOBAL"?1:0;i<arr.length; i++){ o[arr[i]]=o[arr[i]] || {}; o=o[arr[i]]; } } </script> 调用命名空间具体操作: 复制代码 代码如下: <script type="text/javascript"> //============================================================= // 功能A // 工程师甲 // email:[email protected] msn:[email protected]" // 2012-11-06 //============================================================= (function(){ var a=123, a1="hello world"; GLOBAL.namespace("A.CAT"); GLOBAL.namespace("A.DOG"); GLOBAL.A.CAT.name="mini"; GLOBAL.A.CAT.move=function(){ } GLOBAL.A.DOG.name="mini"; GLOBAL.A.DOG.move=function(){ } GLOBAL.A.str=a; GLOBAL.A.str1=a1; })(); 依次类似,无论多人的直接团队开发,还是个人的间接团队合作,都需要良好的可维护性。 1、添加必要的代码注释 2、让JS不产生冲突,需避免全局变量的泛滥,

星级选择器,提交代码适用于评论等 没有用到js库,就是单独的js代码  复制代码 代码如下: <form action="" method="get"> <div id="star_level" star_width="14"> <p>服务</p> <ul class="star_rating"> <li style="display:none;"> <input type="text" name="serve" value="" /> </li> <li class="current_rating">default level</li> <li><a href="#" title="1 of 5 stars" class="one_star">1</a></li> <li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li> <li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li> <li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li> <li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li> </ul> <p>价格</p> <ul class="star_rating"> <li style="display:none;"> <input type="text" name="price" value="" title="这里设置为2的话,表示默认2颗星亮。" /> </li> <li class="current_rating">default level</li> <li><a href="#" title="1 of 5 stars" class="one_star">1</a></li> <li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li> <li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li> <li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li> <li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li> </ul> <p>质量</p> <ul class="star_rating"> <li style="display:none;"> <input type="text" name="mass" value="" /> </li> <li class="current_rating">default level</li> <li><a href="#" title="1 of 5 stars" class="one_star">1</a></li> <li><a href="#" title="2 of 5 stars" class="two_stars">2</a></li> <li><a href="#" title="3 of 5 stars" class="three_stars">3</a></li> <li><a href="#" title="4 of 5 stars" class="four_stars">4</a></li> <li><a href="#" title="5 of 5 stars" class="five_stars">5</a></li> </ul> </div> <input type="submit" value="提交后请看地址栏的参数" /> </form> 复制代码 代码如下: <script type="text/javascript"> <!-- function __start(){ var initialize_width=0; if(document.getElelmentById){return false}; if(document.getElementsByTagName==null){return false;} var startLevelObj=document.getElementById("star_level") if(startLevelObj==null){return false;} initialize_width=parseInt(startLevelObj.getAttribute("star_width"),10); if(isNaN(initialize_width) || initialize_width==0){return false;} var ul_obj=startLevelObj.getElementsByTagName("ul"); if(ul_obj.length<1){return false;} var length=ul_obj.length; var li_length=0; var a_length=0; var li_obj=null; var a_obj=null; var defaultInputObj=null; var defaultValue=null; for(var i=0;i<length;i++){ li_obj=ul_obj[i].getElementsByTagName("li"); li_length=li_obj.length; if(li_length<0){return false;} //获取默认值 defaultInputObj=li_obj[0].getElementsByTagName("input");if(!defaultInputObj){return false;} defaultValue=parseInt(defaultInputObj[0].value,10); if(!isNaN(defaultValue) && defaultValue!=0){ //alert("有初始值!"); //li_obj[1].style.width=initialize_width*defaultValue+"px"; //defaultValue=0; } for(var j=0;j<li_length;j++){ a_obj=li_obj[j].getElementsByTagName("a"); if(a_obj.length<1){continue;} if(a_obj[0].className.indexOf("star")>0){ a_obj[0].onclick=function(){ return give_value(this); } a_obj[0].onfocus=function(){ this.blur(); } } } } } function give_value(obj){ var status=true; var parent_obj=obj.parentNode; var i=0; while(status){ i++; if(parent_obj.nodeName=="UL"){break;} parent_objparent_obj=parent_obj.parentNode; if(i>1000){break;}//防止找不到ul发生死循环 } var hidden_input=parent_obj.getElementsByTagName("input")[0]; if(hidden_input.length<1){/*alert("sorry?\nprogram error!")*/;} var txt=obj.firstChild.nodeValue;//确保不能存在空格哦,因为这里用的firstChild if(isNaN(parseInt(txt,10))){/*alert('level error!')*/;return false;} hidden_input.setAttribute("value",txt.toString()); //固定选中状态,先找到初始化颜色那个li var current_li=parent_obj.getElementsByTagName("li"); var length=current_li.length; var ok_li_obj=null; for(var i=0;i<length;i++){ if(current_li[i].className.indexOf("current_rating")>=0){ ok_li_obj=current_li[i];break;//找到 } } __current_width=txt*14; ok_li_obj.style.width=__current_width+"px"; return false; } __start(); //--> </script> 复制代码 代码如下: body{font-size:12px;} ul{padding:0;margin:0;} /*star.css*/ .star_rating {list-style:none;margin:-1px 0 0 -1px; padding:0; width:70px; height:12px; position:relative; background:url(rating_stars.gif) 0 0 repeat-x; overflow:hidden;font-size:0;} .star_rating li{padding:0;margin:0;float:left;} .star_rating li a{display:block;width:14px;height:12px;text-decoration:none;text-indent:-9000px;z-index:20;position:absolute;padding:0;margin:0;} .star_rating li a:hover{background:url(rating_stars.gif) 0 12px;z-index:2;left:0;} .star_rating a.one_star{left:0;} .star_rating a.one_star:hover{width:14px;} .star_rating a.two_stars{left:14px;} .star_rating a.two_stars:hover{width:28px;} .star_rating a.three_stars{left:28px;} .star_rating a.three_stars:hover{width:42px;} .star_rating a.four_stars{left:42px;} .star_rating a.four_stars:hover{width:56px;} .star_rating a.five_stars{left:56px;} .star_rating a.five_stars:hover{width:70px;} .star_rating li.current_rating{background:url(rating_stars.gif) 0 24px;position:absolute;height:12px;display:block;text-indent:-9000px;z-index:1;left:0;} /*end star.css*/ #star_level{margin:0 0 20px 20px;} #star_level p{margin:

jquery导航是一个网站必不可少的模块,当一个用户在一个网站上浏览的时候,为了某个目的而查看网站导航栏的时候,突出导航栏的效果是重中之重。因此必须要使用一个效果:jquery遮罩层。利用明暗效果来突出当前用户的操作。复制代码 代码如下:$(function() {var $oe_menu= $('#oe_menu');var $oe_menu_items= $oe_menu.children('li');var $oe_overlay= $('#oe_overlay');                $oe_menu_items.bind('mouseenter',function(){var $this = $(this);$this.addClass('slided selected');$this.children('div').css('z-index','9999').stop(true,true).slideDown(200,function(){$oe_menu_items.not('.slided').children('div').hide();$this.removeClass('slided');});}).bind('mouseleave',function(){var $this = $(this);$this.removeClass('selected').children('div').css('z-index','1');});$oe_menu.bind('mouseenter',function(){var $this = $(this);$oe_overlay.stop(true,true).fadeTo(200, 0.6);$this.addClass('hovered');}).bind('mouseleave',function(){var $this = $(this);$this.removeClass('hovered');$oe_overlay.stop(true,true).fadeTo(200,

1.显示日期代码:Js代码/*获取当前日期*/ function getCurrentDateTime() { var d = new Date(); var year = d.getFullYear(); var month = d.getMonth() + 1; var date = d.getDate(); var week = d.getDay(); /*时分秒*/ /*var hours = d.getHours(); var minutes = d.getMinutes(); var seconds = d.getSeconds(); var ms = d.getMilliseconds();*/ var curDateTime = year; if (month > 9) curDateTime = curDateTime + "年" + month; else curDateTime = curDateTime + "年0" + month; if (date > 9) curDateTime = curDateTime + "月" + date + "日"; else curDateTime = curDateTime + "月0" + date + "日"; /*if (hours > 9) curDateTime = curDateTime + " " + hours; else curDateTime = curDateTime + " 0" + hours; if (minutes > 9) curDateTime = curDateTime + ":" + minutes; else curDateTime = curDateTime + ":0" + minutes; if (seconds > 9) curDateTime = curDateTime + ":" + seconds; else curDateTime = curDateTime + ":0" + seconds;*/ var weekday = ""; if (week == 0) weekday = "星期日"; else if (week == 1) weekday = "星期一"; else if (week == 2) weekday = "星期二"; else if (week == 3) weekday = "星期三"; else if (week == 4) weekday = "星期四"; else if (week == 5) weekday = "星期五"; else if (week == 6) weekday = "星期六"; curDateTime = curDateTime + " " + weekday; return curDateTime; }2.显示农历代码:Js代码/*获取当前农历*/ function showCal(){ var D=new Date(); var yy=D.getFullYear(); var mm=D.getMonth()+1; var dd=D.getDate(); var ww=D.getDay(); var ss=parseInt(D.getTime() / 1000); if (yy<100) yy="19"+yy; return GetLunarDay(yy,mm,dd); } //定义全局变量 var CalendarData=new Array(100); var madd=new Array(12); var tgString="甲乙丙丁戊己庚辛壬癸"; var dzString="子丑寅卯辰巳午未申酉戌亥"; var numString="一二三四五六七八九十"; var monString="正二三四五六七八九十冬腊"; var weekString="日一二三四五六"; var sx="鼠牛虎兔龙蛇马羊猴鸡狗猪"; var cYear,cMonth,cDay,TheDate; CalendarData = new Array(0xA4B,0x5164B,0x6A5,0x6D4,0x415B5,0x2B6,0x957,0x2092F,0x497,0x60C96,0xD4A,0xEA5,0x50DA9,0x5AD,0x2B6,0x3126E, 0x92E,0x7192D,0xC95,0xD4A,0x61B4A,0xB55,0x56A,0x4155B, 0x25D,0x92D,0x2192B,0xA95,0x71695,0x6CA,0xB55,0x50AB5,0x4DA,0xA5B,0x30A57,0x52B,0x8152A,0xE95,0x6AA,0x615AA,0xAB5,0x4B6,0x414AE,0xA57,0x526,0x31D26,0xD95,0x70B55,0x56A,0x96D,0x5095D,0x4AD,0xA4D,0x41A4D,0xD25,0x81AA5,0xB54,0xB6A,0x612DA,0x95B,0x49B,0x41497,0xA4B,0xA164B, 0x6A5,0x6D4,0x615B4,0xAB6,0x957,0x5092F,0x497,0x64B, 0x30D4A,0xEA5,0x80D65,0x5AC,0xAB6,0x5126D,0x92E,0xC96,0x41A95,0xD4A,0xDA5,0x20B55,0x56A,0x7155B,0x25D,0x92D,0x5192B,0xA95,0xB4A,0x416AA,0xAD5,0x90AB5,0x4BA,0xA5B, 0x60A57,0x52B,0xA93,0x40E95); madd[0]=0; madd[1]=31; madd[2]=59; madd[3]=90; madd[4]=120; madd[5]=151; madd[6]=181; madd[7]=212; madd[8]=243; madd[9]=273; madd[10]=304; madd[11]=334; function GetBit(m,n){ return (m>>n)&1; } //农历转换 function e2c(){ TheDate= (arguments.length!=3) ? new Date() : new Date(arguments[0],arguments[1],arguments[2]); var total,m,n,k; var isEnd=false; var tmp=TheDate.getYear(); if(tmp<1900){ tmp+=1900; } total=(tmp-1921)*365+Math.floor((tmp-1921)/4)+madd[TheDate.getMonth()]+TheDate.getDate()-38; if(TheDate.getYear()%4==0&&TheDate.getMonth()>1) { total++; } for(m=0;;m++){ k=(CalendarData[m]<0xfff)?11:12; for(n=k;n>=0;n--){ if(total<=29+GetBit(CalendarData[m],n)){ isEnd=true; break; } total=total-29-GetBit(CalendarData[m],n); } if(isEnd) break; } cYear=1921 + m; cMonth=k-n+1; cDay=total; if(k==12){ if(cMonth==Math.floor(CalendarData[m]/0x10000)+1){ cMonth=1-cMonth; } if(cMonth>Math.floor(CalendarData[m]/0x10000)+1){ cMonth--; } } } function GetcDateString(){ var tmp=""; /*显示农历年:( 如:甲午(马)年 )*/ /*tmp+=tgString.charAt((cYear-4)%10); tmp+=dzString.charAt((cYear-4)%12); tmp+="("; tmp+=sx.charAt((cYear-4)%12); tmp+=")年 ";*/ if(cMonth<1){ tmp+="(闰)"; tmp+=monString.charAt(-cMonth-1); }else{ tmp+=monString.charAt(cMonth-1); } tmp+="月"; tmp+=(cDay<11)?"初":((cDay<20)?"十":((cDay<30)?"廿":"三十")); if (cDay%10!=0||cDay==10){ tmp+=numString.charAt((cDay-1)%10); } return tmp; } function GetLunarDay(solarYear,solarMonth,solarDay){ //solarYear = solarYear<1900?(1900+solarYear):solarYear; if(solarYear<1921 || solarYear>2020){ return ""; }else{ solarMonth = (parseInt(solarMonth)>0) ? (solarMonth-1) : 11; e2c(solarYear,solarMonth,solarDay); return GetcDateString(); } }3.显示:Js代码$(function(){ var date = getCurrentDateTime(); var calendar = showCal(); $("#currentDate").text("今天是: " + date + "农历: