前情提要:

　　学前端也有一阵了,个人感觉前端还是重要的.

　　html 学习教程

https://www.cnblogs.com/baili-luoyun/p/10466040.html

　　css 教程

　　js 教程

https://www.cnblogs.com/baili-luoyun/p/10453714.html

　　本次主要是分享几个综合小例子

案例一:

　　js的事件交互

　　知识点:

　　代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>js </title>
  6.     <script>
  7.         function cherkname(username) {
  8.             if (username==''){
  9.                 alert("用户名不能为空")
  10.  
  11.             }
  12.         }
  13.     </script>
  14. </head>
  15. <body onload="alert('页面全部加载完成')">
  16.     用户名:<input type="text" value="小宝" onfocus="this.value=''" onblur="cherkname(this.value)">
  17. </body>
  18. </html>

　　　　

案例二:

利用math 对象  选择  循环等进行判断数字

代码:

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4.     <meta charset="utf-8">
  5.  
  6.     <title>猜数字游戏</title>
  7.  
  8.     <style>
  9.         html {
  10.             font-family: sans-serif
  11.         }
  12.  
  13.         body {
  14.             width: 50%;
  15.             max-width: 800px;
  16.             min-width: 480px;
  17.             margin: 0 auto
  18.         }
  19.  
  20.         .lastResult {
  21.             color: white;
  22.             padding: 3px
  23.         }
  24.     </style>
  25. </head>
  26.  
  27. <body>
  28. <h1>猜数字游戏</h1>
  29.  
  30. <p>我刚才随机选定了一个100以内的自然数。看你能否在 10 次以内猜中它。每次我都会告诉你所猜的结果是高了还是低了。</p>
  31.  
  32. <div class="form">
  33.     <label for="guessField">请猜数: </label>
  34.     <input type="text" id="guessField" class="guessField">
  35.     <input type="submit" value="确定" class="guessSubmit">
  36. </div>
  37.  
  38. <div class="resultParas">
  39.     <p class="guesses"></p>
  40.     <p class="lastResult"></p>
  41.     <p class="lowOrHi"></p>
  42. </div>
  43.  
  44. <script>
  45.     // 开始编写 JavaScript 代码
  46.     let randomNumber = Math.floor(Math.random() * 100) + 1;
  47.  
  48.     const guesses = document.querySelector('.guesses');
  49.     const lastResult = document.querySelector('.lastResult');
  50.     const lowOrHi = document.querySelector('.lowOrHi');
  51.  
  52.     const guessSubmit = document.querySelector('.guessSubmit');
  53.     const guessField = document.querySelector('.guessField');
  54.  
  55.     let guessCount = 1;
  56.     let resetButton;
  57.  
  58.     function checkGuess() {
  59.         let userGuess = Number(guessField.value);
  60.         if (guessCount === 1) {
  61.             guesses.textContent = '上次猜的数：';
  62.         }
  63.         guesses.textContent += userGuess + ' ';
  64.  
  65.         if (userGuess === randomNumber) {
  66.             lastResult.textContent = '恭喜你！猜对了';
  67.             lastResult.style.backgroundColor = 'green';
  68.             lowOrHi.textContent = '';
  69.             setGameOver();
  70.         } else if (guessCount === 10) {
  71.             lastResult.textContent = '!!!GAME OVER!!!';
  72.             setGameOver();
  73.         } else {
  74.             lastResult.textContent = '你猜错了！';
  75.             lastResult.style.backgroundColor = 'red';
  76.             if (userGuess < randomNumber) {
  77.                 lowOrHi.textContent = '你猜低了！';
  78.             } else if (userGuess > randomNumber) {
  79.                 lowOrHi.textContent = '你猜高了';
  80.             }
  81.         }
  82.  
  83.         guessCount++;
  84.         guessField.value = '';
  85.         guessField.focus();
  86.     }
  87.  
  88.     guessSubmit.addEventListener('click', checkGuess);
  89.  
  90.     function setGameOver() {
  91.         guessField.disabled = true;
  92.         guessSubmit.disabled = true;
  93.         resetButton = document.createElement('button');
  94.         resetButton.textContent = '开始新游戏';
  95.         document.body.appendChild(resetButton);
  96.         resetButton.addEventListener('click', resetGame);
  97.     }
  98.     function resetGame() {
  99.   guessCount = 1;
  100.  
  101.   const resetParas = document.querySelectorAll('.resultParas p');
  102.   for (let i = 0 ; i < resetParas.length; i++) {
  103.     resetParas[i].textContent = '';
  104.   }
  105.  
  106.   resetButton.parentNode.removeChild(resetButton);
  107.  
  108.   guessField.disabled = false;
  109.   guessSubmit.disabled = false;
  110.   guessField.value = '';
  111.   guessField.focus();
  112.  
  113.   lastResult.style.backgroundColor = 'white';
  114.  
  115.   randomNumber = Math.floor(Math.random() * 100) + 1;
  116. }
  117. </script>
  118. </body>
  119. </html>

