常用的类型：
1.数学：
Math.ceil()：天花板数
Math.floor()：地板数
Math.round()：四舍五入取整数
Math.random()：生成0-1之间的随机数
2.日期时间：
var s = new Date();
var s = new Date(1999,7,23);
函数：
getFullYear():
getMonth()：
getDate()：获取日
getHours()
getMinutes()
getSeconds()
getDay()：获取星期
setFullYear(year,month,day)
setHours(hour,minute,second,ms)
toLocaleDateString()：转化为本地的日期时间格式字符串
3.字符串
length：字符串的长度
toLowerCase()
toUpperCase()
//压缩字符串中的两端空格。
function Trim(m){
while((m.length>0)&&(m.charAt(0)==' '))
m = m.substring(1, m.length);
while((m.length>0)&&(m.charAt(m.length-1)==' '))
m = m.substring(0, m.length-1);
return m;
}
indexOf("子串")：第一次出现的位置
lastIndexOf("子串")：最后一次出现的位置
以上两个方法，如果父串中不包含子串，则返回-1
substr("起始位置","截取长度")
substring("起始位置","结束位置")
事件：（事件源，事件数据，事件处理程序）
一、最常用的鼠标事件
onclick：当鼠标单击的时候，要执行的代码。
ondblclick：当鼠标双击的时候，要执行的代码。
onmouseover:当鼠标移动到元素上时，要执行的代码。
onmouseout:当鼠标从元素上离开时，要执行的代码。
<示例>光棒效果。
onmousedown:
onmouseup:
<示例>使用这两个事件，用span做出一个模拟的按钮。
案例：刮刮乐
二、键盘：
三、焦点：
例题：表格随鼠标移动改变颜色
<style type="text/css"> .aa{ background-color:#0F3; } .bb{ background-color:#990;} </style> </head> <body> <table style="500px;height:100px;"> <tr class="aa" onmouseover="doOn(this)" onmouseout="doOver(this)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="bb" onmouseover="doOn(this)" onmouseout="doOver(this)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="aa" onmouseover="doOn(this)" onmouseout="doOver(this)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="bb" onmouseover="doOn(this)" onmouseout="doOver(this)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="aa" onmouseover="doOn(this)" onmouseout="doOver(this)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> </table> </body> </html> <script language="javascript"> function doOn(dd) { //bg不能加var bg=dd.style.backgroundColor; dd.style.backgroundColor="yellow"; } function doOver(dd) { dd.style.backgroundColor=bg; } </script>
例题：按钮的颜色、样式改变
<!--当按下按钮，按钮颜色改变，位置偏移，抬起时，按钮恢复原样--> <style type="text/css"> span{ /*要想span元素显示宽度，必须设置display：inline-block*/ display:inline-block; 80px; height:30px; background-color:#CF3; border:2px black solid; text-align:center; line-height:30px; vertical-align:middle; } </style> </head> <body> <span onmousedown="doDown(this)" onmouseup="doUp(this)">按钮</span> </body> </html> <script language="javascript"> function doDown(dd) { dd.style.backgroundColor="blue"; dd.style.border="3px gray solid" dd.style.margin="3px 0px 0px 3px"; } function doUp(aa) { aa.style.backgroundColor="#CF3"; aa.style.border="3px black solid"; aa.style.margin="0px 0px 0px 0px"; } </script>
例题：刮刮乐
<style type="text/css"> .pic{ 128px; height:128px; border:3px solid blue; float:left; margin:5px 5px; position:relative; left:300px;} /*遮挡图片*/ .she{ 128px; height:128px; background-color:#FF9; } </style> <script language="javascript"> function doOpen(dd) { dd.style.display="none"; var s=dd.parentNode.getAttribute("haha"); if (s=="1") { alert("恭喜中大奖"); window.location.reload(); } //图片翻完，自动刷新 num+=1; if(num==10) {alert("欢迎再次光临"); window.location.reload(); } } </script> </head> <body style="750px;"> <div class="pic"><div class="she" onclick="doOpen(this)"></div></div> <div class="pic"><div class="she" onclick="doOpen(this)"></div></div> <div class="pic"><div class="she" onclick="doOpen(this)"></div></div> <div class="pic"><div class="she" onclick="doOpen(this)"></div></div> <div class="pic"><div class="she" onclick="doOpen(this)"></div></div> <div class="pic"><div class="she" onclick="doOpen(this)"></div></div> <div class="pic"><div class="she" onclick="doOpen(this)"></div></div> <div class="pic"><div class="she" onclick="doOpen(this)"></div></div> <div class="pic"><div class="she" onclick="doOpen(this)"></div></div> <div class="pic"><div class="she" onclick="doOpen(this)"></div></div> </body> </html> <script language="javascript"> var num=0; //对元素随机加载图片 var a=document.getElementsByTagName("div"); for(var i=0;i<a.length;i++) { if(a[i].className=="pic") { var n=(Math.round(Math.random()*1000000))%10+1;//注意先取整数，再取余； var path="images/"+n+".png"; a[i].style.backgroundImage="url("+path+")"; //设置大奖 if(n == 1) { //设置一个属性，标记该元素 a[i].setAttribute("haha","1"); } } } </script>
例题：手机号抽奖
<style type="text/css"> #phone{ 200px; height:30px; font-size:24px;} </style> </head> <body> <span id="phone">130000000000</span> <div id="btn" onclick="doDis()">开始</div> </body> </html> <script language="javascript"> var a=new Array(); a[0]="13512353421"; a[1]="13532157534"; a[2]="15932547667"; a[3]="15834223332"; a[4]="15467954466"; a[5]="15454234567"; a[6]="18345678877"; a[7]="18344332165"; a[8]="18732573457"; a[9]="18346575243"; var pho=document.getElementById("phone"); var btn=document.getElementById("btn"); function doRec() { var n=Math.round(Math.random()*100000)%10; pho.innerHTML=a[n]; aaa=window.setTimeout("doRec()",50); } function doDis() { if(btn.innerHTML=="开始") { btn.innerHTML="停止"; doRec(); } else { btn.innerHTML="开始"; window.clearTimeout(aaa);} } </script>
