一、搜狐、新浪、春夏秋冬练习

ps：获取name、id属性

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>document练习</title>
  8.     <script type="text/javascript">
  10.         //改变内容层
  11.         function changeLink(){
  12.             //获取div的id值同时清空内容
  13.             var nodeVar = document.getElementById("node");
  14.             nodeVar.innerHTML = "";
  15.             nodeVar.innerHTML = "搜狐";
  16.         }
  19.         //清空p标签
  21.         //所有input的value显示出来
  22.         function all_input() {
  23.             //获取input的所有属性
  24.             var inputs = document.getElementsByTagName("input");
  26.             //遍历出value 在 p标签显示
  27.             var str = "";
  28.             for(var i = 0; i<inputs.length; i++){
  30.                 str += inputs[i].value + "<br/>";
  31.             }
  33.             //p标签输出
  34.             document.getElementById("s").innerHTML = str;
  35.         }
  39.         //显示season内容
  40.         function s_input() {
  42.             //获取 name = season
  43.             var names = document.getElementsByName("season");
  45.             //循环遍历出value
  46.              var strName = "";
  47.              for (var i = 0; i<names.length; i++){
  49.                  strName += names[i].value + "<br/>";
  50.              }
  52.             //p标签输出
  53.             document.getElementById("s").innerHTML = strName;
  55.         }
  58.     </script>
  59. </head>
  60. <body>
  61.     <div id="node">新浪</div>
  62.     <input name="b1" type="button" value="改变层内容" onclick="changeLink();" /><br/>
  63.     <br/><input name="season" type="text" value="春" />
  64.     <input name="season" type="text" value="夏" />
  65.     <input name="season" type="text" value="秋" />
  66.     <input name="season" type="text" value="冬" />
  67.     <br/><input name="b2" type="button" value="显示input内容" onclick="all_input();" />
  68.     <input name="b3" type="button" value="显示season内容" onclick="s_input();" />
  69.     <p id="s"></p>
  70. </body>
  71. </html>

二、选择爱好练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>选择你的爱好</title>
  7.     <script type="text/javascript">
  11.         //查看选择爱好
  12.         function subButfun() {
  13.             var valChecks = document.getElementsByName("valCheck");
  16.             var str = "";
  17.             //遍历选中的爱好
  18.             for (var i=0; i<valChecks.length; i++){
  20.                 //判断是否选中了  --关键点
  21.                 if(valChecks[i].checked == true){
  22.                     str += valChecks[i].value + "<br/>";
  23.                 }
  25.             }
  27.             //p标签输出
  28.             document.getElementById("showP").innerHTML = "";
  29.             document.getElementById("showP").innerHTML = str;
  31.         }
  35.     </script>
  36. </head>
  37. <body>
  38.     <h1>选择你的爱好</h1>
  39.     <form action="#" method="post">
  40.     <ul>
  41.         <li><input type="checkbox" name="valCheck" value="音乐">音乐</li>
  42.         <li><input type="checkbox" name="valCheck" value="登山">登山</li>
  43.         <li><input type="checkbox" name="valCheck" value="游泳">游泳</li>
  44.         <li><input type="checkbox" name="valCheck" value="阅读">阅读</li>
  45.         <li><input type="checkbox" name="valCheck" value="打球">打球</li>
  46.         <li><input type="checkbox" name="valCheck" value="跑步">跑步</li>
  47.         <li><input type="checkbox" name="valCheck" value="其他">其他</li>
  48.     </ul>
  49.     </form>
  50.     <hr/>
  52.     <ul>
  53.         <li><button id="subBut" onclick="subButfun()">查看我选择的爱好</button></li>
  54.     </ul>
  56.     <p id="showP"></p>
  57. </body>
  58. </html>