案例三:

创建按钮 切换图片

知识点 数组 自增加

代码:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script>
  7.         window.onload = function () {
  8.             let img1 = document.getElementsByTagName("img")[0];
  9.             let left = document.getElementById("bt1");
  10.             let right = document.getElementById("bt2");
  11.             let num = 0;
  12.             let arrimg = ["image/1.jpg", "image/2.jpg"
  13.                 , "image/3.jpg", "image/4.jpg", "image/5.jpg"];
  14.             let text = document.getElementById("ye");
  15.             text.innerHTML = (num + 1) + "页" + "/" + arrimg.length + "页";
  16.  
  17.             function left1() {
  18.                 num--;
  19.  
  20.                 if (num < 1) {
  21.                     num = 0;
  22.                 }
  23.                 img1.src = arrimg[num];
  24.                 text.innerHTML = (num + 1) + "页" + "/" + arrimg.length + "页";
  25.             }
  26.  
  27.             function right1() {
  28.  
  29.                 num++;
  30.  
  31.                 if (num == arrimg.length) {
  32.                     num = 0
  33.                 }
  34.                 img1.src = arrimg[num];
  35.                 text.innerHTML = (num + 1) + "页" + "/" + arrimg.length + "页";
  36.             }
  37.  
  38.             left.onclick = function () {
  39.                 left1()
  40.             };
  41.             right.onclick = function () {
  42.                 right1()
  43.             }
  44.  
  45.         }
  46.     </script>
  47.     <style>
  48.         .dd1 {
  49.             width: 500px;
  50.             height: 500px;
  51.             text-align: center;
  52.             background-color: #00c4ff;
  53.             margin: 30px auto;
  54.         }
  55.  
  56.         img {
  57.             width: 400px;
  58.             height: 400px;
  59.         }
  60.  
  61.         #an {
  62.             margin-top: 20px;
  63.         }
  64.  
  65.         .bt {
  66.             padding: 20px;
  67.             margin-left: 10px;
  68.  
  69.         }
  70.  
  71.     </style>
  72. </head>
  73.  
  74. <body>
  75. <div class="dd1">
  76.     <div id="t1">
  77.         <img src="data:image/1.jpg">
  78.  
  79.     </div>
  80.     <div id="an">
  81.         <span id="ye">图片1</span>
  82.         <button class="bt" id="bt1">上一页</button>
  83.         <button class="bt" id="bt2">下一页</button>
  84.     </div>
  85. </div>
  86. </body>
  87. </html>

案例四

