首页 > 代码库 > HTML常用数据类型以及例题练习
HTML常用数据类型以及例题练习
常用的类型：
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" onm ouseover="doOn(this)" onm ouseout="doOver(this)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="bb" onm ouseover="doOn(this)" onm ouseout="doOver(this)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="aa" onm ouseover="doOn(this)" onm ouseout="doOver(this)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="bb" onm ouseover="doOn(this)" onm ouseout="doOver(this)"> <td> </td> <td> </td> <td> </td> <td> </td> </tr> <tr class="aa" onm ouseover="doOn(this)" onm ouseout="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; width:80px; height:30px; background-color:#CF3; border:2px black solid; text-align:center; line-height:30px; vertical-align:middle; }</style></head><body><span onm ousedown="doDown(this)" onm ouseup="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>
HTML常用数据类型以及例题练习