HTML常用数据类型以及例题练习

浏览数：41 / 时间：2015年06月09日

常用的类型：
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="width:500px;height:100px;">
  <tr class="aa" onmouseover="doOn(this)" onmouseout="doOver(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="bb" onmouseover="doOn(this)" onmouseout="doOver(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="aa" onmouseover="doOn(this)" onmouseout="doOver(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="bb" onmouseover="doOn(this)" onmouseout="doOver(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr class="aa" onmouseover="doOn(this)" onmouseout="doOver(this)">
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</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;
    width: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{
    width:128px;
    height:128px;
    border:3px solid blue;
    float:left;
    margin:5px 5px;
    position:relative;
    left:300px;}
    
/*遮挡图片*/
.she{
    width: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="width: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{
    width: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>