商城选择,全选,复选,反选,提交表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script>
  7.         window.onload=function () {
  8.  
  9.             qx.onclick =function () {
  10.                    let qx =document.getElementById("qx").checked;
  11.                     let cdnodes =document.getElementsByTagName("input");
  12.             for (let i=1;i<cdnodes.length;i++){
  13.                 cdnodes[i].checked =qx;
  14.             }
  15.             }
  16.             // let dn =document.getElementById("dn");
  17.             // let sj =document.getElementById("sj");
  18.             // let wj =document.getElementById("wj");
  19.  
  20.         }
  21.     </script>
  22.     <script>
  23.         function yz() {
  24.  
  25.         let cdnodes =document.getElementsByTagName("input");
  26.            for (let i=1;i<cdnodes.length;i++){
  27.                 if (cdnodes[i].checked==""){
  28.                     let stase =window.confirm("确定不购买东西");
  29.  
  30.                 return stase
  31.                 }
  32.  
  33.             }
  34.                 }
  35.         let te1= document.getElementsByClassName("te1");
  36.         for (let i =1;i<te1.length;i++){
  37.             te1[i].title ="请输入数量";
  38.             te1[i].placeholder="请输入数量"
  39.         }
  40.  
  41.     </script>
  42.     <style>
  43.         .dd1 {
  44.             background-color: #00c4ff;
  45.             text-align: center;
  46.             /*margin: 100px auto;*/
  47.             /*width: 500px;*/
  48.             height: 400px;
  49.         }
  50.  
  51.         .tt1 {
  52.             font-size: 30px;
  53.             line-height: 60px;
  54.             margin: auto;
  55.             border-spacing: 0px ;
  56.             width: 700px;
  57.             border: 1px solid red;
  58.  
  59.         }
  60.  
  61.         .th1 {
  62.             margin-left: 40px;
  63.                      border: 1px solid black;
  64.  
  65.             line-height: 60px;
  66.  
  67.         }
  68.         .xzk{
  69.             margin-top: 13px;
  70.             width: 20px;
  71.             height: 20px;
  72.         }
  73.         .tijiao{
  74.             font-size: 30px ;
  75.         }
  76.         .te1{
  77.             line-height: 30px;
  78.             margin-bottom: 15px;
  79.         }
  80.     </style>
  81. </head>
  82. <body>
  83. <form action="http://www.baidu.com" method="get" onsubmit="return yz()">
  84. <div class="dd1">
  85.     <table class="tt1">
  86.         <tr class="tr1">
  87.             <th class="th1"><input type="checkbox" id="qx" class="xzk" /></th>
  88.             <th class="th1">商品名称</th>
  89.             <th class="th1">商品价格</th>
  90.             <th class="th1">商品库存</th>
  91.             <th class="th1">购买数量</th>
  92.         </tr>
  93.         <tr class="tr1">
  94.             <td class="th1"><input type="checkbox" id="dn" class="xzk" name="dn"/></td>
  95.             <td class="th1">电脑</td>
  96.             <td class="th1">100</td>
  97.             <td class="th1">200</td>
  98.             <td class="th1"><input type="text" name="dn" class="te1"></td>
  99.         </tr>
  100.         <tr class="tr1">
  101.             <td class="th1"><input type="checkbox" id="sj" class="xzk" name="sj"></td>
  102.             <td class="th1">手机</td>
  103.             <td class="th1">200</td>
  104.             <td class="th1">100</td>
  105.                         <td class="th1"><input type="text" name="sj" class="te1"></td>
  106.  
  107.         </tr>
  108.         <tr>
  109.             <td class="th1"><input type="checkbox" id="wj" class="xzk" name="wj"></td>
  110.             <td class="th1">玩具</td>
  111.             <td class="th1">400</td>
  112.             <td class="th1">500</td>
  113.                         <td class="th1"><input type="text" name="wj" class="te1" placeholder="请输入数量"></td>
  114.  
  115.         </tr>
  116.  
  117.     </table>
  118.     <hr>
  119.  
  120.     <input type="submit" value="提交" class="tijiao">
  121.     <p>您购买的东西是</p>
  122.     <p id ="gmsp"></p>
  123. </div>
  124. </form>
  125. </body>
  126. </html>

案例五:

显示当前时间

知识点:主要是date 对象和for 循环的使用

　　

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. <script>
  7. window.onload =function () {
  8.     let p1 = document.getElementById("p1"); //获取p1 dom
  9.     let kwhite = "ss";  //增加空白
  10.     for (let i = 0; i < 5; i++) {    //循环3次
  11.         nums1 = Math.floor(Math.random() * 10);    //生成随机数向下取整
  12.         kwhite+=nums1
  13.     }
  14.  
  15.     p1.innerText = kwhite
  16.  
  17. }
  18. </script>
  19. <style>
  20.     /*.a1{*/
  21.         /*background-color: orange;*/
  22.         /*width: 500px;*/
  23.         /*height: 300px;*/
  24.         /*margin: 0px auto;*/
  25.     /*}*/
  26.     .a2{
  27.         background-color: palegreen;
  28.         width: 700px;
  29.         height: 300px;
  30.         margin: 0px auto;
  31.     }
  32.     .p1{
  33.         margin: auto;
  34.         line-height: 240px;
  35.         font-size: 50px;
  36.         text-align: center;
  37.         padding: 30px;
  38.         border: 1px solid red;
  39.     }
  40. </style>
  41. </head>
  42. <body>
  43.    <div class="a1">
  44.  
  45.    </div>
  46.    <hr>
  47. <div class="a2">
  48. <p class="p1" id="p1"></p>
  49. </div>
  50. </body>
  51. </html>

