dom例子八（开关灯-文本框-评分控件）

来源：互联网发布：手机称重量软件编辑：程序博客网时间：2024/05/21 11:33

案例二十二：

评分控件V1，用一个单行5列的Table做评分控件，监听td的click事件
点击一个td的时候，将这个td及之前的td背景变为红色
之后的td背景变为白色。鼠标在评分控件上的时候，显示超链接形式的鼠标图标

<html><head><title></title><script type="text/javascript">   function indexOf(arr,element){  for(var i=0;i<arr.length;i++){   if(arr[i]==element){    return i;   }  } }  function initEvent(){  var tableRating=document.getElementById("tableRating");  var tds=tableRating.getElementsByTagName("td");  for(var i=0;i<tds.length;i++){   var td=tds[i];   //td.onclick=tdClick();      //td.onclick=tdClick;   td.onmouseover=tdClick;   td.style.cursor="pointer";  }   } function tdClick(){  var tableRating=document.getElementById("tableRating");  var tds=tableRating.getElementsByTagName("td");  var index=indexOf(tds,this);  for(var i=0;i<=index;i++){     var td=tds[i];     td.style.background="red";  }  for(var i=index+1;i<tds.length;i++){     var td=tds[i];   td.style.background="white";  } }</script></head><body onload="initEvent()"><table id="tableRating"><tr><td>★</td><td>★</td><td>★</td><td>★</td><td>★</td></tr></table></body></html>

案例二十三：

创建三个文本框，当光标离开文本框的时候
如果文本框为空，则将文本框背景色设置为红色
不为空为白色。
焦点进入控件的事件为onfocus，焦点离开控件的事件为onblur
<input type="text" onblur="alert('失去焦点')"/>
<input type="text" onfocus="alert('得到焦点')"/>

<html><head><title></title><script type="text/javascript">   function initEvent(){   var inputs=document.getElementsByTagName("input");   for(var i=0;i<inputs.length;i++){    var input=inputs[i];    input.onblur=inputOnBlur;   }  }  function inputOnBlur(){   if(this.value.length<=0){    this.style.background="red";   }else{    this.style.background="white";   }  }</script></head><body onload="initEvent()"><input type="text"/><input type="text"/><input type="text"/><input type="text"/><input type="text"/><input type="text"/></body></html>

案例二十四：

网页开关灯

<html><head><title></title><style type="text/css"> .day{  background-color:white; } .night{  background-color:Black; }</style><script type="text/javascript">   function switchLight(){  var btnSwitch=document.getElementById("btnSwitch");  if(document.body.className=="day"){   document.body.className="night";   btnSwitch.value="开灯";  }else{   document.body.className="day";   btnSwitch.value="关灯";  }   }</script></head><body class="night"><input type="button" id="btnSwitch" value="开灯" onclick="switchLight()"></body></html>