博客列表 >javascript的应用

javascript的应用

电动机的博客
电动机的博客原创
2019年03月29日 12:56:27747浏览




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

<!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>

 

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议