案例六:

时间案例升级

主要是增加删除节点,增加节点的内容

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <script>
  7.         window.onload = function () {
  8.  
  9.             let texid;//这是定时器id
  10.             let nun = 1;
  11.  
  12.             function gettime() {
  13.                 let p_time = document.getElementById("now_time");
  14.  
  15.                 let time1 = new Date();
  16.                 let now_time = time1.toLocaleString();
  17.                 p_time.innerHTML = now_time;
  18.                 return now_time
  19.             }
  20.  
  21.             let start_time = document.getElementById("start-time");
  22.             let stop_time = document.getElementById("stop-time");
  23.             let nums1 = document.getElementById("nums"); //2
  24.  
  25.             function starts1() {
  26.                 if (texid == null) {
  27.                     gettime();
  28.                     texid = setInterval(gettime, 1000)
  29.                 }
  30.                 let num_p = document.createElement("p");
  31.                 num_p.innerHTML = nun;
  32.                 nun++;
  33.                 num_p.setAttribute("class", "sty1");
  34.                 nums1.appendChild(num_p);
  35.  
  36.                 let str_p = document.createElement("p");
  37.  
  38.                 str_p.innerHTML = gettime();
  39.  
  40.                 start_time.appendChild(str_p);
  41.  
  42.                 str_p.setAttribute("class", "sty1");
  43.  
  44.             }
  45.  
  46.             function stops1() {
  47.                 clearInterval(texid);
  48.                 texid = null;
  49.                 let sto_p = document.createElement("p");
  50.                 sto_p.innerHTML = gettime();
  51.                 sto_p.setAttribute("class", "sty1");
  52.                 stop_time.appendChild(sto_p);
  53.  
  54.                 sto_p.innerHTML = gettime()
  55.  
  56.             }
  57.  
  58.             let bgh = document.getElementById("bg");
  59.             let clears = document.getElementById("clear");
  60.             clears.onclick = function () {
  61.                 nun = 1;
  62.                 bgh.removeChild(nums1); //2
  63.                                 nums1 = document.createElement("td");
  64.                                                 nums1.setAttribute("class", "nums");
  65.                                                                 bgh.appendChild(nums1);
  66.  
  67.                 bgh.removeChild(start_time);
  68.                                 start_time = document.createElement("td");
  69.                                                 start_time.setAttribute("class","start-time");
  70.                                                                 bgh.appendChild(start_time);
  71.  
  72.                 bgh.removeChild(stop_time);
  73.                                 stop_time = document.createElement("td");
  74.                                                 stop_time.setAttribute("class","stop-time");
  75.                                                                 bgh.appendChild(stop_time);
  76.  
  77.             };
  78.  
  79.             let sta1 = document.getElementById("start");
  80.             sta1.onclick = function () {
  81.                 starts1()
  82.             };
  83.             let stp1 = document.getElementById("stop");
  84.             stp1.onclick = function () {
  85.                 stops1()
  86.             }
  87.  
  88.         }
  89.     </script>
  90.     <style>
  91.         .kezi {
  92.             width: 350px;
  93.             height: 500px;
  94.             border: 1px solid red;
  95.             background-color: orange;
  96.             float: left;
  97.         }
  98.  
  99.         .show-time {
  100.             width: 900px;
  101.             height: 500px;
  102.             border: 1px solid green;
  103.             background-color: #06b6ef;
  104.             float: left;
  105.         }
  106.  
  107.         .t1 {
  108.             width: 900px;
  109.             height: 500px;
  110.         }
  111.  
  112.         .thh {
  113.             height: 30px;
  114.         }
  115.  
  116.         #now_time {
  117.             height: 50px;
  118.             color: gold;
  119.             font-size: 50px;
  120.             font-weight: bolder;
  121.             text-align: center;
  122.         }
  123.  
  124.         #start {
  125.             margin-top: 50px;
  126.             height: 100px;
  127.             width: 100px;
  128.             margin-left: 50px;
  129.             font-size: 30px;
  130.         }
  131.  
  132.         #stop {
  133.             margin-top: 50px;
  134.             height: 100px;
  135.             width: 100px;
  136.             margin-left: 13px;
  137.             font-size: 30px;
  138.         }
  139.  
  140.         #clear {
  141.             margin-top: 30px;
  142.             height: 100px;
  143.             width: 200px;
  144.             margin-left: 60px;
  145.             font-size: 30px;
  146.         }
  147.  
  148.         .sty1 {
  149.             font-size: 30px;
  150.             color: red;
  151.         }
  152.  
  153.         #start-time {
  154.             width: 350px;
  155.         }
  156.  
  157.         #stop-time {
  158.             width: 350px;
  159.         }
  160.  
  161.         #nums {
  162.             width: 100px;
  163.         }
  164.     </style>
  165. </head>
  166. <body>
  167. <div class="kezi">
  168.     <div class="show-class">
  169.         <p id="now_time">00:00:00</p>
  170.         <button id="start">开始</button>
  171.         <button id="stop">结束</button>
  172.         <br>
  173.         <button id="clear">清空</button>
  174.     </div>
  175. </div>
  176. <div class="show-time">
  177.     <table border="1" class="t1">
  178.         <tr>
  179.             <th class="nums">次数</th>
  180.             <th class="thh">start-time</th>
  181.             <th class="thh">stop-time</th>
  182.         </tr>
  183.         <tr id="bg">
  184.             <td id="nums"></td>
  185.             <td id="start-time"></td>
  186.             <td id="stop-time"></td>
  187.         </tr>
  188.     </table>
  189. </div>
  190. </body>
  191. </html>

