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

最新推荐文章于 2022-02-14 17:30:37 发布

叶子的翅膀

最新推荐文章于 2022-02-14 17:30:37 发布

阅读量171

点赞数

文章标签： javascript ViewUI

案例二十二：

评分控件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.οnclick=tdClick();
   
   //td.οnclick=tdClick;
   td.οnmοuseοver=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 οnlοad="initEvent()">
<table id="tableRating">
<tr><td>★</td><td>★</td><td>★</td><td>★</td><td>★</td></tr>
</table>
</body>
</html>

案例二十三：

创建三个文本框，当光标离开文本框的时候
如果文本框为空，则将文本框背景色设置为红色
不为空为白色。
焦点进入控件的事件为onfocus，焦点离开控件的事件为onblur
<input type="text" οnblur="alert('失去焦点')"/>
<input type="text" οnfοcus="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.οnblur=inputOnBlur;
   }
  }
  function inputOnBlur(){
   if(this.value.length<=0){
    this.style.background="red";
   }else{
    this.style.background="white";
   }
  }
</script>
</head>
<body οnlοad="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="开灯" οnclick="switchLight()">
</body>
</html>

叶子的翅膀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
dom例子八（开关灯-文本框-评分控件）

案例二十二：评分控件V1，用一个单行5列的Table做评分控件，监听td的click事件点击一个td的时候，将这个td及之前的td背景变为红色之后的td背景变为白色。鼠标在评分控件上的时候，显示超链接形式的鼠标图标&lt;html&gt;&lt;head&gt;&lt;title&gt;&lt;/title&gt;&lt;script type="text/javasc...
复制链接

扫一扫