首页 > 代码库 > script常用类型和事件

script常用类型和事件

常用的类型:
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做出一个模拟的按钮。

<script>function  dodown(dd){    dd.style.borderColor="black";    dd.style.backgroundColor="green";    dd.style.margin="10px 0px 0px 10px"    }    function  doup(dd){    dd.style.borderColor="red";    dd.style.backgroundColor="#9c9";    dd.style.margin="0px 0px 0px 0px"    }</script></head><body><span style="display:inline-block;padding:5px;background:#9C9;border:3px solid red" onm ousedown="dodown(this)" onm ouseup="doup(this)"> click me</span></body>

技术分享 点击后的效果:技术分享

 

案例 光棒效果

<body><table width="300" border="1">  <tr style="background-color:#F00" onm ouseover="show(this)" onm ouseout="done(this)">    <td >&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr  onmouseover="show(this)" onm ouseout="done(this)">    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr style="background-color:#F00"  onm ouseover="show(this)" onm ouseout="done(this)">    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr  onmouseover="show(this)" onm ouseout="done(this)">    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr>  <tr style="background-color:#F00"  onm ouseover="show(this)" onm ouseout="done(this)">    <td>&nbsp;</td>    <td>&nbsp;</td>    <td>&nbsp;</td>  </tr></table></body></html><script language="javascript">var s="white"function show(dd){    s=dd.style.backgroundColor;    dd.style.backgroundColor="blue"    }    function done(dd){    dd.style.backgroundColor=s    }</script>

技术分享

案例:刮刮乐

<style type="text/css">.wai{    border:2px ridge #F00;    width:128px;height:128px;margin:10px;    float:left;    position:relative;    left:70px        }    .nei    {        background-color:#F00;        width:128px;height:128px}        #btn        {float:left;        width:100%;        text-align:center;        }        #main        {               width:900px;            margin:auto;            }                </style><script language="javascript">var num=0;function show(dd){    dd.style.display="none";        var s=dd.parentNode.getAttribute("haha");/******上一层的查询*****/    if(s=="1")    {alert("恭喜中奖");    window.location.reload();/*******中奖自动重置******/    }num+=1;/** 10次都没有自动重置***/if(num==10&&s!=1){alert("再来10块钱!");    window.location.reload();}}    </script></head><body><div id="main"><div class="wai" ><div class="nei" onclick="show(this)"></div></div><div class="wai"><div class="nei" onclick="show(this)"></div></div><div class="wai"><div class="nei" onclick="show(this)"></div></div><div class="wai"><div class="nei" onclick="show(this)"></div></div><div class="wai"><div class="nei" onclick="show(this)"></div></div><div class="wai"><div class="nei" onclick="show(this)"></div></div><div class="wai"><div class="nei" onclick="show(this)"></div></div><div class="wai"><div class="nei" onclick="show(this)"></div></div><div class="wai"><div class="nei" onclick="show(this)"></div></div><div class="wai"><div class="nei" onclick="show(this)"></div></div><div id="btn" align="center"><input id="hh"  type="button" onclick="huanyuan()"value="重置"></div></div></body></html><script>var divs=document.getElementsByTagName("div");for(var i=0;i<divs.length;i++){     if(divs[i].className=="wai")    {                     var n=(Math.round(Math.random()*100000000)%10)+1;         var path="images/"+n+".png";     divs[i].style.backgroundImage="url("+path+")"/****随机图片的加载方法*****/     if(n==1)     {         divs[i].setAttribute("haha","1");         }            }    }        function huanyuan()    {window.location.reload()}                    </script>

技术分享技术分享

手机抽奖

<style>.no1{    margin:20px;        border:5px dashed #FF0000;    width:100%        }    #main    {width:400px;        margin:auto;        text-align:center;        font-family:华文行楷;        font-size:50px        }    #begin    {margin:20px;        background:#03F;        border:2px solid red;        padding:5px        }        </style></head><body><div id="main"><div id="show" class="no1">XXXXXXXXXXX</div><span id="begin" onclick="dobegin()">开始</span></div></body></html><script>var a=new Array();a[0]=17685602035;a[1]=13853350543;a[2]=15344564298;a[3]=18344564676;a[4]=13344564043;a[5]=15644564545;a[6]=15534456440;a[7]=15734452222;a[8]=12344564111;a[9]=12344564333;var timeid;function doshow(){var n=Math.round (Math.random()*10000000)%10;var s=a[n];var dd=document.getElementById("show");dd.innerHTML = s;timeid=window.setTimeout("doshow()","50");/*延时**/}function dobegin(){  var gg=document.getElementById("begin")if(gg.innerHTML=="开始"){    doshow();    gg.innerHTML="停止";    }    else    {gg.innerHTML="开始";    window.clearTimeout(timeid)/**定义的变量来代替doshow()**/    document.getElementById("show").innerHTML="17685602035"/*作弊*/        }}</script>

技术分享技术分享

script常用类型和事件