案例七:

生成4位随机数

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. <script>
  7. window.onload =function () {
  8.     let p1 = document.getElementById("p1"); //获取p1 dom
  9.     let kwhite = "ss";  //增加空白
  10.     for (let i = 0; i < 5; i++) {    //循环3次
  11.         nums1 = Math.floor(Math.random() * 10);    //生成随机数向下取整
  12.         kwhite+=nums1
  13.     }
  14.  
  15.     p1.innerText = kwhite
  16.  
  17. }
  18. </script>
  19. <style>
  20.     /*.a1{*/
  21.         /*background-color: orange;*/
  22.         /*width: 500px;*/
  23.         /*height: 300px;*/
  24.         /*margin: 0px auto;*/
  25.     /*}*/
  26.     .a2{
  27.         background-color: palegreen;
  28.         width: 700px;
  29.         height: 300px;
  30.         margin: 0px auto;
  31.     }
  32.     .p1{
  33.         margin: auto;
  34.         line-height: 240px;
  35.         font-size: 50px;
  36.         text-align: center;
  37.         padding: 30px;
  38.         border: 1px solid red;
  39.     }
  40. </style>
  41. </head>
  42. <body>
  43.    <div class="a1">
  44.  
  45.    </div>
  46.    <hr>
  47. <div class="a2">
  48. <p class="p1" id="p1"></p>
  49. </div>
  50. </body>
  51. </html>

案例八:

注册界面

