简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > javascript的应用
Blogger Information
Blog 21
fans 0
comment 0
visits 20134
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
javascript的应用
电动机的博客
Original
748 people have browsed it




// 隔行换色、全选、反选

<!DOCTYPE html>

<html>
<head>
 <title></title>
 <style type="text/css">
  .main{width: 800px;margin: 50px auto;}
  table{
   width: 800px;border: 1px solid #ccc;
   border-collapse: collapse;/*边框折叠*/
  }
  td{border: 1px solid #ccc; text-align: center;}
    th{border: 1px solid #ccc;}
 </style>
</head>
<body>
  <div class="main">
   <p>
    <button onclick="checkAll()">全选</button>
    <button onclick="checkOut()">反选</button>
   </p>
   <table>
    <thead>
     <tr >
      <th colspan="2">标题 </th>
      <th> 状态</th>
     </tr>
    </thead>
    <tbody>
     <tr>
      <td> <input type="checkbox" name="list"></td>
      <td> 我是标题</td>
      <td> 已读</td>
     </tr>
     <tr>
      <td> <input type="checkbox" name="list"></td>
      <td> 我是标题</td>
      <td> 已读</td>
     </tr>
     <tr>
      <td> <input type="checkbox" name="list"></td>
      <td> 我是标题</td>
      <td> 已读</td>
     </tr>
     <tr>
      <td> <input type="checkbox" name="list"></td>
      <td> 我是标题</td>
      <td> 已读</td>
     </tr>
     <tr>
      <td> <input type="checkbox" name="list"></td>
      <td> 我是标题</td>
      <td> 已读</td>
     </tr>
    </tbody>
   </table>
  </div>
  <script type="text/javascript">
     // 隔行换色
     function bgColor(){
      var trlist=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
      for (var i =0;  i <trlist.length; i++) {
       if (i%2) {
        trlist[i].style.background="#d0d8e8";
            }else{
           trlist[i].style.background="#f2f2f2"; 
            }
      }
     }
     bgColor();
  // 全选
     function checkAll(){
      var objlist=document.getElementsByName('list');
      for(var i=0; i<objlist.length;i++){
       objlist[i].checked=true;      }
     }

     // 选反
     function checkOut(){
         var objlist=document.getElementsByTagName('input');
         for(var i=0;i<objlist.length;i++){
             if(objlist[i].checked){
              objlist[i].checked=false;
             }else{
              objlist[i].checked=true;
             }

         }

     }
  </script>
</body>
</html>

//随机换色

<!DOCTYPE html>
<html>
<head>
 <title>math</title>
</head>
<body>
 <button onclick="bg_Color()" > 随机产生背景色</button>
    <script type="text/javascript">
     //执行算术任务
     // round()四舍五入,可以返回一个0·1的随机数
     
     // var a=Math.round(2.6);
     // document.write(a+'<br>');
     // // random可以返回一个0·1的随机数
     // document.write(Math.random())
     // // floor()  返回小于等于x最大整数
     // var b=Math.floor(3.8)
     // document.write(b+'<br>');
     // //取1-10随机数
     // var c=Math.floor((Math.random()*10)+1);
     // document.write(c+'<br>');
     //  //取1-100随机数
     // var d=Math.floor((Math.random()*100)+1);
     // document.write(d+'<br>');
     function bg_Color(){
          var bg="#";//背景色  字符串+数字=字符串
          var r=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
          var g=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
          var b=Math.floor(Math.random()*10).toString()+Math.floor(Math.random()*10);
          bg+=r+g+b;
         document.getElementsByTagName('body')[0].style.background=bg;
     }

    </script>

</body>
</html>

//倒计时

<!DOCTYPE html>
<!-- 知识点:
隔行换色
全选
Math对象(随即色)
日期对象(倒计时) -->
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style type="text/css">
    .main{
      width: 800px;
      margin: 50px auto;
    }
    table{
      width: 800px;
      border: 1px solid #ccc;
      border-collapse: collapse;//边框折叠
    }
    td{
      border: 1px solid #ccc;
      text-align: center;
    }
  </style>
</head>
<body>
  <div>
    <p>
      <button onclick="checkAll()">全选</button>
      <button onclick="checkOut()">反选</button>
    </p>
    <table>
      <!-- 前端布局不要用table 影响优化 -->
      <thead>
        <tr>
          <th colspan="2">标题</th>
          <th>状态</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox"name="list"></td>
          <td>我是标题</td>
          <td>已读</td>
        </tr>
        <tr>
          <td><input type="checkbox"name="list"></td>
          <td>我是标题</td>
          <td>已读</td>
        </tr>
        <tr>
          <td><input type="checkbox"name="list"></td>
          <td>我是标题</td>
          <td>已读</td>
        </tr>
        <tr>
          <td><input type="checkbox"name="list"></td>
          <td>我是标题</td>
          <td>已读</td>
        </tr>
        <tr>
          <td><input type="checkbox"name="list"></td>
          <td>我是标题</td>
          <td>已读</td>
        </tr>
      </tbody>
    </table>
  </div>
  <script type="text/javascript">
    // 隔行换色
    // 原理:将表格中的奇数行和偶数行分别赋予不同的背景色
    function bgColor(){
      var trlist=document.getElementsByTagName('tbody')[0].getElementsByTagName('tr');
      for(var i=0;i<trlist.length;i++){
        if(i%2){
          trlist[i].style.background="#d0d8e8";
        }else{
          trlist[i].style.background="#f2f2f2";
        }
      }
    }
    bgColor();

    // 全选 将页面中的所有多选框[选择状态]全部变成[已选状态]
    function checkAll(){
      //获取多选框集合
      var objList=document.getElementsByName('list');
      for (var i = 0; i < objList.length; i++) {
        objList[i].checked=true;
      }
    }
    // 反选
    function checkOut(){
      //获取多选框集合
      var objList=document.getElementsByTagName('input');
      for (var i = 0; i < objList.length; i++) {
        if(objList[i].checked){
          objList[i].checked=false;
        }else {
          objList[i].checked=true;
        }
      }
    }
  </script>
</body>
</html>

 

Correction status：Uncorrected

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！