1. 新浪tab栏

  1. <style>
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. }
  6. li {
  7. list-style-type: none;
  8. }
  9. .tab {
  10. width: 978px;
  11. margin: 100px auto;
  12. }
  13. .tab_list {
  14. height: 39px;
  15. border: 1px solid #ccc;
  16. background-color: #f1f1f1;
  17. border-bottom: 3px solid #c81623;
  18. vertical-align: bottom;
  19. }
  20. .tab_list li {
  21. float: left;
  22. height: 39px;
  23. line-height: 39px;
  24. padding: 0 20px;
  25. text-align: center;
  26. cursor: pointer;
  27. }
  28. .tab_list .current {
  29. background-color: #c81623;
  30. color: #fff;
  31. }
  32. .item_info {
  33. padding: 20px 0 0 20px;
  34. }
  35. .item {
  36. display: none;
  37. }
  38. </style>
  39. </head>
  40. <body>
  41. <div class="tab">
  42. <div class="tab_list">
  43. <ul>
  44. <li class="current">商品介绍</li>
  45. <li>规格与包装</li>
  46. <li>售后保障</li>
  47. <li>商品评价(50000)</li>
  48. <li>手机社区</li>
  49. </ul>
  50. </div>
  51. <div class="tab_con">
  52. <div class="item" style="display: block;">
  53. 商品介绍模块内容
  54. </div>
  55. <div class="item">
  56. 规格与包装模块内容
  57. </div>
  58. <div class="item">
  59. 售后保障模块内容
  60. </div>
  61. <div class="item">
  62. 商品评价(50000)模块内容
  63. </div>
  64. <div class="item">
  65. 手机社区模块内容
  66. </div>
  67. </div>
  68. </div>
  69. <script>
  70. //获取元素
  71. var lis = document.querySelector('.tab_list').querySelectorAll('li')
  72. var items = document.getElementsByClassName('item');
  73. console.log(lis,items);
  74. //给每个li添加新属性和事件
  75. for (let i = 0; i < lis.length; i++) {
  76. lis[i].index=i; //这个用来给添加的新属性赋值
  77. lis[i].onclick=function(){
  78. //循环清空所有标签样式
  79. for (let i = 0; i < lis.length; i++) {
  80. lis[i].className='';
  81. // 所有div盒子隐藏
  82. items[i].style.display='none'
  83. }
  84. //设置点击时的标签样式
  85. lis[i].className='current'
  86. //将对应的div标签显示出来
  87. var index=this.index;
  88. items[index].style.display='block'
  89. }
  90. }
  91. // // 获取元素
  92. // var tab_list = document.querySelector('.tab_list');
  93. // var lis = tab_list.querySelectorAll('li');
  94. // var items = document.querySelectorAll('.item');
  95. // // for循环绑定点击事件
  96. // for (var i = 0; i < lis.length; i++) {
  97. // // 开始给5个小li 设置索引号
  98. // lis[i].setAttribute('index', i);
  99. // lis[i].onclick = function() {
  100. // // 1. 上的模块选项卡,点击某一个,当前这一个底色会是红色,其余不变(排他思想) 修改类名的方式
  101. // // 干掉所有人 其余的li清除 class 这个类
  102. // for (var i = 0; i < lis.length; i++) {
  103. // lis[i].className = '';
  104. // }
  105. // // 留下我自己
  106. // this.className = 'current';
  107. // // 2. 下面的显示内容模块
  108. // var index = this.getAttribute('index');
  109. // console.log(index);
  110. // // 干掉所有人 让其余的item 这些div 隐藏
  111. // for (var i = 0; i < items.length; i++) {
  112. // items[i].style.display = 'none';
  113. // }
  114. // // 留下我自己 让对应的item 显示出来
  115. // items[index].style.display = 'block';
  116. // }
  117. // }
  118. </script>