节点的增加删除,.css 界面的显示等

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.  
  7.     <style>
  8.         .header{
  9.             background-color: #06b6ef;
  10.             height: 100px;
  11.         }
  12.         .bt1{
  13.             line-height: 70px;
  14.             margin-top: 10px;
  15.             width: 500px;
  16.             font-size: 30px;
  17.             /*height: 200px;*/
  18.         }
  19.         .mod{
  20.             /*background-color: orange;*/
  21.             text-align: center;
  22.             line-height: 40px;
  23.             font-size: 30px;
  24.             margin-top: 5px;
  25.             padding: 10px;
  26.  
  27.         }
  28.         .dxck{
  29.             padding: 10px;
  30.             width: 300px;
  31.             color: ghostwhite;
  32.         }
  33.         .sc{
  34.             line-height: 100%   ;
  35.             height: 30px;
  36.             width: 100px;
  37.             margin-left: 100px;
  38.         }
  39.         .hide{
  40.             display: none;
  41.         }
  42.         #show_msg{
  43.             height: 350px;
  44.             background-color: pink;
  45.             position: fixed;
  46.         }
  47.         .xbnr{
  48.             line-height: 100px;
  49.             font-size: 80px;
  50.         }
  51.         input{
  52.             font-size: 80px;
  53.         }
  54.         .close1{
  55.             margin-left: 900px;
  56.             font-size: 25px;
  57.  
  58.         }
  59.         body{
  60.             height: 1500px;
  61.             background-color: black;
  62.         }
  63.     </style>
  64. </head>
  65. <body>
  66. <div class="header" id="header">
  67.     <button class="bt1">增加个人信息</button>
  68. </div>
  69. <div class="mod" id="mod">
  70. <table border="1">
  71.     <tbody class="msg1" id="msg1">
  72.     <tr>
  73.     <th class="dxck">姓名</th>
  74.     <th class="dxck">年龄</th>
  75.     <th class="dxck">专业</th>
  76.     <th class="dxck"></th>
  77. </tr>
  78.     <tr>
  79.     <td class="dxck">王</td>
  80.     <td class="dxck">18</td>
  81.     <td class="dxck">计算机</td>
  82.         <td class="dxck"><button class="sc" onclick="delnode(this)">删除</button></td>
  83.     </tr>
  84.     <tr>
  85.     <td class="dxck">王2</td>
  86.     <td class="dxck">181</td>
  87.     <td class="dxck">计算机1</td>
  88.         <td class="dxck"><button class="sc" onclick="delnode(this)">删除</button></td>
  89.     </tr>
  90.     </tbody>
  91. </table>
  92. </div>
  93. <div class="show_msg hide" id="show_msg">
  94.     <span class="xbnr">姓名:</span><input id="name" type="text" title="请输入姓名" placeholder="请输入姓名" ><br>
  95.     <span class="xbnr">年龄:</span><input id="age" type="text" title="请输入age" placeholder="请输入age"><br>
  96.     <span class="xbnr">专业:</span><input id="hobby" type="text" title="请输入专业" placeholder="请输入专业" ><br>
  97.     <button class="close1" id="close1">保存</button>
  98. </div>
  99. </body>
  100.     <script>
  101.  
  102.                     let bt1 =document.getElementsByClassName("bt1")[0];  //加入信息按钮
  103.                     let show_msg =document.getElementById("show_msg"); //加入内容界面
  104.                     let close1 =document.getElementById("close1");  //关闭加入内容界面
  105.                     let name =document.getElementById("name");  //名字
  106.                     let age =document.getElementById("age");  //年龄
  107.                     let hobby =document.getElementById("hobby"); //专业
  108.                     let msg1  =document.getElementById("msg1") ;//获取展示内容父标签
  109.             bt1.onclick =function () {
  110.                 show_msg.classList.remove("hide")
  111.             };
  112.             close1.onclick =function () {
  113.               show_msg.classList.add("hide");
  114.                 namemsg= name.value;
  115.                 agemsg =age.value;
  116.                 hobbymsg =hobby.value;
  117.             let creatbody =document.createElement("tr");  //创建tr
  118.             let creatname =document.createElement("td");  //创建td
  119.             creatname.setAttribute("class","dxck");    //赋值css
  120.             creatname.innerHTML=namemsg;   //给td 赋name value
  121.             let creatage =document.createElement("td");   //创建td
  122.             creatage.setAttribute("class","dxck");
  123.             creatage.innerHTML=agemsg;    //赋值
  124.             let creathobby =document.createElement("td");  //创建td
  125.             creathobby.setAttribute("class","dxck");
  126.             creathobby.innerHTML=hobbymsg;
  127.             let creatclear =document.createElement("td");  //创建td
  128.             creatclear.setAttribute("class","dxck");
  129.             // creatclear.innerHTML="<button class=\"sc\" onclick=\"delnode(this)\">删除</button>"
  130.             let iupdel =document.createElement("button");  //创建button
  131.             iupdel.setAttribute("class","sc");
  132.             iupdel.setAttribute("onclick","delnode(this)");
  133.             iupdel.innerHTML="删除";
  134.  
  135.             msg1.appendChild(creatbody);     //在msg1 下增加tr标签
  136.             creatbody.appendChild(creatname); //在tr 标签下增加td
  137.             creatbody.appendChild(creatage);   //
  138.             creatbody.appendChild(creathobby);  //
  139.             creatbody.appendChild(creatclear); //
  140.             creatclear.appendChild(iupdel); //在td 标签内增加button
  141.             };
  142.  //             let scmsg =document.getElementsByClassName("sc");     ///待解决
  143.  //             for(let i=0;i>scmsg.length;i++){
  144.  //
  145.  //             scmsg[i].onclick =function () {
  146.  //                     alert("zhans")
  147.  //                 }
  148.  // }
  149.             function delnode(inputNode) {
  150.                 let trNode = inputNode.parentNode.parentNode;
  151.                 let tbody =document.getElementsByTagName("tbody")[0];
  152.                 tbody.removeChild(trNode)
  153.             }
  154.  
  155.     </script>
  156. </html>

