隔行变色

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>01__表格隔行变色</title>
  6.   <style>
  7.     div, span, p {
  8.       width: 140px;
  9.       height: 140px;
  10.       margin: 5px;
  11.       background: #aaa;
  12.       border: #000 1px solid;
  13.       float: left;
  14.       font-size: 17px;
  15.       font-family: Verdana;
  16.     }
  18.     div.mini {
  19.       width: 55px;
  20.       height: 55px;
  21.       background-color: #aaa;
  22.       font-size: 12px;
  23.     }
  25.     div.hide {
  26.       display: none;
  27.     }
  29.     #data {
  30.       width: 600px;
  31.     }
  33.     #data, td, th {
  34.       border-collapse: collapse;
  35.       border: 1px solid #aaaaaa;
  36.     }
  38.     th, td {
  39.       height: 28px;
  40.     }
  42.     #data thead {
  43.       background-color: #333399;
  44.       color: #ffffff;
  45.     }
  47.     .odd {
  48.       background-color: #ccccff;
  49.     }
  50.   </style>
  51. </head>
  52. <body>
  53. <table id="data">
  54.   <thead>
  55.     <tr>
  56.       <th>姓名</th>
  57.       <th>工资</th>
  58.       <th>入职时间</th>
  59.       <th>操作</th>
  60.     </tr>
  61.   </thead>
  62.   <tbody>
  63.   <tr>
  64.     <td>Tom</td>
  65.     <td>$3500</td>
  66.     <td>2010-10-25</td>
  67.     <td><a href="javascript:void(0)">删除</a></td>
  68.   </tr>
  69.   <tr>
  70.     <td>Mary</td>
  71.     <td>$3400</td>
  72.     <td>2010-12-1</td>
  73.     <td><a href="javascript:void(0)">删除</a></td>
  74.   </tr>
  75.   <tr>
  76.     <td>King</td>
  77.     <td>$5900</td>
  78.     <td>2009-08-17</td>
  79.     <td><a href="javascript:void(0)">删除</a></td>
  80.   </tr>
  81.   <tr>
  82.     <td>Scott</td>
  83.     <td>$3800</td>
  84.     <td>2012-11-17</td>
  85.     <td><a href="javascript:void(0)">删除</a></td>
  86.   </tr>
  87.   <tr>
  88.     <td>Smith</td>
  89.     <td>$3100</td>
  90.     <td>2014-01-27</td>
  91.     <td><a href="javascript:void(0)">删除</a></td>
  92.   </tr>
  93.   <tr>
  94.     <td>Allen</td>
  95.     <td>$3700</td>
  96.     <td>2011-12-05</td>
  97.     <td><a href="javascript:void(0)">删除</a></td>
  98.   </tr>
  99.   </tbody>
  100. </table>
  101.  
  102. <script type="text/javascript" src="jquery-1.10.1.js"></script>
  103. <script type="text/javascript">
  104.   $(\'#data>tbody>tr:odd\').css(\'background\', \'#ccccff\')
  105.   // $(\'#data>tbody>tr:odd\').addClass(\'odd\')
  106.   //$(\'#data>tbody>tr:odd\').attr(\'class\', \'odd\')
  107. </script>
  108. </body>
  109. </html>

 

多Tab点击切换
  1.   1 <!DOCTYPE html>
  2.   2 <html lang="en">
  3.   3 <head>
  4.   4   <meta charset="UTF-8">
  5.   5   <title>02_多Tab点击切换</title>
  6.   6   <style>
  7.   7     * {
  8.   8       margin: 0;
  9.   9       padding: 0;
  10.  10     }
  11.  11 
  12.  12     #tab li {
  13.  13       float: left;
  14.  14       list-style: none;
  15.  15       width: 80px;
  16.  16       height: 40px;
  17.  17       line-height: 40px;
  18.  18       cursor: pointer;
  19.  19       text-align: center;
  20.  20     }
  21.  21 
  22.  22     #container {
  23.  23       position: relative;
  24.  24     }
  25.  25 
  26.  26     #content1, #content2, #content3 {
  27.  27       width: 300px;
  28.  28       height: 100px;
  29.  29       padding: 30px;
  30.  30       position: absolute;
  31.  31       top: 40px;
  32.  32       left: 0;
  33.  33     }
  34.  34 
  35.  35     #tab1, #content1 {
  36.  36       background-color: #ffcc00;
  37.  37     }
  38.  38 
  39.  39     #tab2, #content2 {
  40.  40       background-color: #ff00cc;
  41.  41     }
  42.  42 
  43.  43     #tab3, #content3 {
  44.  44       background-color: #00ccff;
  45.  45     }
  46.  46   </style>
  47.  47 </head>
  48.  48 <body>
  49.  49 <h2>多Tab点击切换</h2>
  50.  50 
  51.  51 <ul id="tab">
  52.  52   <li id="tab1" value="1">10元套餐</li>
  53.  53   <li id="tab2" value="2">30元套餐</li>
  54.  54   <li id="tab3" value="3">50元包月</li>
  55.  55 </ul>
  56.  56 
  57.  57 <div id="container">
  58.  58   <div id="content1">
  59.  59     10元套餐详情：<br/>&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
  60.  60   </div>
  61.  61   <div id="content2" style="display: none">
  62.  62     30元套餐详情：<br/>&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
  63.  63   </div>
  64.  64   <div id="content3" style="display: none">
  65.  65     50元包月详情：<br/>&nbsp;每月无限量随心打
  66.  66   </div>
  67.  67 </div>
  68.  68 
  69.  69 
  70.  70 <script type="text/javascript" src="jquery-1.10.1.js"></script>
  71.  71 <script type="text/javascript">
  72.  72 
  73.  73   var $contents = $(\'#container>div\')  //包装成jQuery对象
  74.  74   // 给3个li加监听
  75.  75   /*$(\'#tab>li\').click(function () { // 隐式遍历,相当于给每个li绑定了点击事件，但是还是个伪数组
  76.  76     //alert(\'----\')
  77.  77     // 隐隐藏所有内容div
  78.  78     $contents.css(\'display\', \'none\')
  79.  79     // 显示对应的内容div
  80.  80     // 得到当前点击的li在兄弟中下标
  81.  81     var index = $(this).index()
  82.  82     // console.log( $(this).index())
  83.  83     // 找到对应的内容div, 并显示
  84.  84     $contents[index].style.display = \'block\'  // 原生获取css样式
  85.  85     // $($contents[index]).css(\'display\', \'block\') //$contents[index]不是js原生对象，需要在外套一个$,变成jQuery对象
  86.  86   })*/
  87.  87 
  88.  88 
  89.  89 // 第二种方法，不需要全部隐藏$contents
  90.  90   var currIndex = 0 //当前显示的内容div的下标
  91.  91   $(\'#tab>li\').click(function () { // 隐式遍历
  92.  92     //alert(\'----\')
  93.  93     // 隐藏当前已经显示的内容div
  94.  94     $contents[currIndex].style.display = \'none\'
  95.  95     // 显示对应的内容div
  96.  96       // 得到当前点击的li在兄弟中下标
  97.  97     var index = $(this).index()
  98.  98       // 找到对应的内容div, 并显示
  99.  99     $contents[index].style.display = \'block\'
  100. 100 
  101. 101     // 更新下标
  102. 102     currIndex = index
  103. 103   })
  104. 104 
  105. 105 
  106. 106 </script>
  107. 107 </body>
  108. 108 </html>

 