2. 表格隔行变色

  1. <style>
  2. table {
  3. width: 800px;
  4. margin: 100px auto;
  5. text-align: center;
  6. border-collapse: collapse;
  7. font-size: 14px;
  8. }
  9. thead tr {
  10. height: 30px;
  11. background-color: skyblue;
  12. }
  13. tbody tr {
  14. height: 30px;
  15. }
  16. tbody td {
  17. border-bottom: 1px solid #d7d7d7;
  18. font-size: 12px;
  19. color: blue;
  20. }
  21. .bg {
  22. background-color: rgb(78, 227, 247);
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <table>
  28. <thead>
  29. <tr>
  30. <th>代码</th>
  31. <th>名称</th>
  32. <th>最新公布净值</th>
  33. <th>累计净值</th>
  34. <th>前单位净值</th>
  35. <th>净值增长率</th>
  36. </tr>
  37. </thead>
  38. <tbody>
  39. <tr>
  40. <td>003526</td>
  41. <td>农银金穗3个月定期开放债券</td>
  42. <td>1.075</td>
  43. <td>1.079</td>
  44. <td>1.074</td>
  45. <td>+0.047%</td>
  46. </tr>
  47. <tr>
  48. <td>003526</td>
  49. <td>农银金穗3个月定期开放债券</td>
  50. <td>1.075</td>
  51. <td>1.079</td>
  52. <td>1.074</td>
  53. <td>+0.047%</td>
  54. </tr>
  55. <tr>
  56. <td>003526</td>
  57. <td>农银金穗3个月定期开放债券</td>
  58. <td>1.075</td>
  59. <td>1.079</td>
  60. <td>1.074</td>
  61. <td>+0.047%</td>
  62. </tr>
  63. <tr>
  64. <td>003526</td>
  65. <td>农银金穗3个月定期开放债券</td>
  66. <td>1.075</td>
  67. <td>1.079</td>
  68. <td>1.074</td>
  69. <td>+0.047%</td>
  70. </tr>
  71. <tr>
  72. <td>003526</td>
  73. <td>农银金穗3个月定期开放债券</td>
  74. <td>1.075</td>
  75. <td>1.079</td>
  76. <td>1.074</td>
  77. <td>+0.047%</td>
  78. </tr>
  79. <tr>
  80. <td>003526</td>
  81. <td>农银金穗3个月定期开放债券</td>
  82. <td>1.075</td>
  83. <td>1.079</td>
  84. <td>1.074</td>
  85. <td>+0.047%</td>
  86. </tr>
  87. </tbody>
  88. </table>
  89. <script>
  90. let trs = document.querySelector('tbody').querySelectorAll('tr')
  91. for (let i = 0; i < trs.length; i++) {
  92. trs[i].onmouseover = function(){
  93. for (let i = 0; i < trs.length; i++) {
  94. trs[i].className=""
  95. }
  96. trs[i].className = 'bg'
  97. }
  98. trs[i].onmouseout = function(){
  99. trs[i].className=''
  100. }
  101. }
  102. </script>

3. 多选框全选

  1. <style>
  2. table{
  3. position: absolute;
  4. right: 0;
  5. left: 0;
  6. top: 0;
  7. bottom: 0;
  8. width: 300px;
  9. height: 100px;
  10. margin: auto;
  11. text-align: center;
  12. line-height: 25px;
  13. border: 1px solid #ccc;
  14. border-collapse:collapse
  15. }
  16. tr{
  17. background-color: #ebdddd;
  18. }
  19. td{
  20. font-family: 幼圆;
  21. }
  22. tr th{
  23. background-color: rgb(228, 129, 122);
  24. color: #fff;
  25. font-weight: normal;
  26. }
  27. input{
  28. background-color: transparent;
  29. }
  30. .color{
  31. background-color: rgb(206, 168, 173);
  32. }
  33. </style>
  34. </head>
  35. <body>
  36. <div class="warp">
  37. <table border="1px" cellspacing=0>
  38. <thead>
  39. <tr>
  40. <th><input type="checkbox" id="all-In"></th>
  41. <th>全部目标</th>
  42. <th>悬赏</th>
  43. </tr>
  44. </thead>
  45. <tbody id="JPSS">
  46. <tr>
  47. <td><input type="checkbox"></td>
  48. <td>熊本君</td>
  49. <td>5000$</td>
  50. </tr>
  51. <tr>
  52. <td><input type="checkbox"></td>
  53. <td>巴桑</td>
  54. <td>3000¥</td>
  55. </tr>
  56. <tr>
  57. <td><input type="checkbox"></td>
  58. <td>kevin桑</td>
  59. <td>300$</td>
  60. </tr>
  61. <tr>
  62. <td><input type="checkbox"></td>
  63. <td>江本一郎</td>
  64. <td>600¥</td>
  65. </tr>
  66. </tbody>
  67. </table>
  68. </div>
  69. <script>
  70. var all = document.querySelector('#all-In');
  71. var jPs = document.getElementById('JPSS').getElementsByTagName('input');
  72. var trs = document.querySelector('tbody').querySelectorAll('tr')
  73. console.log(jPs,all);
  74. //设置全选按钮的事件
  75. all.onclick = function(){
  76. for( let i = 0;i < jPs.length; i++){
  77. jPs[i].checked = this.checked; //将全选的状态给每一个子选项
  78. }
  79. }
  80. for(let i = 0 ; i < jPs.length;i++){
  81. jPs[i].onclick = function(){
  82. // var sure=0
  83. for(let i=0;i<jPs.length;i++){
  84. if(!jPs[i].checked){ //当有一个没有选中时
  85. // sure =1
  86. all.checked=false; // 全选不会选中
  87. break;
  88. } all.checked=true
  89. }
  90. // if(sure==0){
  91. // all.checked=true
  92. // }else{
  93. // all.checked=false;
  94. // }
  95. }
  96. }
  97. //隔行变色
  98. for (let i = 0; i < trs.length; i++) {
  99. trs[i].onmouseover = function(){
  100. for (let i = 0; i < trs.length; i++) {
  101. trs[i].className=""
  102. }
  103. trs[i].className = 'color'
  104. }
  105. trs[i].onmouseout = function(){
  106. trs[i].className=''
  107. }
  108. }
  109. </script>

4. 简单计算器

  1. <body>
  2. <input type="text" id="num1" placeholder="请输入第一个数" />
  3. <input type="text" id="num2" placeholder="请输入第二个数" />
  4. <select name="" id="type">
  5. <option value="1">+</option>
  6. <option value="2">-</option>
  7. <option value="3">x</option>
  8. <option value="4">/</option>
  9. <option value="5">%</option>
  10. </select>
  11. <button>计算</button>
  12. <span id="result"></span>
  13. <script>
  14. var btn = document.querySelector("button"); //获取按钮元素
  15. var sum;
  16. btn.onclick = function () {
  17. var myselect = document.getElementById("type"); //点击时获取下拉菜单
  18. var x = document.getElementById("num1").value-0;//获取第一个框内元素
  19. var y = document.getElementById("num2").value-0;//获取第二个框内元素
  20. var index = myselect.selectedIndex; //获取下拉菜单的索引
  21. var num = myselect.options[index].value-0; //通过索引获取value值
  22. //上面拿到的数据都是字符串型,需要手动改为数字型
  23. //拿到选中项的索引
  24. // for (i = 0; i < myselect.length; i++) {
  25. // //下拉框的长度就是它的选项数.
  26. // if (myselect[i].selected == true) {
  27. // var text = myselect[i].value; //获取当前选择项的文本.
  28. // break;
  29. // }
  30. // }
  31. // console.log(num);
  32. switch(num){
  33. case 1:
  34. sum=(x+y);
  35. break;
  36. case 2:
  37. sum=( x-y);
  38. break;
  39. case 3:
  40. sum=(x*y) ;
  41. break
  42. case 4:
  43. sum=(x/y) ;
  44. break;
  45. case 5:
  46. sum=(x%y);
  47. break;
  48. }
  49. alert('值为'+sum)
  50. };
  51. </script>
  52. </body>

5.动态生成表格

  1. <style>
  2. table {
  3. width: 500px;
  4. margin: 100px auto;
  5. border-collapse: collapse;
  6. text-align: center;
  7. }
  8. td,
  9. th {
  10. border: 1px solid #333;
  11. }
  12. thead tr {
  13. height: 40px;
  14. background-color: #ccc;
  15. }
  16. </style>
  17. </head>
  18. <body>
  19. <table cellspacing="0">
  20. <thead>
  21. <tr>
  22. <th>姓名</th>
  23. <th>科目</th>
  24. <th>成绩</th>
  25. <th>操作</th>
  26. </tr>
  27. </thead>
  28. <tbody>
  29. </tbody>
  30. </table>
  31. <script>
  32. // 1.先去准备好学生的数据
  33. var datas = [{
  34. name: '魏璎珞',
  35. subject: 'JavaScript',
  36. score: 100
  37. }, {
  38. name: '弘历',
  39. subject: 'JavaScript',
  40. score: 98
  41. }, {
  42. name: '傅恒',
  43. subject: 'JavaScript',
  44. score: 99
  45. }, {
  46. name: '明玉',
  47. subject: 'JavaScript',
  48. score: 88
  49. }, {
  50. name: '大猪蹄子',
  51. subject: 'JavaScript',
  52. score: 0
  53. }];
  54. //生成表格
  55. var tbody = document.querySelector('tbody')
  56. // 根据行数来创建表格
  57. for (let i = 0; i < datas.length; i++) {
  58. //创建一个tr
  59. var tr = document.createElement('tr');
  60. //插入到tbody里
  61. tbody.appendChild(tr);
  62. // 给每个tr创建td,根据每个对象的属性数量创建单元格
  63. for (const k in datas[i]) {
  64. var td =document.createElement('td')
  65. tr.appendChild(td);
  66. // 将数据传给td
  67. td.innerHTML=datas[i][k]
  68. }
  69. // 添加删除
  70. var td = document.createElement('td');
  71. // 将最后一个td添加到tr里
  72. tr.appendChild(td)
  73. // td里添加a标签
  74. td.innerHTML='<a href="javascript:;">删除</a>';
  75. // 设置a标签的事件
  76. td.children[0].onclick = function(){
  77. tbody.removeChild(this.parentElement.parentElement);
  78. }
  79. }
  80. </script>

6.模态框

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  7. <title>Document</title>
  8. <style>
  9. .login-header {
  10. width: 100%;
  11. text-align: center;
  12. height: 30px;
  13. font-size: 24px;
  14. line-height: 30px;
  15. }
  16. ul,
  17. li,
  18. ol,
  19. dl,
  20. dt,
  21. dd,
  22. div,
  23. p,
  24. span,
  25. h1,
  26. h2,
  27. h3,
  28. h4,
  29. h5,
  30. h6,
  31. a {
  32. padding: 0px;
  33. margin: 0px;
  34. }
  35. .login {
  36. display: none;
  37. width: 512px;
  38. height: 280px;
  39. position: fixed;
  40. border: #ebebeb solid 1px;
  41. left: 50%;
  42. top: 50%;
  43. background: #ffffff;
  44. box-shadow: 0px 0px 20px #ddd;
  45. z-index: 9999;
  46. transform: translate(-50%, -50%);
  47. }
  48. .login-title {
  49. width: 100%;
  50. margin: 10px 0px 0px 0px;
  51. text-align: center;
  52. line-height: 40px;
  53. height: 40px;
  54. font-size: 18px;
  55. position: relative;
  56. cursor: move;
  57. }
  58. .login-input-content {
  59. margin-top: 20px;
  60. }
  61. .login-button {
  62. width: 50%;
  63. margin: 30px auto 0px auto;
  64. line-height: 40px;
  65. font-size: 14px;
  66. border: #ebebeb 1px solid;
  67. text-align: center;
  68. }
  69. .login-bg {
  70. display: none;
  71. width: 100%;
  72. height: 100%;
  73. position: fixed;
  74. top: 0px;
  75. left: 0px;
  76. background: rgba(0, 0, 0, 0.3);
  77. }
  78. a {
  79. text-decoration: none;
  80. color: #000000;
  81. }
  82. .login-button a {
  83. display: block;
  84. }
  85. .login-input input.list-input {
  86. float: left;
  87. line-height: 35px;
  88. height: 35px;
  89. width: 350px;
  90. border: #ebebeb 1px solid;
  91. text-indent: 5px;
  92. }
  93. .login-input {
  94. overflow: hidden;
  95. margin: 0px 0px 20px 0px;
  96. }
  97. .login-input label {
  98. float: left;
  99. width: 90px;
  100. padding-right: 10px;
  101. text-align: right;
  102. line-height: 35px;
  103. height: 35px;
  104. font-size: 14px;
  105. }
  106. .login-title span {
  107. position: absolute;
  108. font-size: 12px;
  109. right: -20px;
  110. top: -30px;
  111. background: #ffffff;
  112. border: #ebebeb solid 1px;
  113. width: 40px;
  114. height: 40px;
  115. border-radius: 20px;
  116. }
  117. </style>
  118. </head>
  119. <body>
  120. <div class="login-header"><a id="link" href="javascript:;">点击,弹出登录框</a></div>
  121. <div id="login" class="login">
  122. <div id="title" class="login-title">
  123. 登录会员
  124. <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
  125. </div>
  126. <div class="login-input-content">
  127. <div class="login-input">
  128. <label>用户名:</label>
  129. <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input" />
  130. </div>
  131. <div class="login-input">
  132. <label>登录密码:</label>
  133. <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input" />
  134. </div>
  135. </div>
  136. <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
  137. </div>
  138. <!-- 遮盖层 -->
  139. <div id="bg" class="login-bg"></div>
  140. <!-- script开始-->
  141. <script>
  142. // 获取元素
  143. var login = document.querySelector('.login'),
  144. link = document.querySelector('#link'),
  145. close = document.querySelector('#closeBtn'),
  146. bg = document.querySelector('#bg');
  147. //开始设置开关遮盖层
  148. link.addEventListener('click',()=>{
  149. login.style.display='block'
  150. bg.style.display='block'
  151. })
  152. close.addEventListener('click',()=>{
  153. login.style.display='none'
  154. bg.style.display='none'
  155. })
  156. //拖动登录框
  157. var title = document.querySelector('#title');
  158. // 设置点击事件
  159. title.addEventListener('mousedown',(e)=>{
  160. var x = e.pageX-login.offsetLeft;
  161. var y = e.pageY-login.offsetTop;
  162. console.log(x,y);
  163. 鼠标按下移动时事件
  164. document.onmousemove = (e)=>{
  165. login.style.left=e.pageX-x+'px'
  166. login.style.top=e.pageY-y+'px'
  167. }
  168. //松开鼠标按键取消拖动
  169. title.onmouseup=()=>{
  170. document.onmousemove='null'
  171. }
  172. })
  173. </script>
  174. </body>
  175. </html>

7.网页轮播图

轮播图也称为焦点图,是网页中比较常见的网页特效。
功能需求:

  1. 鼠标经过轮播图模块,左右按钮显示,离开隐藏左右按钮。
  2. 点击右侧按钮一次,图片往左播放一张,以此类推,左侧按钮同理。
  3. 图片播放的同时,下面小圆圈模块跟随一起变化。
  4. 点击小圆圈,可以播放相应图片。
  5. 鼠标不经过轮播图,轮播图也会自动播放图片。
  6. 鼠标经过,轮播图模块, 自动播放停止。
  1. window.addEventListener('load', function() {
  2. // 1. 获取元素
  3. var arrow_l = document.querySelector('.arrow-l');
  4. var arrow_r = document.querySelector('.arrow-r');
  5. var focus = document.querySelector('.focus');
  6. var focusWidth = focus.offsetWidth;
  7. // 2. 鼠标经过focus 就显示隐藏左右按钮
  8. focus.addEventListener('mouseenter', function() {
  9. arrow_l.style.display = 'block';
  10. arrow_r.style.display = 'block';
  11. clearInterval(timer);
  12. timer = null; // 清除定时器变量
  13. });
  14. focus.addEventListener('mouseleave', function() {
  15. arrow_l.style.display = 'none';
  16. arrow_r.style.display = 'none';
  17. timer = setInterval(function() {
  18. //手动调用点击事件
  19. arrow_r.click();
  20. }, 2000);
  21. });
  22. // 3. 动态生成小圆圈 有几张图片,我就生成几个小圆圈
  23. var ul = focus.querySelector('ul');
  24. var ol = focus.querySelector('.circle');
  25. // console.log(ul.children.length);
  26. for (var i = 0; i < ul.children.length; i++) {
  27. // 创建一个小li
  28. var li = document.createElement('li');
  29. // 记录当前小圆圈的索引号 通过自定义属性来做
  30. li.setAttribute('index', i);
  31. // 把小li插入到ol 里面
  32. ol.appendChild(li);
  33. // 4. 小圆圈的排他思想 我们可以直接在生成小圆圈的同时直接绑定点击事件
  34. li.addEventListener('click', function() {
  35. // 干掉所有人 把所有的小li 清除 current 类名
  36. for (var i = 0; i < ol.children.length; i++) {
  37. ol.children[i].className = '';
  38. }
  39. // 留下我自己 当前的小li 设置current 类名
  40. this.className = 'current';
  41. // 5. 点击小圆圈,移动图片 当然移动的是 ul
  42. // ul 的移动距离 小圆圈的索引号 乘以 图片的宽度 注意是负值
  43. // 当我们点击了某个小li 就拿到当前小li 的索引号
  44. var index = this.getAttribute('index');
  45. // 当我们点击了某个小li 就要把这个li 的索引号给 num
  46. num = index;
  47. // 当我们点击了某个小li 就要把这个li 的索引号给 circle
  48. circle = index;
  49. // num = circle = index;
  50. console.log(focusWidth);
  51. console.log(index);
  52. animate(ul, -index * focusWidth);
  53. })
  54. }
  55. // 把ol里面的第一个小li设置类名为 current
  56. ol.children[0].className = 'current';
  57. // 6. 克隆第一张图片(li)放到ul 最后面
  58. var first = ul.children[0].cloneNode(true);
  59. ul.appendChild(first);
  60. // 7. 点击右侧按钮, 图片滚动一张
  61. var num = 0;
  62. // circle 控制小圆圈的播放
  63. var circle = 0;
  64. // flag 节流阀
  65. var flag = true;
  66. arrow_r.addEventListener('click', function() {
  67. if (flag) {
  68. flag = false; // 关闭节流阀
  69. // 如果走到了最后复制的一张图片,此时 我们的ul 要快速复原 left 改为 0
  70. if (num == ul.children.length - 1) {
  71. ul.style.left = 0;
  72. num = 0;
  73. }
  74. num++;
  75. animate(ul, -num * focusWidth, function() {
  76. flag = true; // 打开节流阀
  77. });
  78. // 8. 点击右侧按钮,小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
  79. circle++;
  80. // 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
  81. if (circle == ol.children.length) {
  82. circle = 0;
  83. }
  84. // 调用函数
  85. circleChange();
  86. }
  87. });
  88. // 9. 左侧按钮做法
  89. arrow_l.addEventListener('click', function() {
  90. if (flag) {
  91. flag = false;
  92. if (num == 0) {
  93. num = ul.children.length - 1;
  94. ul.style.left = -num * focusWidth + 'px';
  95. }
  96. num--;
  97. animate(ul, -num * focusWidth, function() {
  98. flag = true;
  99. });
  100. // 点击左侧按钮,小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
  101. circle--;
  102. // 如果circle < 0 说明第一张图片,则小圆圈要改为第4个小圆圈(3)
  103. // if (circle < 0) {
  104. // circle = ol.children.length - 1;
  105. // }
  106. circle = circle < 0 ? ol.children.length - 1 : circle;
  107. // 调用函数
  108. circleChange();
  109. }
  110. });
  111. function circleChange() {
  112. // 先清除其余小圆圈的current类名
  113. for (var i = 0; i < ol.children.length; i++) {
  114. ol.children[i].className = '';
  115. }
  116. // 留下当前的小圆圈的current类名
  117. ol.children[circle].className = 'current';
  118. }
  119. // 10. 自动播放轮播图
  120. var timer = setInterval(function() {
  121. //手动调用点击事件
  122. arrow_r.click();
  123. }, 2000);
  124. })