前端小例子 基础js css html练习的更多相关文章

  1. 前端性能优化之js,css调用优化

    规则1:减少HTTP请求     把多个JS请求合并为一个JS请求,把多个CSS请求合并为一个CSS请求.从而减少从客户端向服务器端的请求数.     规则3:添加Expires头     用http ...

  2. 小tips：JS/CSS实现字符串单词首字母大写

    css实现: text-transform:capitalize; JS代码一: String.prototype.firstUpperCase = function(){ return this.r ...

  3. 【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

    [CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面 ...

  4. 前端总结·基础篇·CSS

    前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;}  /* IE8+ */body {margin:0;}  ...

  5. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  6. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  7. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  8. 前端总结·基础篇·CSS（二）视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  9. 前端总结·基础篇·CSS（三）补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

随机推荐

  1. 【Log】logback的配置和使用（一）

    logback介绍 Logback是由log4j创始人设计的又一个开源日志组件.logback当前分成三个模块:logback-core,logback- classic和logback-access ...

  2. 何时开始phonics学习及配套阅读训练zz

    引子:自从11月份俱乐部第一批孩子开始英文阅读,到现在三.四个月的时间过去了.很多孩子从不知道怎么读绘本甚至排斥英语,到现在能很投入地看原版书, 有些甚至主动地去寻找拼读规律.我家小宝目前也从前期的阅 ...

  3. 2018.07.03 HDU Rikka with Phi（线段树）

    Rikka with Phi Time Limit: 16000/8000 MS (Java/Others) Memory Limit: 131072/131072 K (Java/Others) P ...

  4. 2018.08.16 洛谷P1471 方差（线段树）

    传送门 线段树基本操作. 把那个方差的式子拆开可以发现只用维护一个区间平方和和区间和就可以完成所有操作. 同样区间修改也可以简单的操作. 代码: #include<bits/stdc++.h&g ...

  5. C++ 动态分配 和 内存分配和内存释放

    动态分配 动态分配可以说是指针的关键所在.不需要通过定义变量,就可以将指针指向分配的内存.也许这个概念看起来比较模糊,但是确实比较简单.下面的代码示范如何为一个整数分配内存: int *pNumber ...

  6. mysql CONCAT用法

    1.全表查询 SELECT * FROM `wh_statistics_service_api_request`; 由于上面时间是按year,month,day三个数值字段来存时间的,现在想通过时间段 ...

  7. DIV+CSS实战(二)

    一.说明 在DIV+CSS实战(一)中,已经把框架搭建起来了,现在就需要往框架里面添加内容了.需要实现的内容如下图: 二.头部的设计(全媒体订阅) 左侧是一张图片+标题 ,右侧是登录名 和上次登录的时 ...

  8. 配置HDFS HttpFS和WebHDFS

    HDFS支持两种RESTful接口:WebHDFS和HttpFS. WebHDFS默认端口号为50070,HttpFS默认端口号为14000. 默认启动WebHDFS而不会启动HttpFS,而Http ...

  9. 动态链接库编程：非MFC DLL

    设计一个DLL,内含一个函数计算a+b: DLL的组成 .h(头文件) 定义了DLL能够导出的函数.数据结构或类的声明,该文件的声明内容在.CPP文件中实现,而.CPP的源程序被封装到DLL文件中 . ...

  10. faceswap使用手冊

    cd faceswap cd faceswap-master python faceswap.py gui Notice: This repository is not operated or mai ...