回到顶部
  1.  1 <!DOCTYPE html>
  2.  2 <html>
  3.  3 
  4.  4 <head>
  5.  5   <meta charset="UTF-8">
  6.  6   <title>03_回到顶部</title>
  7.  7   <style>
  8.  8     #to_top {
  9.  9       width: 30px;
  10. 10       height: 40px;
  11. 11       font: 14px/20px arial;
  12. 12       text-align: center;
  13. 13       background: #06c;
  14. 14       position: fixed;
  15. 15       cursor: pointer;
  16. 16       color: #fff;
  17. 17       left: 1050px;
  18. 18       top: 500px;
  19. 19     }
  20. 20   </style>
  21. 21 </head>
  22. 22 <body style="height: 2000px;">
  23. 23 
  24. 24 <div id="to_top">返回顶部</div>
  25. 25 
  26. 26 <script type="text/javascript" src="jquery-1.10.1.js"></script>
  27. 27 <script type="text/javascript">
  28. 28   $(\'#to_top\').click(function () {
  29. 29     // 瞬间滚到顶部
  30. 30     //$(\'html,body\').scrollTop(0)
  31. 31 
  32. 32     // 平滑滚到顶部
  33. 33       // 总距离
  34. 34     var $page = $(\'html,body\')
  35. 35     var distance = $(\'html\').scrollTop() + $(\'body\').scrollTop()
  36. 36       // 总时间
  37. 37     var time = 500
  38. 38       // 间隔时间
  39. 39     var intervalTime = 50
  40. 40     //每次滑动的距离
  41. 41     var itemDistance = distance/(time/intervalTime)
  42. 42       // 使用循环定时器不断滚动
  43. 43     var intervalId = setInterval(function () {
  44. 44       //当前top
  45. 45       distance -= itemDistance
  46. 46       // 到达顶部, 停止定时器
  47. 47       if(distance<=0) {
  48. 48         distance = 0 //修正
  49. 49         clearInterval(intervalId)
  50. 50       }
  51. 51       $page.scrollTop(distance)
  52. 52     }, intervalTime)
  53. 53 
  54. 54   })
  55. 55 </script>
  56. 56 </body>
  57. 57 
  58. 58 </html>

 

爱好选择器

  1.   1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2.   2 <html>
  3.   3 <head>
  4.   4   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5.   5   <title>全选练习</title>
  6.   6 </head>
  7.   7 <body>
  8.   8 <form method="post" action="">
  9.   9   你爱好的运动是？<input type="checkbox" id="checkedAllBox"/>全选/全不选
  10.  10   <br/>
  11.  11   <input type="checkbox" name="items" value="足球"/>足球
  12.  12   <input type="checkbox" name="items" value="篮球"/>篮球
  13.  13   <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  14.  14   <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  15.  15   <br/>
  16.  16   <input type="button" id="checkedAllBtn" value="全　选"/>
  17.  17   <input type="button" id="checkedNoBtn" value="全不选"/>
  18.  18   <input type="button" id="checkedRevBtn" value="反　选"/>
  19.  19   <input type="button" id="sendBtn" value="提　交"/>
  20.  20 </form>
  21.  21 <script type="text/javascript">
  22.  22   /*
  23.  23    功能说明:
  24.  24      1. 点击\'全选\': 选中所有爱好
  25.  25      2. 点击\'全不选\': 所有爱好都不勾选
  26.  26      3. 点击\'反选\': 改变所有爱好的勾选状态
  27.  27      4. 点击\'提交\': 提示所有勾选的爱好
  28.  28      5. 点击\'全选/全不选\': 选中所有爱好, 或者全不选中
  29.  29      6. 点击某个爱好时, 必要时更新\'全选/全不选\'的选中状态
  30.  30    技术点：
  31.  31      1.DOM查询
  32.  32      2.事件回调函数绑定
  33.  33      3.checkbox操作
  34.  34      4.事件回调函数中的this
  35.  35      5.逻辑思维能力
  36.  36    */
  37.  37 
  38.  38   window.onload = function () {
  39.  39 
  40.  40     var items = document.getElementsByName("items");
  41.  41 
  42.  42     //1.#checkedAllBtn
  43.  43     var checkedAllBtn = document.getElementById("checkedAllBtn");
  44.  44     checkedAllBtn.onclick = function () {
  45.  45       setItemsChecked(true);
  46.  46       checkedAllBox.checked = true;
  47.  47     };
  48.  48 
  49.  49     //2.#checkedNoBtn
  50.  50     var checkedNoBtn = document.getElementById("checkedNoBtn");
  51.  51     checkedNoBtn.onclick = function () {
  52.  52       setItemsChecked(false);
  53.  53       checkedAllBox.checked = false;
  54.  54     };
  55.  55     //3.#checkedRevBtn
  56.  56     var checkedRevBtn = document.getElementById("checkedRevBtn");
  57.  57     checkedRevBtn.onclick = function () {
  58.  58       setItemsChecked();
  59.  59       //点满时将checkedAllBox.checked设置为true
  60.  60       //统计当前items中被选中的个数
  61.  61       checkedAllBox.checked = isAllChecked();
  62.  62     };
  63.  63 
  64.  64     //4.#checkedAllBox
  65.  65     var checkedAllBox = document.getElementById("checkedAllBox");
  66.  66     checkedAllBox.onclick = function () {
  67.  67       setItemsChecked(this.checked);
  68.  68     };
  69.  69 
  70.  70     //5.#sendBtn
  71.  71     var sendBtn = document.getElementById("sendBtn");
  72.  72     sendBtn.onclick = function () {
  73.  73       for (var i = 0; i < items.length; i++) {
  74.  74         if (items[i].checked) {
  75.  75           alert(items[i].value);
  76.  76         }
  77.  77       }
  78.  78     };
  79.  79     //6.items
  80.  80     for (var i = 0; i < items.length; i++) {
  81.  81       items[i].onclick = function () {
  82.  82         //点满时将checkedAllBox.checked设置为true
  83.  83         //统计当前items中被选中的个数
  84.  84         checkedAllBox.checked = isAllChecked();
  85.  85       }
  86.  86     }
  87.  87 
  88.  88     function isAllChecked() {
  89.  89       for (var j = 0; j < items.length; j++) {
  90.  90         if (!items[j].checked)
  91.  91           return false;
  92.  92       }
  93.  93       return true;
  94.  94     }
  95.  95 
  96.  96     function setItemsChecked(checked) {
  97.  97       for (var i = 0; i < items.length; i++) {
  98.  98         items[i].checked = (checked == undefined) ? (!items[i].checked) : checked;
  99.  99       }
  100. 100     }
  101. 101   }
  102. 102 </script>
  103. 103 </body>
  104. 104 </html>

 

待续。。。

版权声明：本文为fsg6原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/fsg6/p/12927404.html