前端学习第二阶段：javascript

青旅半醒 2022-05-26 07:38 405阅读 0赞
  1. JS代码写在哪里：script里面；写在外部.js后缀文件里面，通过script标签引入；写在标签里面

注意：在引入js文件的script里面，一定不能再写js代码；

  1.        标签里面写js代码一般情况下不推荐（在某些插件里面，可能全部都是通过这种方式引入）

script标签的放置位置：

  1.         body或者head里面，只要注意一点：如果script里面涉及到操作后面的元素，而script又非得放前面的话，需要加上：window.οnlοad=function()\{//这里再写代码\};
  3.         如果说没什么特别的要求，一般script标签放在Body结束之前。

2.写JS代码需要注意什么：

a.严格区分大小写（引号里面是没有这个规则）；b.语句字符都是半角字符；（字符里面可以使用任意字符）；c.某些完整语句后面要写分号；d.代码要缩进，缩进要对齐。

3 系统的三种不同类型弹窗

  1. <script type="text/javascript">
  2.         confirm("你确定吗？");// 确认弹窗;
  3.         alert("你确定吗？");// 弹出弹窗;
  4.         prompt("你确定吗？");// 输入弹窗;
  5.     </script>

4.获取元素以及修改内容

a.获取元素方式

独有标签可以直接获取到，例如：document.body ; document.title

body里面的结构标签可以用ID名、class名、标签名、name名、选择器获取

document.getElementById()

obj.getElementsByClassName()（通过class名获取，不兼容IE8及以下）

obj.getElementsByTagName()

obj.getElementsByName()

obj.querySelector()（通过选择器获取，不兼容IE7及以下）

obj.querySelectorAll()（通过选择器获取，不兼容IE7及以下）

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8.     <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
  9.     <link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
  10.     <script type="text/javascript" src="./js/bootstrap.min.js"></script>
  11.     <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
  12. </head>
  13. <body>
  14.     <div id="box"></div>
  15.     <div class="wrap"></div>
  16.     <div class="wrap"></div>
  17.     <div id="alisa">
  18.         <p class="kk">
  19.             <i class="fly"></i>
  20.         </p>
  21.         <i class="fly"></i>
  22.     </div>
  23.     <p></p>
  24.     <p></p>
  25.     <script type="text/javascript">
  26.         //document.title="修改页面title信息";
  27.         //document.body.innerHTML="<p>修改别的标签的内容，得用innerHTML或者innerText插入内容</p>";
  28.         //document.body.innerText="<p>innerText与innerHTML的区别是：innerText无法解析p标签</p>";
  29.         //box.innerHTML="因为id是唯一的，所以可以直接添加内容.(不推荐！)";
  30.         document.getElementById("box").innerHTML="推荐使用！";
  31.         //document.getElementsByClassName("wrap").innerHTML="因为class有很多个，所以element需要+s。获取的是确切的某个元素，可以直接操作这个元素";
  32.         document.getElementsByClassName("wrap")[0].innerHTML="获取的是一堆元素的集合，设置内容时要通过下标（索引/序号）拿到对应的某一个再用";
  33.         document.getElementsByClassName("wrap")[1].innerHTML="获取第二个类";
  34.         //alert(document.getElementsByClassName("wrap").length);
  35.         document.getElementsByTagName("p")[0].innerHTML="通过标签名获取";
  36.         document.querySelector("#alisa .kk .fly").innerHTML="通过选择器获取，获取第一个对应的元素";
  37.         document.querySelectorAll("#alisa .fly")[1].innerHTML="通过选择器获取，获取的是一个集合，该选择器下所有对应的元素";
  38.     </script>
  39. </body>
  40. </html>

作业：点击一个盒子之后，变成一个a标签

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8.     <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
  9.     <link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
  10.     <script type="text/javascript" src="./js/bootstrap.min.js"></script>
  11.     <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
  12.     <style type="text/css">
  13.         #box{width: 100px;height: 20px;background: pink;color: #fff;text-align: center;margin: 0 auto;cursor: pointer;}
  14.         a{color: #fff;}
  15.         a:hover{color: #fff;;}
  16.     </style>
  17. </head>
  18. <body>
  19.     <div id="box">点我试试</div>
  20.     <script type="text/javascript">
  21.         var firstDiv=document.getElementById("box");
  22.         firstDiv.onclick=function(){
  23.             firstDiv.innerHTML="<a href='#'>潭州首页</a>";
  24.         }
  25.     </script>
  26. </body>
  27. </html>

5.函数+构造函数

默认值+解构赋值，函数的设定与默认值，方法一：

  1. <script>
  2.         function fn({title,content}){
  3.             console.log(title,content);
  4.         }
  5.         fn({title:"alisa",content:"123456"})
  6.     </script>

方法二：

  1. <script>
  2.         function fn({title="alisa",content}){
  3.             console.log(title,content);
  4.         }
  5.         fn({content:"123456"})
  6.     </script>

最新箭头函数写法：去掉function，后面加一个=>

6.onclick事件

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <script>
  7.         function myFunction(){
  8.             document.getElementById("demo").innerHTML="my first javascript function";
  9.         }
  10.     </script>
  11. </head>
  12. <body>
  13.     <h1>onclick</h1>
  14.     <p id="demo">paragraph</p>
  15.     <button type="button" onclick="myFunction()">try it!</button>
  16. </body>
  17. </html>

7.document.write()在文档流关闭之前，给Body部分新增内容；在文档流关闭之后，修改整个HTML的内容。

  1. <script>
  2.         document.write("新增内容");//文档流关闭之前
  3.         window.onload = function(){
  4.             document.write("window.onload表示是文档流关闭之后，修改整个HTML页面，原先的内容清空");
  5.         }
  6.     </script>

8.JS里的事件

  1. <body>
  2.     <div id="box"></div>
  3. </body>
  4.     <script>
  5.         //事件：响应用户的操作,元素.事件-函数
  6.         //鼠标事件：*左键单击onclick；*左键双击ondbclick；右键单击oncontextmenu；无右键双击。*鼠标移入onmouseover/onmouseenter;*鼠标移出:onmouseout/onmouseleave。鼠标按下onmousedown。鼠标移动onmousemove。鼠标抬起onmouseup。鼠标滚轮onmousewheel
  7.         //键盘事件：按键按下onkeydown,onkeypress;按键抬起onkeyup
  8.         //表单事件：获得焦点onfocus：失去焦点onblur;内容改变onchange...
  9.         //系统事件：加载完成onload;内容滚动onscroll;窗口改变大小onresize
  10.         //函数：有名函数;匿名函数
  11.         //function hanshu(){alert("有名函数");};
  12.         //hanshu();//有名函数可以加括号自执行，执行的位置可以再定义的前面
  13.         //document.getElementById("box").onclick = hanshu;//有名函数可以把名字放到事件后，充当一个事件函数，事件触发的时候执行
  14.         document.getElementById("box").onclick = function(){alert("匿名函数");};
  15.     </script>

9.简单认识

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8.     <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
  9.     <link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
  10.     <!-- <script type="text/javascript" src="./js/bootstrap.min.js"></script> -->
  11.     <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
  12.     <style type="text/css">
  13.         #box{width: 100px;height: 100px;background: pink;margin: 50px auto;}
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="box"></div>
  18. </body>
  19.     <script>
  20.         document.getElementById("box").onclick = function(){
  21.             //在事件函数内，有一个关键字this，代表着当前触发事件的这个元素
  22.             this.innerHTML="在盒子内添加文字！"
  23.         };
  24.     </script>
  25. </html>

10.定义变量

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8.     <link rel="stylesheet" type="text/css" href="./css/bootstrap.min.css">
  9.     <link rel="stylesheet" type="text/css" href="./css/bootstrap-theme.min.css">
  10.     <!-- <script type="text/javascript" src="./js/bootstrap.min.js"></script> -->
  11.     <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
  12.     <style type="text/css">
  13.         #box{width: 100px;height: 100px;background: pink;margin: 50px auto;}
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="box"></div>
  18. </body>
  19.     <script>
  20.         //定义变量:规则-1.不能使用关键字或者保留字（js里面已经赋予它有意义的词，或者留着备用的词）2.只能包含数字/字母/_/$，并且不能以数字开头3.严格区分大小写4.尽量见名知意
  21.         var bianliang = document.getElementById('box');
  22.         //添加鼠标点击事件
  23.         bianliang.onclick=function(){
  24.             this.innerHTML="鼠标点击！";
  25.         }
  26.         //添加鼠标移入事件
  27.         bianliang.onmouseenter=function(){
  28.             this.innerHTML="鼠标移入！";
  29.         }
  30.         //添加鼠标移出事件
  31.         bianliang.onmouseleave=function(){
  32.             this.innerHTML="鼠标移出！";
  33.         }
  34.         // var x=1;var y=2;var z=3;
  35.         // alert(x+y+z);
  36.         //用，可以让一个var定义多个变量
  37.         //Var变量时并不要求立马赋值
  38.         var x=10,y=20,z=30;
  39.         alert(x+y+z);
  40.     </script>
  41. </html>

11.prompt弹窗，document.write()

  1. <script>
  2.     var val = prompt("请输入您的昵称！")//prompt("")可以出现弹窗
  3.     document.write("<h1>"+ val +"</h1>");//利用+号拼接，实现将弹窗内输入的文字在页面输出
  4.     document.write("<h2>"+ val +"</h2>");
  5.     document.write("<h3>"+ val +"</h3>");
  6. </script>

12.拼接

  1. <script>
  2.     //+的拼接,+号两边一旦有字符串（引号引起来的一坨），那么+号就不再是数学运算了，而是拼接，最终结果是字符串
  3.     var x="10",y="20";
  4.     alert(x+y);
  5. </script>

13.作业

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8.     <style type="text/css">
  9.         #box1,#box2{width: 150px;height: 25px;line-height: 25px;background: pink;color: #fff;margin: 50px auto;text-align: center;}
  10.     </style>
  11. </head>
  12. <body>
  13.     <div id="box1"></div>
  14.     <div id="box2"></div>
  15. </body>
  16. <script>
  17.     var obox1=document.getElementById("box1"),obox2=document.getElementById("box2");
  18.     obox1.onclick=function(){
  19.         this.innerHTML="我被点击了！";
  20.         obox2.innerHTML="#box1被点击了！";
  21.     };
  22.     obox2.onclick=function(){
  23.         this.innerHTML="我被点击了！";
  24.         obox1.innerHTML="#box2被点击了！";
  25.     };
  26.     obox1.onmouseenter=function(){
  27.         this.innerHTML="我被移入了！";
  28.         obox2.innerHTML="#box1被移入了！";
  29.     }
  30.     obox2.onmouseenter=function(){
  31.         this.innerHTML="我被移入了！";
  32.         obox1.innerHTML="#box2被移入了！";
  33.     }
  34. </script>
  35. </html>

14.js操作标签属性和自定义属性

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8.     <style type="text/css">
  9.         #box1,#box2{width: 150px;height: 25px;line-height: 25px;background: pink;color: #fff;margin: 50px auto;text-align: center;}
  10.     </style>
  11. </head>
  12. <body>
  13.     <a href="https://www.baidu.com/" id="box" afei="123">百度</a>
  14. </body>
  15. <script>
  16.             /*
  17.             js操作元素的标签属性：
  18.                 符合规范的标签属性：
  19.                     . 符号直接操作（可读可写）
  21.                 不规范（自定义）的标签属性：
  22.                     获取：.getAttribute()
  23.                     设置：.setAttribute()
  24.                     移除：.removeAttribute()
  26.                 注意：
  27.                     所有的 路径/颜色 获取的结果不一定是你写的内容
  28.                     通过ID获取的元素赋值给变量后，假设修改了ID，这个变量还是表示这个元素
  29.                     自定义标签属性的操作方式，同样可以操作符合规范的标签属性
  30.              */
  31.     var abox=document.getElementById("box");
  32.     alert(abox.getAttribute("afei"));
  33. </script>
  34. </html>

15.不规范的属性

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8.     <style type="text/css">
  9.         #box1,#box2{width: 150px;height: 25px;line-height: 25px;background: pink;color: #fff;margin: 50px auto;text-align: center;}
  10.     </style>
  11. </head>
  12. <body>
  13.     <a href="https://www.baidu.com/" id="box" afei="123">百度</a>
  14. </body>
  15. <script>
  16.     // 当元素.操作属性时，假设该属性名称是，规范的标签属性，那么这个操作是针对于标签属性的
  17.                         //假设该属性名称不是，规范的标签属性，那么这个操作就和标签属性没有任何关系
  18.     //访问一个从来没有定义过的变量的时候，会报错
  19.     //访问一个对象从来没有设定过的自定义属性的时候，不会报错，值是undefined
  20.     var obox=document.getElementById("box");
  21.     obox.afei="456";//s对象的自定义属性
  22.     alert(obox.afei);
  23.     //当var没有放在某个函数内部的时候，我们可以理解为window.后面的变量称之为全局变量 ------  var x=10等价于window.x=10;
  24.     //当var处于函数内部的时候，不能理解为window.，后面的变量称之为局部变量
  25. </script>
  26. </html>

16.js基础数据类型

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8. </head>
  9. <body>
  10.     <div id="box"></div>
  11. </body>
  12. <script>
  13.     //数据类型：
  14.     //var a=10;//number数字
  15.     //var a = "20";//string字符串
  16.     //var a = true;//boolean布尔值
  17.     //var a = document;//object对象
  18.     //var a = document.getElementById("box");//object对象
  19.     //var a = [1,2,3,"45"];//object对象
  20.     //var a=[];//object对象
  21.     //var a= null;//object对象,在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单独一类数据类型
  22.     //function a(){};//function对象
  23.     //var a;//undefined未定义
  24.     alert( typeof a);
  25. </script>
  26. </html>

17.操作样式

控制元素的样式：

外部样式表：js不能操作外部文件

内部样式表：js可以操作，很麻烦，所以不常用。优先级高。

行内样式标签属性：优先级最高。大部分情况下，Js都是通过操作行内样式达到修改样式的目的

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8.     <style type="text/css" id="style">
  9.         #box{width:200px;height:200px;background:red;}/*外部样式表*/
  10.     </style>
  11. </head>
  12. <body>
  13.     <div id="box" style="background: green;height: 100px;width: 100px;"></div><!-- 行内样式标签属性 -->
  14. </body>
  15. <script>
  16.     //var ostyle = document.getElementById("style");
  17.     //ostyle.innerHTML += "#box{width:100px;height:100px;background:pink;}";// 内部样式表
  18. </script>
  19. </html>

18.操作样式另外的途径

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8. </head>
  9. <body>
  10.     <div id="box"></div><!-- 行内样式标签属性 -->
  11. </body>
  12. <script>
  13.     // 操作复合属性时，要注意用驼峰写法（去掉-号，-后面的第一个单词大写）
  14.     var oBox = document.getElementById("box");
  15.     oBox.style.width = "200px";
  16.     oBox.style.height = "200px";
  17.     oBox.style.backgroundColor = "pink";
  18. </script>
  19. </html>

19.作业：01-作业-QQ说说发表功能

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="author" content="潭州教育-阿飞老师">
  6.         <title>Title</title>
  7.         <style>
  8.             *{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
  9.             li{ list-style-type: none;}
  10.             #box{
  11.                 position: relative;
  12.                 width: 500px;
  13.                 height: 140px;
  14.                 margin: 50px auto;
  15.                 background: #ccc;
  16.                 border-radius: 5px;
  17.                 padding-top: 10px;
  18.             }
  19.             #txt{
  20.                 display: block;
  21.                 width: 480px;
  22.                 height: 80px;
  23.                 margin: 0 auto;
  24.                 resize: none;
  25.                 border-radius: 5px;
  26.             }
  27.             #box .img{
  28.                 position: relative;
  29.                 width:40px;
  30.                 height: 40px;
  31.                 border: 1px solid #fff;
  32.                 margin: 7px 0 0 10px;
  33.                 cursor: pointer;
  34.             }
  35.             #box .img img{
  36.                 display: none;
  37.                 position: absolute;
  38.                 top: 0;
  39.                 left: 0;
  40.                 width: 100%;
  41.                 height: 100%;
  42.             }
  43.             #box .btn{
  44.                 position: absolute;
  45.                 bottom:10px;
  46.                 right: 10px;
  47.                 width: 80px;
  48.                 height: 30px;
  49.                 background: #f60;
  50.                 color: #fff;
  51.                 font-size: 12px;
  52.                 line-height:30px;
  53.                 text-align: center;
  54.                 font-weight: bold;
  55.                 border-radius: 5px;
  56.                 cursor: pointer;
  57.             }
  58.             #list{
  59.                 width: 500px;
  60.                 margin: 50px auto;
  61.             }
  62.             #list ul li {
  63.                 overflow: hidden;
  64.                 border-bottom: 1px solid #eee;
  65.                 padding: 5px 0;
  66.             }
  67.             #list ul li img{
  68.                 float: left;
  69.                 width: 40px;
  70.                 height: 40px;
  71.             }
  72.             #list ul li p{
  73.                 float: right;
  74.                 width: 440px;
  75.                 font-size: 12px;
  76.                 text-indent: 2em;
  77.             }
  78.         </style>
  79.     </head>
  80.     <body>
  81.         <div id="box">
  82.             <textarea id="txt"></textarea>
  83.             <div class="img">
  84.                 <img src=images/tx1.jpg style="display: block" alt="">
  85.                 <img src="images/tx3.jpg" alt="">
  86.             </div>
  87.             <div class="btn">发表</div>
  88.         </div>
  90.         <div id="list">
  91.             <ul>
  92.                 <!--<li>
  93.                     <img src="images/tx1.jpg" alt="">
  94.                     <p>内容</p>
  95.                 </li>
  96.                 <li>
  97.                     <img src="images/tx3.jpg" alt="">
  98.                     <p>内容</p>
  99.                 </li>
  100.                 <li>
  101.                     <img src="images/tx1.jpg" alt="">
  102.                     <p>内容</p>
  103.                 </li>-->
  104.             </ul>
  105.         </div>
  106.         <script>
  108.             var oBox = document.getElementById("box"),
  109.                 aImg = oBox.querySelectorAll(".img img"),
  110.                 oBtn = oBox.querySelector(".btn"),
  111.                 oUl = document.querySelector("#list ul"),
  112.                 oTxt = document.getElementById("txt"),
  113.                 src = "images/tx1.jpg";
  115.             //点击第 1 个img的时候，让第 2 个显示，自己隐藏
  116.             aImg[0].onclick = function () {
  117.                 aImg[1].style.display = "block";
  118.                 this.style.display = "none";
  119.                 src = aImg[1].src;
  120.             };
  122.             //点击第 2 个img的时候，让第 1 个显示，自己隐藏
  123.             aImg[1].onclick = function () {
  124.                 aImg[0].style.display = "block";
  125.                 this.style.display = "none";
  126.                 src = aImg[0].src;
  127.             };
  129.             //点击发表，往ul里面加内容
  130.             oBtn.onclick = function () {
  131.                 var val = oTxt.value; //获取textarea的内容
  132.                 //if ( val ){
  133.                     oUl.innerHTML += "<li><img src='"+src+"'><p>"+val+"</p></li>";
  134.                     oTxt.value = "";//清空textarea的内容
  135.                 //}
  136.             };
  138.         </script>
  139.     </body>
  140. </html>

20.简单认识数组

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6. </head>
  7. <body>
  8.     <script>
  9.         //数组
  10.         /* var shuzu=[
  11.             50,"shuzu",[7,8,9]
  12.         ];
  13.         alert(shuzu[2][1]);//下标 / 序号 / 索引*/
  14.         /* json的属性可以加引号，也可以不加引号
  15.            在用json来传输数据的时候，属性必须加双引号，并且值一般都是字符串*/
  16.         var shuzu={
  17.             name:"alisa",// 属性可以加""引号，也可以不加，例如此处也可以是"name"
  18.             age:23,
  19.             sex:'女',
  20.         };
  21.         alert(shuzu.age);
  22.     </script>
  23. </body>
  24. </html>

21.判断语句

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8. </head>
  9. <body>
  10.     <div id="box"></div>
  11. </body>
  12. <script>
  13.     /* 条件==>布尔值;判断符：>  <  >=  <=  ==  !=  ===  !==;==只判断值是否一样，===不仅仅判断值，还判断类型是否一样*/
  14.     /* if (3<5) {
  15.         //这里的代码只有当条件为true的时候才执行
  16.     }else{
  17.         //这里的代码只有当条件为false的时候才执行
  18.     }*/
  19.     //第二种写法
  20.     var x = 20;
  21.     if (x>60) {
  22.         alert("x大于60");
  23.     }else if (x>40) {
  24.         alert("x大于40");
  25.     }else if (x>10) {
  26.         alert("x大于10");
  27.     }
  28.     /*当if的条件，运算完后不是布尔值的时候，会被强制性的转换为布尔值。
  29.     ***哪些值，在转换为布尔值的时候为false(数字除了0，其他都为真)
  30.     *   0           (number)
  31.     *   false       (boolean)
  32.     *   ""          (string)
  33.     *   null        (object/null)
  34.     *   undefined   (undefined)
  35.     *   NaN         (number)
  38.     在if里面，能用布尔值做判断的时候，不要用其他的来代替，因为强制数据类型的转换需要耗费时间
  39.     在两个值比较的时候，能用三等（===）判断的时候，就用三等判断
  40.     */
  41. </script>
  42. </html>

22.if的简写方式

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8. </head>
  9. <body>
  10.     <div id="box"></div>
  11. </body>
  12. <script>
  13.     /*  */
  14.     var x;
  15.     //当真语句只有一行的时候，可以去掉大括号，还可以直接写在条件（）后面
  16.     /*if (3<5) {
  17.         x=10;
  18.     }*/
  19.     //if (3<5) x=10;
  20.     //真语句一行，假语句一行，可以采用三目运算写法
  21.     /*if (5<4) {
  22.         x=10;
  23.     }else{
  24.         x=20;
  25.     }*/
  26.     //5<4?x=10:x=20;//条件？真语句:假语句；
  27.     //当三目的真假语句都是给同一个变量赋值的时候，可以更进一步简写
  28.     x=5<4?10:20//条件5<4为真时，结果是10，条件为假时，结果为20
  29. </script>
  30. </html>

23.switch

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8. </head>
  9. <body>
  10.     <div id="box"></div>
  11. </body>
  12. <script>
  13.     var name = "alisa";
  14.     /*if(name==="alisa"){
  15.         alert(name+"超级美")
  16.     }else if(name === "ACR"){
  17.         alert( name +"超级漂亮！");
  18.     }else if(name === "小粉红"){
  19.         alert( name + "超级可爱");
  20.     }else if(name === "小仙女"){
  21.         alert( name + "巴啦啦小魔仙");
  22.     }else{
  23.         alert("变身！");
  24.     }*/
  25.     //全等
  26.     switch ( name ){
  27.         case "alisa":
  28.             alert( name + "超级美");
  29.             break;
  30.         case "ACR":
  31.             alert( name + "超级漂亮！" );
  32.             break;
  33.         case "小粉红":
  34.             alert( name + "超级可爱" );
  35.             break;
  36.         case "小仙女":
  37.             alert( name + "巴啦啦小魔仙" );
  38.             break;
  39.         default:
  40.             alert( "变身！" );
  41.             break;
  42.     }
  43. </script>
  44. </html>

24.图片选项卡切换

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="author" content="潭州教育-阿飞老师">
  6.         <title>Title</title>
  7.         <style>
  8.             *{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
  9.             li{ list-style-type: none;}
  10.             #box{
  11.                 width: 418px;
  12.                 margin: 50px auto;
  13.             }
  14.             #box .title{
  15.                 overflow: hidden;
  16.             }
  17.             #box .title p {
  18.                 float: left;
  19.                 width: 75px;
  20.                 height: 30px;
  21.                 line-height: 30px;
  22.                 text-align: center;
  23.                 font-size: 12px;
  24.                 color: #fff;
  25.                 background: #000;
  26.                 margin-right: 5px;
  27.                 cursor: pointer;
  28.             }
  29.             #box .title p.goudan{
  30.                 background: #f60;
  31.             }
  32.             #box .wrap{
  33.                 position: relative;
  34.                 width: 418px;
  35.                 height: 194px;
  36.                 margin-top: 20px;
  37.             }
  38.             #box .wrap .pic{
  39.                 position: relative;
  40.                 width: 100%;
  41.                 height: 100%;
  42.             }
  43.             #box .wrap .pic img{
  44.                 display: none;
  45.                 position: absolute;
  46.                 top: 0;
  47.                 left: 0;
  48.                 width: 100%;
  49.                 height: 100%;
  50.             }
  51.             #box .wrap .pic img.on{
  52.                 display: block;
  53.             }
  54.             #box .info p{
  55.                 position: absolute;
  56.                 left: 0;
  57.                 width: 100%;
  58.                 height: 20px;
  59.                 line-height: 20px;
  60.                 font-size: 12px;
  61.                 text-align: center;
  62.                 color: #fff;
  63.                 background: rgb(0,0,0);
  64.                 background: rgba(0,0,0,.7);
  65.             }
  66.             #box .info p.infoTop{
  67.                 top: -20px;
  68.             }
  69.             #box .info .infoBot{
  70.                 bottom: -20px;
  71.             }
  72.             #box .btn div{
  73.                 position: absolute;
  74.                 top: 50%;
  75.                 margin-top: -15px;
  76.                 width: 30px;
  77.                 height: 30px;
  78.                 line-height: 30px;
  79.                 background: rgb(0,0,0);
  80.                 background: rgba(0,0,0,.7);
  81.                 color: #fff;
  82.                 text-align: center;
  83.                 cursor: pointer;
  84.             }
  85.             #box .btn div.left{
  86.                 left: 0;
  87.             }
  88.             #box .btn div.right{
  89.                 right: 0;
  90.             }
  91.         </style>
  92.     </head>
  93.     <body>
  94.         <div id="box">
  95.             <div class="title">
  96.                 <p class="goudan">循环切换</p>
  97.                 <p>单边切换</p>
  98.             </div>
  99.             <div class="wrap">
  100.                 <div class="pic">
  101.                     <img class="on" src="./p1.png" alt="">
  102.                     <img src="./p2.png" alt="">
  103.                     <img src="./p3.png" alt="">
  104.                     <img src="./p4.png" alt="">
  105.                     <img src="./p5.png" alt="">
  106.                     <img src="./p6.png" alt="">
  107.                 </div>
  108.                 <div class="info">
  109.                     <p class="infoTop"><span>1</span>/6</p>
  110.                     <p class="infoBot">第<span>一</span>张</p>
  111.                 </div>
  112.                 <div class="btn">
  113.                     <div class="left"> < </div>
  114.                     <div class="right"> > </div>
  115.                 </div>
  116.             </div>
  117.         </div>
  118.         <script>
  120.             var aTitle = document.querySelectorAll("#box .title p"),//获取两个切换按钮
  121.                 oWrap = document.querySelector("#box .wrap"),
  122.                 aBtn = oWrap.querySelectorAll(".btn div"),//两个按钮
  123.                 aInfo = oWrap.querySelectorAll(".info p span"),//两个信息条
  124.                 aImg = oWrap.querySelectorAll(".pic img"),//6个图片
  125.                 xx = 0,//用来表示当前显示的是哪个图片
  126.                 length = aImg.length,
  127.                 flag = true, //我们通过flag的真假，来判断当前处于 循环切换（true） 还是 单边切换（false）
  128.                 arr = ["一" , "二" , "三" , "四" , "五" , "六"];
  130.             aTitle[0].onclick = function () {
  131.                 this.className = "goudan"; //给自己加名字，以显示颜色
  132.                 aTitle[1].className = ""; //去掉另外一个的名字，以清楚颜色
  133.                 flag = true;
  134.             };
  135.             aTitle[1].onclick = function () {
  136.                 this.className = "goudan";
  137.                 aTitle[0].className = "";
  138.                 flag = false;
  139.             };
  141.             //右按钮被点击的时候
  142.             aBtn[1].onclick = function () {
  144.                 //先处理前一个
  145.                 aImg[xx].className = ""; //去掉图片的类名
  147.                 xx++;//xx = xx + 1;
  149.                 //当序号遇到临界值得时候，就会执行这个if
  150.                 if ( xx > length-1 ){
  152.                     //判断当前是处于哪种切换状态
  153.                     if ( flag ){
  154.                         xx = 0;//回到初始0
  155.                     }else{
  156.                         alert("已经是最后以一个了！！");
  157.                         xx = length-1;
  158.                     }
  160.                 }
  162.                 //再处理当前应该显示的
  163.                 aImg[xx].className = "on";//给当前应该显示的添加类名
  164.                 aInfo[0].innerHTML = xx+1;//处理上面的信息条
  165.                 aInfo[1].innerHTML = arr[xx];//处理下面的信息条*/
  166.             };
  168.             //左按钮的点击事件
  169.             aBtn[0].onclick = function () {
  170.                 //先处理前一个
  171.                 aImg[xx].className = ""; //去掉图片的类名
  173.                 xx--;//xx = xx - 1;
  175.                 //当序号遇到临界值得时候，就会执行这个if
  176.                 if ( xx < 0 ){
  178.                     //判断当前是处于哪种切换状态
  179.                     if ( flag ){
  180.                         xx = length - 1;//回到最后
  181.                     }else{
  182.                         alert("已经是第一个了！！");
  183.                         xx = 0;
  184.                     }
  186.                 }
  188.                 //再处理当前应该显示的
  189.                 aImg[xx].className = "on";//给当前应该显示的添加类名
  191.                 aInfo[0].innerHTML = xx+1;//处理上面的信息条
  192.                 aInfo[1].innerHTML = arr[xx];//处理下面的信息条
  193.             };
  194.         </script>
  195.     </body>
  196. </html>

效果图如下：

70

25.for循环

  1. <script>
  2.         for (var i = 0; i <10; i++) {//等价于for (let i = a; i <10; i++)
  3.             if (i===5) {break;}//只要在for循环内执行了Break，那么跳出当前循环，for里面还没有执行的代码不执行
  4.             document.write(i);
  5.         }
  6.         var arr = ["hello","hello","hello","alisa","hello","hello","hello","hello"];
  7.         for (var j = 0; j <= 8; j++) {
  8.             if (arr[j] === "alisa") {
  9.                 continue;//跳过当前循环，for里面还没有执行的代码继续执行
  10.             }
  11.             document.write(j);
  12.         }
  13.         var m=0;
  14.         for(;;){//for括号内必须要这两个分号，但是可以没有条件，只要保证不会形成死循环
  15.             if (m>=5) {
  16.                 break;//合理使用break，以保证不会形成死循环
  17.             }
  18.             console.log(m);
  19.             m++;
  20.         }
  21.     </script>

26.do while循环

  1. <script>
  2.         var i = 5;
  3.         do{
  4.             console(i);
  5.         }while(i<5);
  6.     </script>

27.案例一：for循环生成十个div

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style type="text/css">
  7.         #box div{
  8.             width: 50px;
  9.             height: 50px;
  10.             float: left;
  11.             background: pink;
  12.             margin: 5px;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="box"></div>
  18.     <script>
  19.         var aDiv = document.getElementById("box");
  20.         for(var i=0;i<10;i++){
  21.             aDiv.innerHTML+="<div class='div "+  i +"'></div>";
  22.         }
  23.     </script>
  24. </body>
  25. </html>

28.生成左尖括号的图形

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style type="text/css">
  7.         #box div{
  8.             width: 50px;
  9.             height: 50px;
  10.             background: green;
  11.             position: absolute;
  12.             color: #fff;
  13.             font-size: 12px;
  14.             text-align: center;
  15.             line-height: 50px;
  16.             font-weight: bold;
  17.         }
  18.         #box{
  19.             border: 1px dashed pink;
  20.             position: relative;
  21.             margin: 50px auto;
  22.         }
  23.     </style>
  24. </head>
  25. <body>
  26.     <div id="box"></div>
  27.     <script>
  28.         var oBox = document.getElementById("box"),
  29.             length=8,
  30.             mid=length/2;
  31.         oBox.style.width=(length/2+1)*50+'px';
  32.         oBox.style.height=length*50+'px';
  33.         for(var i=0;i<length;i++){
  34.             if (i<mid) {
  35.                 var oLeft = i*50;
  36.                 var oHeight = i*50;
  37.             }else{
  38.                 var oLeft = (length-1-i)*50;
  39.                 var oHeight = i*50;
  40.             }
  41.             oBox.innerHTML += "<div style='left: "+oLeft+"px;top: "+oHeight+"px;'>"+(i+1)+"</div>";
  42.         }
  43.     </script>
  44. </body>
  45. </html>

29.正立和反立的金字塔

  1. <div id="box"></div>
  2.     <script>
  3.         var length=5,oBox=document.getElementById("box");
  4.         //金字塔形*
  5.         /*for (var i = 0;i<length;i++) {
  6.             for(var k=0;k<length-1-i;k++){
  7.                 oBox.innerHTML+=" ";
  8.             }
  9.             for(var j=0;j<2*i+1;j++){
  10.                 oBox.innerHTML+="*";
  11.             }
  12.             oBox.innerHTML+="<br/>";
  13.         }*/
  14.         //倒金字塔形*
  15.         for (var i = 0;i<length;i++) {
  16.             for(var k=0;k<i;k++){
  17.                 oBox.innerHTML+=" ";
  18.             }
  19.             for(var j=0;j<2*(length-1-i)+1;j++){
  20.                 oBox.innerHTML+="*";
  21.             }
  22.             oBox.innerHTML+="<br/>";
  23.         }                                                        
  24.     </script>

30.二级以下下拉菜单

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style type="text/css">
  7.         *{margin: 0;padding: 0;}
  8.         #box{border: 1px dashed #eee;width: 200px;margin: 50px;}
  9.         #box ul{width: 100%;list-style: none;height: 31px;overflow: hidden;}
  10.         #box ul.show{height: auto;}
  11.         #box ul li{background: #fff;font-weight: bold;font-size: 12px;text-indent: 10px;color: #000;border-bottom: 1px solid #eee;height: 25px;width: 100%;line-height: 25px;cursor: default;}
  12.         #box ul li:hover{background: green;}
  13.         #box ul li.title{background: pink;font-size: 14px;text-indent: 5px;color: #fff;line-height: 30px;height: 30px;cursor: pointer;}
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="box">
  18.         <ul class="show">
  19.             <li class="title">同事</li>
  20.             <li>同事1</li>
  21.             <li>同事2</li>
  22.             <li>同事3</li>
  23.         </ul>
  24.         <ul>
  25.             <li class="title">好友</li>
  26.             <li>好友1</li>
  27.             <li>好友2</li>
  28.         </ul>
  29.         <ul>
  30.             <li class="title">陌生人</li>
  31.             <li>陌生人1</li>
  32.             <li>陌生人2</li>
  33.         </ul>
  34.     </div>
  35.     <script>
  36.         var aUl=document.querySelectorAll("#box ul"),
  37.         aTitle=document.getElementsByClassName('title'),
  38.         length=aTitle.length,
  39.         index=0;
  40.         for(var i=0;i<length;i++){
  41.             //自定义属性
  42.             aTitle[i].goudan=i;
  43.             aTitle[i].onclick=function(){
  44.                 //前一个ul去掉名字
  45.                 aUl[index].className="";
  46.                 //index变成当前序号
  47.                 index=this.goudan;
  48.                 //当前ul添加名字
  49.                 aUl[index].className="show";
  50.             }
  51.         }
  52.     </script>
  53. </body>
  54. </html>

31.作业：九九乘法表

70 1

  1. <style type="text/css">
  2.         *{margin: 0;padding:0;}
  3.         #box span{width: 65px;height: 30px;border: 1px solid blue;display: inline-block;line-height: 30px;text-align: center;font-size: 12px;margin: 5px;}
  4.     </style>
  5. </head>
  6. <body>
  7.     <div id="box"></div>
  8.     <script>
  9.         var aBox = document.getElementById("box");
  10.         for(var i=1;i<=9;i++){
  11.             for(var j=1;j<=i;j++){
  12.                 aBox.innerHTML+="<span>"+i+'*'+j+'='+i*j+"</span>";
  13.             }
  14.             aBox.innerHTML+="<br/>";
  15.         }
  16.         aBox.innerHTML+="<hr/><hr/>";
  17.         for(i=1;i<=9;i++){
  18.             for(j=i;j<=9;j++){
  19.                 aBox.innerHTML+="<span>"+i+'*'+j+'='+i*j+"</span>";
  20.             }
  21.             aBox.innerHTML+="<br/>";
  22.         }
  23.         aBox.innerHTML+="<hr/><hr/>";
  24.         for(i=9;i>0;i--){
  25.             for(j=1;j<=i;j++){
  26.                 aBox.innerHTML+="<span>"+i+'*'+j+'='+i*j+"</span>";
  27.             }
  28.             aBox.innerHTML+="<br/>";
  29.         }
  30.         aBox.innerHTML+="<hr/><hr/>";
  31.     </script>
  32. </body>

32.复选框

效果图如下：

70 2

  1. <div id="box">
  2.         <p>你最喜欢的英雄</p>
  3.         <ul>
  4.             <li>复选框1</li>
  5.             <li>复选框2</li>
  6.             <li>复选框3</li>
  7.             <li class="newcolor">复选框4</li>
  8.             <li class="newcolor">复选框5</li>
  9.             <li>复选框6</li>
  10.             <li>复选框7</li>
  11.             <li>复选框8</li>
  12.         </ul>
  13.     </div>
  14.     <script>
  15.         var aLi = document.querySelectorAll("#box ul li"),
  16.             length = aLi.length;
  17.         for (var i=0;i<length;i++){
  18.             aLi[i].ifcheck=false;
  19.             aLi[i].startClass=aLi[i].className;
  20.             aLi[i].onclick=function(){
  21.                 if (this.ifcheck) {
  22.                     this.className=this.startClass;
  23.                     this.ifcheck=false;
  24.                 }else{
  25.                     this.className="checked";
  26.                     this.ifcheck=true;
  27.                 }
  28.             }
  29.         }
  30.     </script>

33.选项卡的实现

效果图如下：

70 3

代码如下：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style type="text/css">
  7.         *{margin: 0;padding: 0;}
  8.         #box{width: 360px;height: 580px;margin: 50px auto;position: relative;}
  9.         .pic{height: 100%;position: relative;}
  10.         .pic ul{height: 100%;width: 326px;position: absolute;top: 0;left: 0;list-style: none;}
  11.         .pic ul li{width: 100%;height: 100%;display: none;}
  12.         .pic ul li img{display: block;}
  13.         .pic ul li.show{display: block;}
  14.         #box .tab{width:34px;display: block;position: absolute;top: 0;right: 0;}
  15.         #box .tab ul{list-style: none;}
  16.         #box .tab ul li{height: 34px;width: 100%;background:#000;margin-bottom: 10px;color: #fff;text-align: center;line-height: 34px;font-weight: bold;cursor: pointer;}
  17.         #box .tab ul li.on{background:orange;}
  18.         #box .info{
  19.                 position: absolute;
  20.                 left: 0;
  21.                 bottom: 0;
  22.                 width: 326px;
  23.                 height: 30px;
  24.                 background: #000;
  25.                 background: rgba(0,0,0,.5);
  26.                 text-align: center;
  27.                 line-height: 30px;
  28.                 color: #fff;
  29.                 font-size: 14px;
  30.                 font-weight: bold;
  31.             }
  32.     </style>
  33. </head>
  34. <body>
  35.     <div id="box">
  36.         <div class="pic">
  37.             <ul>
  38.                 <li class="show"><img src="./img/g1.jpg"></li>
  39.                 <li><img src="./img/g2.jpg"></li>
  40.                 <li><img src="./img/g3.jpg"></li>
  41.                 <li><img src="./img/g4.jpg"></li>
  42.             </ul>
  43.         </div>
  44.         <div class="tab">
  45.             <ul>
  46.                 <li class="on">1</li>
  47.                 <li>2</li>
  48.                 <li>3</li>
  49.                 <li>4</li>
  50.             </ul>
  51.         </div>
  52.         <p class="info"><span>1</span>/4</p>
  53.     </div>
  54.     <script>
  55.         var aContent=document.querySelectorAll("#box .pic ul li"),
  56.             aTabLi=document.querySelectorAll("#box .tab ul li"),
  57.             length=aContent.length,
  58.             aspan=document.querySelector("#box .info span"),
  59.             apre=0;
  60.         for(var i=0;i<length;i++){
  61.             aTabLi[i].index=i;
  62.             aTabLi[i].onclick=function(){
  63.                 aTabLi[apre].className="";
  64.                 aContent[apre].className="";
  65.                 apre=this.index;
  66.                 aTabLi[apre].className="on";
  67.                 aContent[apre].className="show";
  68.                 aspan.innerHTML=apre+1;
  69.             }
  70.         }
  71.     </script>
  72. </body>
  73. </html>

34.左侧伸缩导航

假定一个元素 div ， div 的className = “div”；this.className+= ‘a’ 之后，div的className变成了 “diva”（注意，这个类名变了，在后面加了个a，如果你的本意是再添加一个a 的类，那么你应该写成 this.className += “ a”（a前有一个空格）），如果你用了this.className = ‘a’, 那么 div的className 就成为了“a”,之前的类名被清除了

效果图如下：

70 4

代码如下：

  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>test</title>
  6.     <style type="text/css">
  7.         *{margin: 0;padding: 0;}
  8.         #box{width: 50px;height: 100%;position: fixed;background: #666666;left: -50px;}
  9.         #box ul{width: 50px;height: 350px;position: absolute;top: 20%;}
  10.         #box ul li{width: 50px;height: 50px;margin-bottom: 40px;position: relative;}
  11.         #box ul li img{position: absolute;top: 7px;left: 7px;}
  12.         #box ul li:hover{background: #ffc;}
  13.         #box ul li .hidden{width: 200px;height: 180px;background: #ffc;border: 1px solid #000;border-left: none;position: absolute;top: -1px;left: 50px;display: none;}
  14.         #box ul li:hover .hidden{display: block;}
  15.         #box .btn{width: 50px;height: 50px;background-image: url("./img/icon.png");background-position: 0px 50px;position: absolute;bottom: 50px;left: 50px;}
  16.         #box .btn.on{background-position: 0 0;left: 0px;}
  17.     </style>
  18. </head>
  19. <body>
  20.     <div id="box">
  21.         <ul>
  22.             <li>
  23.                 <img src="./img/bq1.png" />
  24.                 <div class="hidden"></div>
  25.             </li>
  26.             <li>
  27.                 <img src="./img/bq2.png" />
  28.                 <div class="hidden"></div>
  29.             </li>
  30.             <li>
  31.                 <img src="./img/bq3.png" />
  32.                 <div class="hidden"></div>
  33.             </li>
  34.             <li>
  35.                 <img src="./img/bq4.png" />
  36.                 <div class="hidden"></div>
  37.             </li>
  38.             <li>
  39.                 <img src="./img/bq5.png" />
  40.                 <div class="hidden"></div>
  41.             </li>
  42.         </ul>
  43.         <div class="btn"></div>
  44.     </div>
  45.     <script>
  46.         var oBtn=document.querySelector("#box .btn"),
  47.             oBox=document.getElementById("box");
  48.         oBtn.flag=false;
  49.         oBtn.onclick=function(){
  50.             if (this.flag) {
  51.                 oBox.style.left="-50px";
  52.                 this.className="btn";
  53.                 this.flag=false; 
  54.             }else{
  55.                 oBox.style.left="0px";
  56.                 this.className += " on";
  57.                 this.flag=true; 
  58.             }
  59.         };
  60.     </script>
  61. </body>
  62. </html>

35.QQ下拉面单

效果图如下：

70 5

代码如下：

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8.     <style type="text/css">
  9.         *{margin: 0;padding:0;}
  10.         #box{margin: 50px auto;width: 200px;}
  11.         ul{height: 31px;overflow: hidden;cursor: pointer;}
  12.         ul.new{height: auto;}
  13.         li{width: 190px;height: 30px;color: #fff;font-size: 14px;background: pink;list-style: none;line-height: 30px;border-bottom: 1px solid #000;padding-left: 10px;}
  14.         li.list{width: 180px;height: 25px;color: #000;font-size: 12px;background: #eee;
  15.             line-height: 25px;padding-left: 20px;}
  16.     </style>
  17. </head>
  18. <body>
  19.     <div id="box">
  20.         <ul>
  21.             <li>同事</li>
  22.             <li class="list">同事1</li>
  23.             <li class="list">同事2</li>
  24.             <li class="list">同事3</li>
  25.             <li class="list">同事4</li>
  26.         </ul>
  27.         <ul>
  28.             <li>好友</li>
  29.             <li class="list">好友1</li>
  30.             <li class="list">好友2</li>
  31.             <li class="list">好友3</li>
  32.         </ul>
  33.         <ul>
  34.             <li>同学</li>
  35.             <li class="list">同学1</li>
  36.             <li class="list">同学2</li>
  37.             <li class="list">同学3</li>
  38.         </ul>
  39.     </div>
  40.     <script>
  41.         var aUl=document.querySelectorAll("#box ul"),
  42.             length=aUl.length,
  43.             check=false;
  44.         for(var i=0;i<length;i++){
  45.             aUl[i].onclick=function(){
  46.                 if (check) {
  47.                     this.className="";
  48.                     check=false;
  49.                 }else{
  50.                     this.className="new";
  51.                     check=true;
  52.                 }
  53.             }
  54.         }
  55.     </script>
  56. </body>
  57. </html>

36.动态方法和静态方法

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8. </head>
  9. <body>
  10.     <div id="box"></div>
  11.     <p class="ptext"></p>
  12.     <p class="ptext"></p>
  13.     <script>
  14.         //只认对象，不认属性的，称为：静态方法
  15.         //静态的：document.getElementById();.querySelector();.querySelectorAll();
  16.         // var oBox = document.getElementById("box");
  17.         // oBox.id="new";
  18.         // oBox.innerHTML="我是div";
  19.         //一旦用到这个变量，重新按照规则找一次。称为：动态方法
  20.         //动态的：.getElementsByClassName();
  21.         var oPtext = document.getElementsByClassName("ptext");
  22.         var obj = oPtext[0];
  23.         oPtext[0].className="new";
  24.         obj.innerHTML="div";
  25.     </script>
  26. </body>
  27. </html>

37.算数运算符

  1. <script>
  3.             /*
  5.             + - * / %
  7.             基础数字运算
  9.             当不是数字之间的运算的时候：
  10.                 +
  11.                 -/*% 都可以讲字符串转换为数字（隐式类型转换）
  14.             NaN : Not a Number
  15.                 数据类型：number
  16.                 一般在非法运算的时候才会出现NaN
  18.             isNaN( 参数 )
  19.                 首先尽量把参数转换成数字，然后
  20.                 当参数是 数字，返回 false
  21.                 当参数不是数字，返回 true
  24.              */
  26.             /*var x = 100%3;
  27.             alert( x );*/
  29.             //var x = 5 + {};
  31.             //var x = 5 - "3px";
  33.             //alert( typeof x );
  35.             /*var x = 0xabc;
  37.             if ( isNaN( x ) ){
  38.                 alert( "真！" );
  39.             }else{
  40.                 alert( "假！" );
  41.             }*/
  45.         </script>

38.赋值运算符

  1. <script>
  4.             /*
  5.             +=   -=   *=   /=   %=  ++ --
  6.             */
  8.             //var x = 5;
  10.             /*x += 10; //15   x = x + 10
  11.             x -= 3; //2     x = x - 3
  12.             x *= 2;  //10     x = x * 2
  13.             x /= 4; //1.25  x = x / 4
  14.             x %= 2; //1       x = x % 2*/
  16.             // ++ -- 两个都存在隐式类型转换，会全部转换为数字
  17.             //x ++;
  18.             //x --;
  21.             //x ++;
  22.             //++ x;
  24.             //alert( ++x );
  25.             //alert( x );
  27.             var x = 5;
  29.             //var y = x++;// y=x; x=x+1;
  30.             var y = ++x;// x=x+1; y=x;
  31.             alert( y );
  32.             alert( x );
  35.         </script>

39.逻辑运算符

  1. <script>
  2.             /*
  3.                 &&  与 / 并且
  4.                 ||  或 / 或者
  5.                 !   非 / 取反
  6.              */
  9.             /*
  10.              两边都是布尔值的时候：
  11.                 && 两边都为真，结果才为真，其他都是假
  12.                 || 两边都为假，结果才为假，其他都是真
  13.                 ！ 取反，真变假，假变真
  14.              */
  15.             //var x = true && false; //false
  16.             //var x = 3>2 || 3>8; //true
  17.             //var x = !(3>5); //!false   ===>   true
  18.             //alert( x );
  20.             /*
  21.             两边不一定是布尔值的时候：
  22.                 && 遇到假就停，但是不会进行类型转换
  23.                 || 遇到真就停，但是不会进行类型转换
  24.                 !  隐式类型转换，将后面的数据先转换为布尔值再取反
  25.              */
  27.             //var x = 5 && null && 10;
  28.             //var x = 1 && false && 3;
  29.             //var a;
  30.             //var x = 0 || NaN || null || a;
  31.             //alert( x );
  33.             var x = !3;
  34.             alert( x );
  36.             /*
  37.              ++ -- 先括号 取反 算术运算  判断  &&  || 赋值
  38.              */
  41.         </script>

40.作业：颜色顺序

70 6

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="author" content="">
  6.         <title>study</title>
  7.         <style type="text/css">
  8.             *{margin: 0;padding:0;}
  9.             #box{width: 300px;height: 400px;margin: 50px auto;}
  10.             ul{list-style: none;}
  11.             li{width: 100px;height: 100px;text-align: center;font-weight: bold;font-size: 14px;line-height: 100px;float: left;}
  12.             .l1{background: #ffc0cb;}
  13.             .l2{background: #ffb447;}
  14.             .l3{background: #31ff9d;}
  15.             .l4{background: #bc28ff;}
  16.             li:hover{background: #c8faff;}
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div id="box">
  21.             <ul>
  22.                 <li></li>
  23.                 <li></li>
  24.                 <li></li>
  25.                 <li></li>
  26.                 <li></li>
  27.                 <li></li>
  28.                 <li></li>
  29.                 <li></li>
  30.                 <li></li>
  31.                 <li></li>
  32.                 <li></li>
  33.                 <li></li>
  34.             </ul>
  35.         </div>
  36.         <script>
  37.             var aLi=document.getElementById("box").getElementsByTagName("li");
  38.             length=aLi.length;
  39.             for(var i=0;i<length;i++){
  40.                 aLi[i].className="l"+(i%4+1);
  41.                 aLi[i].innerHTML=i+1;
  42.             }
  43.         </script>
  44.     </body>
  45. </html>

41.作业：刮刮乐

70 7

  1. <!doctype html>
  2. <html>
  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">
  7.     <title>练习</title>
  8.     <style type="text/css">
  9.         *{margin: 0;padding :0;}
  10.         #box{width: 420px;height: 200px;margin: 50px auto;position: relative;}
  11.         #box .content{width: 100%;height: 100%;}
  12.         #box .content img{width: 100%;height: 100%;display: block;}
  13.         #box .cover{width: 100%;height: 100%;position: absolute;top: 0;left: 0;}
  14.         #box .cover span{width: 10px;height: 10px;background: #939393;display: block;float: left;}
  15.         #box .cover span.pt{background: transparent;}
  16.     </style>
  17. </head>
  18. <body>
  19.     <div id="box">
  20.         <div class="content">
  21.             <img src="./images/p1.png">
  22.         </div>
  23.         <div class="cover"></div>
  24.     </div>
  25.     <script>
  26.         var str="";
  27.         var aCover=document.querySelector("#box .cover");
  28.         var aSpan=aCover.getElementsByTagName("span");
  29.         var length=42*20;
  30.         for(var i=0;i<length;i++){
  31.             str+="<span></span>";
  32.         }
  33.         aCover.innerHTML=str;
  34.         for(var i=0;i<length;i++){
  35.             aSpan[i].onmouseenter=function(){
  36.                 this.className="pt";
  37.             }
  38.         }
  39.     </script>
  40. </body>
  41. </html>

42.toString() toFixed()

  1. <script>
  2.             var x=10;
  3.             /*var y=x.toString(16);// toString() 方法可把一个逻辑值转换为字符串，并返回结果。*/
  4.             var y=x.toFixed(2);//一般情况下，用来保留几位小数
  5.             alert(y);
  6.         </script>

43.Math方法

  1. <script>
  2.             /*
  3.             Math()
  4.                 数学方法对象
  5.              */
  7.             //随机数 [0,1)
  8.             // var x=Math.random();
  9.             //取整
  10.             //var x=Math.ceil(5.20);//6  向上取整
  11.             //var x=Math.floor(5.99);//5 向下取整
  12.             //var x=Math.round(-5.84);// -6 四舍五入
  13.             //var x=Math.abs(-10);//绝对值
  14.             //三角函数相关
  15.             //Math.PI // π
  16.             var x=Math.sin(30*Math.PI/180);//三角函数sin   传入 弧度 数值
  17.             alert(x);
  18.         </script>

44.作业：全选

效果图

70 8

代码

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="author" content="">
  6.         <title>study</title>
  7.         <style type="text/css">
  8.             *{margin: 0;padding:0;}
  9.             li{list-style: none;}
  10.             #box{width: 400px;margin: 100px auto;}
  11.             #box ul li{position: relative;width: 100%;height: 30px;border-bottom: 1px solid #fff;cursor: pointer;}
  12.             #box ul li.list:nth-child(odd){background: #99f;}
  13.             #box ul li.list:nth-child(even){background: #96c;}
  14.             #box ul li:hover{background: pink!important;}
  15.             #box ul li.all p{color: #000;}
  16.             #box ul li i{position: absolute;top: 5px;left: 10px;display: block;width: 20px;height: 20px;background-image: url("./img/ckbg1.jpg");}
  17.             #box ul li i.check{background-image: url("./img/ckbg2.jpg");}
  18.             #box ul li p{overflow: hidden;width: 360px;height: 30px;margin-left: 40px;line-height: 30px;font-size: 12px;color: #fff;}
  19.         </style>
  20.     </head>
  21.     <body>
  22.         <div id="box">
  23.             <ul>
  24.                 <li class="list">
  25.                     <i></i>
  26.                     <p>Kevin</p>
  27.                 </li>
  28.                 <li class="list">
  29.                     <i></i>
  30.                     <p>Kevin2</p>
  31.                 </li>
  32.                 <li class="all">
  33.                     <i></i>
  34.                     <p>全选</p>
  35.                 </li>
  36.             </ul>
  37.         </div>
  38.         <script>
  39.             var oBox=document.getElementById("box"),
  40.                 aList=oBox.querySelectorAll(".list"),
  41.                 aListI=oBox.querySelectorAll(".list i"),
  42.                 oAll=oBox.querySelector(".all"),
  43.                 oAllI=oAll.querySelector("i"),
  44.                 length=aList.length;
  45.             for(var i=0;i<length;i++){
  46.                 aList[i].ifcheck=false;//每个.list 都添加自定义属性ifCheck，用来表示是否被选中
  47.                 aList[i].index=i;//自定义属性 存下标
  48.                 aList[i].onclick=function(){
  49.                     if (this.ifcheck) {
  50.                         aListI[this.index].className="";
  51.                         this.ifcheck=false;
  52.                     }else{
  53.                         aListI[this.index].className="check";
  54.                         this.ifcheck=true;
  55.                     }
  56.                     var bool=true;
  57.                     for(var k=0;k<length;k++){
  58.                         if(!aList[k].ifcheck){//!是取反的意思，当括号中的表达式结果为true（真），则运行。
  59.                             bool=false;
  60.                             break;
  61.                         }
  62.                     }
  63.                     oAll.ifcheck=bool;
  64.                     if(bool){
  65.                         oAllI.className="check";
  66.                     }else{
  67.                         oAllI.className="";
  68.                     }
  69.                 };
  70.             }
  71.             oAll.ifcheck=false; //同理，用来表示全选按钮是否勾选
  72.             oAll.onclick=function(){
  73.                 var bool=this.ifcheck;
  74.                 for(var j=0;j<length;j++){
  75.                     if(bool){
  76.                         aListI[j].className="";
  77.                         aList[j].ifcheck=true;
  78.                     }else{
  79.                         aListI[j].className="check";
  80.                         aList[j].ifcheck=false;
  81.                     }
  82.                 }
  83.                 this.ifcheck=!bool;
  84.                 if(bool){
  85.                     oAllI.className="";
  86.                 }else{
  87.                     oAllI.className="check";
  88.                 }
  89.             }
  90.         </script>
  91.     </body>
  92. </html>

45.作业：全选，反选，清空

效果图

70 9

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="author" content="">
  6.         <title>study</title>
  7.         <style type="text/css">
  8.             *{margin: 0;padding:0;}
  9.             #box{width: 500px;margin: 100px auto;}
  10.             ul{overflow: hidden;}/*清除浮动*/
  11.             li{float: left;list-style: none;margin-right: 20px;font-size: 14px;}
  12.             p{overflow: hidden;}
  13.             span{width: 45px;height: 28px;color: #fff;background: #ff6600;font-size: 12px;display: block;text-align: center;line-height: 28px;float: left;margin-right: 6px;cursor: pointer;}
  14.         </style>
  15.     </head>
  16.     <body>
  17.         <div id="box">
  18.             <ul>
  19.                 <li><input type="checkbox" name="" id="inp1"><label for="inp1">西瓜</label></li>
  20.                 <li><input type="checkbox" name="" id="inp2"><label for="inp2">苹果</label></li>
  21.                 <li><input type="checkbox" name="" id="inp3"><label for="inp3">桃子</label></li>
  22.                 <li><input type="checkbox" name="" id="inp4"><label for="inp4">柠檬</label></li>
  23.                 <li><input type="checkbox" name="" id="inp5"><label for="inp5">草莓</label></li>
  24.             </ul>
  25.             <p>
  26.                 <span>全选</span>
  27.                 <span>反选</span>
  28.                 <span>清空</span>
  29.             </p>
  30.         </div>
  31.         <script>
  32.             var aSpan=document.querySelectorAll("span"),
  33.                 aInput=document.querySelectorAll("input"),
  34.                 length=aInput.length;
  35.             aSpan[0].onclick=function(){
  36.                 for(var i=0;i<length;i++){
  37.                     aInput[i].checked=true;
  38.                 }
  39.             }
  40.             aSpan[1].onclick=function(){
  41.                 for(var i=0;i<length;i++){
  42.                     aInput[i].checked=!aInput[i].checked;
  43.                 }
  44.             }
  45.             aSpan[2].onclick=function(){
  46.                 for(var i=0;i<length;i++){
  47.                     aInput[i].checked=false;
  48.                 }
  49.             }
  50.         </script>
  51.     </body>
  52. </html>

46.有名函数，匿名函数

  1. <div id="box">函数</div>
  2.     <script>
  3.         // 有名函数，匿名函数
  4.         //匿名函数：function(){}
  5.         // 有名函数的执行方法：
  6.         // 1.
  7.         document.getElementById('box').onclick=youming;
  8.         // 2.
  9.         // youming();
  10.         function youming(){
  11.             var oBox=document.getElementById('box');
  12.             oBox.innerHTML="有名函数";
  13.         }
  14.     </script>

47.函数定义、函数表达式

  1. <div id="box">函数</div>
  2.     <script>
  3.         // 定义一个有名函数，就叫做函数的定义function youming(){}
  4.         //函数表达式：var youming = function(){}
  5.         // youming();可以写在函数定义前面或者后面
  6.         // youming();
  7.         // function youming(){
  8.         //     var oBox=document.getElementById('box');
  9.         //     alert("有名函数");
  10.         // }
  11.         // youming();
  12.         /*var youming = function(){
  13.             alert("函数表达式");
  14.         }
  15.         youming();*/// youming();只能放在函数表达式后面
  16.         // 函数表达式的特点，可以直接在后面加括号执行
  17.         /*var biaoda=function(){
  18.             alert("函数表达式的特点，可以直接在后面加括号执行")
  19.         }();*/
  20.         //给匿名函数加括号包起来，就是函数表达式的另外一种形式
  21.         /*(function(){
  22.             alert("给匿名函数加括号包起来，就是函数表达式的另外一种形式");
  23.         })();*/
  24.         /*(function(){
  25.             alert("自执行的()可以放在大括号前也可以放在大括号后");
  26.         }());*/
  27.         //在匿名函数前添加+,!,~,-，都是函数表达式的另外一种形式
  28.         +function(){
  29.             alert("在匿名函数前添加+，就是函数表达式的另外一种形式");
  30.         }();
  31.     </script>

48.参数

  1. <script>
  2.         /* 加括号导致的函数执行时，可以传递参数*/
  3.         /*形参，实参，不定参*/
  4.         /*Fn(10);//执行函数时，可以传递实参
  5.         function Fn(x){//形参（相当于函数局部的变量，命名规则和var相同）
  6.             //上面的Fn(10)等价于在此处var x=10;
  7.             alert(x);
  8.         }*/
  9.         //形参/实参都可以有多个，用逗号隔开
  10.         /*sum(80,90);
  11.         function sum(x,y){
  12.             //var x;一个函数里面，形参不要重复，也不要和内部var定义的变量重复
  13.             alert(x+y);
  14.         }*/
  15.         /*sum(3,4,5,6);//实参和形参个数不一定非得一样，但是不一样的时候要注意一一对应的关系。结果为3+4+5
  16.         function sum(x,y,z){
  17.             //var x;一个函数里面，形参不要重复，也不要和内部var定义的变量重复
  18.             alert(x+y+z);
  19.         }*/
  20.         /*sum(3,4);//形参多了的话，没有对应的那些形参。结果为NaN
  21.         function sum(x,y,z){
  22.             //var x;一个函数里面，形参不要重复，也不要和内部var定义的变量重复
  23.             alert(x+y+z);
  24.         }*/
  25.         sum(3,4);//形参多了的话，没有对应的那些形参。结果为NaN
  26.         function sum(x,y,z){
  27.             //给形参设置默认值的方法
  28.             x=x||0;
  29.             y=y||0;
  30.             z=z||0;
  31.             alert(z);
  32.             alert(x+y+z);
  33.         }
  34.     </script>

49.不定参

  1. <script>
  2.         /*不定参*/
  3.         //任意的数据类型都可以当参数
  4.         /*Fn(function(x,y){//实参Fn(function(x,y){//实参alert(x+y);});
  5.             alert(x+y);
  6.         });
  7.         function Fn(a){//形参a
  8.             a(4,5);
  9.         }*/
  10.         /*sum(1,2);
  11.         function sum(){
  12.             //不定参arguments，存储着所有实参的集合
  13.             alert(arguments.length);//获取实参的长度
  14.             alert(arguments[0]);//获取第一个实参
  15.         }*/
  16.         sum(1,8);
  17.         function sum(r,t){
  18.             var x=0;
  19.             for(var i=0,length=arguments.length;i<length;i++){
  20.                 x=x+arguments[i];
  21.             }
  22.             alert(x);
  23.         }
  24.     </script>

50.return

  1. <div id="box"></div>
  2.     <script>
  3.         //return 是javascript里函数返回值的关键字，一个函数内处理的结果可以使用return 返回，这样在调用函数的地方就可以用变量接收返回结果。return 关键字内任何类型的变量数据或表达式
  4.         //函数中的return：1.return 值;返回一个值,这个值单独作为一个整体2.return终止函数的执行：return之后的代码将不再执行.retrun true； 返回正确的处理结果。return false；返回错误的处理结果，终止处理。return；把控制权返回给页面。
  5.         /* 每个函数默认return undefined ,默认是没有返回值的，在有需求的情况下，我们可以修改函数的return*/
  6.         /* var x= Fn();
  7.         alert(x);
  8.         function Fn(){
  9.             var oBox = document.getElementById('box');
  10.             oBox.innerHTML="函数";
  11.             return "阿飞";
  12.         }*/
  13.         Fn()()(5);//首先执行第一个return x;此处的x是一个函数，所以执行函数需要用Fn()(),然后再执行第二个return，还需要再加一个括号。
  14.         function Fn(){
  15.             var x=function(){
  16.                 alert(2);
  17.                 return function(q){
  18.                     alert(q);
  19.                 }
  20.             }
  21.             return x;
  22.         }
  23.     </script>

51.案例-购物车

70 10

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>Title</title>
  6.         <style>
  7.             *{ margin:0; padding:0; font-family:"Microsoft yahei",serif;}
  8.             li{ list-style-type: none;}
  9.             table{
  10.                 width: 1000px;
  11.                 border-collapse: collapse;
  12.                 border-color: #930;
  13.                 margin: 50px auto 0;
  14.                 user-select: none;
  15.             }
  16.             table tr td{
  17.                 width: 250px;
  18.                 height: 100px;
  19.                 text-align: center;
  20.             }
  21.             table tr.title td{
  22.                 height: 50px;
  23.                 background: #c36;
  24.                 color: #fff;
  25.                 font-weight: bold;
  26.                 font-size: 14px;
  27.             }
  28.             table tr td img{
  29.                 display: block;
  30.                 width: auto;
  31.                 height: 70px;
  32.                 margin: 0 auto;
  33.             }
  34.             table tr td.number span{
  35.                 display: inline-block;
  36.                 font-size: 12px;
  37.                 text-align: center;
  38.             }
  39.             table tr td.number span.down,table tr td.number span.add{
  40.                 width: 30px;
  41.                 height: 30px;
  42.                 background: #ddd;
  43.                 line-height: 30px;
  44.                 cursor: pointer;
  45.                 font-weight: bold;
  46.                 font-size: 14px;
  47.             }
  48.             table tr td.number span.num{
  49.                 width: 50px;
  50.                 height: 28px;
  51.                 border-top: 1px solid #ddd;
  52.                 border-bottom: 1px solid #ddd;
  53.                 line-height: 28px;
  54.                 color: #c36;
  55.             }
  56.             .box{
  57.                 width: 1000px;
  58.                 height: 50px;
  59.                 background: #c36;
  60.                 margin: 10px auto;
  61.             }
  62.             .box p{
  63.                 float: right;
  64.                 width: 250px;
  65.                 height: 50px;
  66.                 line-height: 50px;
  67.                 color: #fff;
  68.                 font-size: 14px;
  69.             }
  70.             .box p span{
  71.                 color: #f4e5a9;
  72.                 font-size: 16px;
  73.                 font-weight: bold;
  74.             }
  75.         </style>
  76.     </head>
  77.     <body>
  78.         <table border="1">
  79.             <thead></thead>
  80.             <tbody>
  81.                 <tr class="title">
  82.                     <td>商品</td>
  83.                     <td>单价</td>
  84.                     <td>数量</td>
  85.                     <td>小计</td>
  86.                 </tr>
  87.                 <tr>
  88.                     <td><img src="img/shop1.jpg" alt=""></td>
  89.                     <td class="danjia">8</td>
  90.                     <td class="number"><span class="down">-</span><span class="num">0</span><span class="add">+</span></td>
  91.                     <td class="price">0</td>
  92.                 </tr>
  93.                 <tr>
  94.                     <td><img src="img/shop2.jpg" alt=""></td>
  95.                     <td class="danjia">10</td>
  96.                     <td class="number"><span class="down">-</span><span class="num">0</span><span class="add">+</span></td>
  97.                     <td class="price">0</td>
  98.                 </tr>
  99.                 <tr>
  100.                     <td><img src="img/shop3.jpg" alt=""></td>
  101.                     <td class="danjia">12.5</td>
  102.                     <td class="number"><span class="down">-</span><span class="num">0</span><span class="add">+</span></td>
  103.                     <td class="price">0</td>
  104.                 </tr>
  105.                 <tr>
  106.                     <td><img src="img/shop4.jpg" alt=""></td>
  107.                     <td class="danjia">23</td>
  108.                     <td class="number"><span class="down">-</span><span class="num">0</span><span class="add">+</span></td>
  109.                     <td class="price">0</td>
  110.                 </tr>
  111.             </tbody>
  112.         </table>
  114.         <div class="box">
  115.             <p class="totalPrice">合计费用： <span>0</span> ￥</p>
  116.             <p class="totalNum">已选中商品： <span>0</span> 个</p>
  117.         </div>
  118.         <script>
  120.             var aDown = document.querySelectorAll("table .number .down"),
  121.                 aAdd = document.querySelectorAll("table .number .add"),
  122.                 aNum = document.querySelectorAll("table .number .num"),
  123.                 aDanjia = document.querySelectorAll("table .danjia"),
  124.                 aPrice = document.querySelectorAll("table .price"),
  125.                 oTotalNum = document.querySelector(".box .totalNum span"),
  126.                 oTotalPrice = document.querySelector(".box .totalPrice span"),
  127.                 length=aDown.length;
  129.             for (var i = 0; i < length; i++) {
  130.                 aDown[i].index = i;
  131.                 aAdd[i].index = i;
  133.                 aDown[i].onclick = function(){
  134.                     clickEvent(this , false);
  135.                 };
  136.                 aAdd[i].onclick = function () {
  137.                     clickEvent(this , true);
  138.                 };
  139.             }
  141.             function change( j , num ) {
  142.                 //单个商品小计
  143.                 aPrice[j].innerHTML = aDanjia[j].innerHTML * num;
  145.                 //计算总个数 总价格
  146.                 var tNum = 0;
  147.                 var tPrice = 0 ;
  148.                 for (var i = 0; i < length; i++) {
  149.                     tNum += aNum[i].innerHTML * 1;
  150.                     tPrice += aPrice[i].innerHTML * 1;
  151.                 }
  152.                 oTotalNum.innerHTML = tNum;
  153.                 oTotalPrice.innerHTML = tPrice;
  154.             }
  156.             function clickEvent(This , bool){
  157.                 var index = This.index,
  158.                     num = aNum[index].innerHTML - 0;
  159.                 if (bool){
  160.                     num ++;
  161.                 }else{
  162.                     num --;
  163.                     num = Math.max( num , 0 );
  164.                 }
  165.                 aNum[index].innerHTML = num;
  166.                 change(index , num);
  167.             }
  170.             /*aDown[i].onclick = function () {
  171.              //得到对应的num的值
  172.              var index = this.index,
  173.              num = aNum[index].innerHTML - 0;
  175.              //改变
  176.              num --;
  177.              num = Math.max( num , 0 );//Math.max取 num和0 两者的最大值，控制了num的最小值0
  179.              //重新赋值
  180.              aNum[index].innerHTML = num;
  182.              //改变小计总价等
  183.              change(index , num);
  184.              };
  186.              aAdd[i].onclick = function () {
  187.              //得到对应的num的值
  188.              var index = this.index,
  189.              num = aNum[index].innerHTML - 0;
  191.              //改变
  192.              num ++;
  194.              //重新赋值
  195.              aNum[index].innerHTML = num;
  197.              //改变小计总价等
  198.              change(index , num);
  199.              };*/
  201.         </script>
  202.     </body>
  203. </html>

52.评分

70 11

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="author" content="">
  6.         <title>study</title>
  7.         <style type="text/css">
  8.             *{padding: 0;margin: 0;}
  9.             #box{width: 310px;height: 75px;margin: 30px auto;line-height: 75px;}
  10.             .pinfen{color: red;float: left;}
  11.             ul{float: left;height: 20px;width: 100px;margin-top: 27px;}
  12.             li{list-style: none;background-image: url(./image/star.png);width: 20px;height: 20px;float: left;cursor: pointer;}
  13.             li.new{background-position: 0 -27px;}
  14.             .note{border: 1px #eee solid;width: 120px;height: 70px;float: right;line-height: 20px;}
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <div id="box">
  19.             <span class="pinfen">星级评分：</span>
  20.             <ul>
  21.                 <li></li>
  22.                 <li></li>
  23.                 <li></li>
  24.                 <li></li>
  25.                 <li></li>
  26.             </ul>
  27.             <p class="note">提示：请认真给当前文章打分</p>
  28.         </div>
  29.         <script>
  30.             var aLi=document.querySelectorAll("li"),
  31.                 arr=['提示：请认真给当前文章打分','很差','较差','还行','推荐','力荐'],
  32.                 aP=document.querySelector("p"),
  33.                 length=aLi.length,
  34.                 b=-1;
  35.             for(var i=0;i<length;i++){
  36.                 aLi[i].index=i;
  37.                 aLi[i].onmouseenter=function(){
  38.                     change(this.index);
  39.                 }
  40.                 aLi[i].onmouseleave=function(){
  41.                     change(b);
  42.                 }
  43.                 aLi[i].onclick=function(){
  44.                     b=this.index;
  45.                     change(b);
  46.                 }
  47.             }
  48.             function change(n){
  49.                 aP.innerHTML=arr[n+1];
  50.                 for(var i=0;i<length;i++){
  51.                     aLi[i].className="";
  52.                 }
  53.                 for(var i=0;i<=n;i++){
  54.                     aLi[i].className="new";
  55.                 }
  56.             }
  57.         </script>
  58.     </body>
  59. </html>

53.地址栏功能

70 12

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta name="author" content="">
  6.         <title>study</title>
  7.         <style type="text/css">
  8.             *{padding: 0;margin: 0;}
  9.             #box{width: 100%;height: 210px;}
  10.             li{list-style: none;border-bottom: 1px solid blue;margin-left:46px;height: 46px;line-height: 46px;font-size: 12px; }
  11.             li.new{height: 35px;line-height: 35px;}
  12.             .text{float: left;}
  13.             .inputtext{float: left;color: #eee;margin-top: 15px;display: none;}
  14.             .button{float: left;background-color: #000;width: 50px;height: 25px;line-height: 25px;text-align: center;color: #fff;margin-top: 10px;margin-left: 20px;cursor: pointer;}
  15.         </style>
  16.     </head>
  17.     <body>
  18.         <div id="box">
  19.             <ul>
  20.                 <li><p class="text">点击修改</p><input type="text" name="" width="170" height="20" value="点击修改" class="inputtext"><p class="button">修改</p></li>
  21.                 <li><p class="text">点击修改</p><input type="text" name="" width="170" height="20" value="点击修改" class="inputtext"><p class="button">修改</p></li>
  22.                 <li><p class="text">点击修改</p><input type="text" name="" width="170" height="20" value="点击修改" class="inputtext"><p class="button">修改</p></li>
  23.                 <li><p class="text">点击修改</p><input type="text" name="" width="170" height="20" value="点击修改" class="inputtext"><p class="button">修改</p></li>
  24.             </ul>
  25.         </div>
  26.         <script>
  27.             var aButton=document.querySelectorAll(".button"),
  28.                 aText=document.querySelectorAll(".text"),
  29.                 aInput=document.querySelectorAll(".inputtext"),
  30.                 aLi=document.querySelectorAll("li"),
  31.                 length=aButton.length;
  32.             for(var i=0;i<length;i++){
  33.                 aButton[i].index=i;
  34.                 var flag=true;
  35.                 aButton[i].onclick=function(){
  36.                     index=this.index;
  37.                     if (flag) {
  38.                         aButton[index].innerHTML="确认";
  39.                         aText[index].style.display="none";
  40.                         aInput[index].style.display="block";
  41.                         aLi[index].className+=" new";
  42.                         flag=false;
  43.                     }
  44.                     else{
  45.                         index=this.index;
  46.                         aButton[index].innerHTML="修改";
  47.                         aText[index].innerHTML=aInput[index].value;
  48.                         aText[index].style.display="block";
  49.                         aInput[index].style.display="none";
  50.                         aLi[index].className="";
  51.                         flag=true;
  52.                     }
  53.                 }
  54.             }
  55.         </script>
  56.     </body>
  57. </html>

54.作用域

  • javascript解析顺序

  1. （定义）先解析var、function、参数；

    1. 该步骤的var只定义变量，后面的 = 赋值不解析
    2. 该步骤的函数只定义函数，函数的执行不解析
    3. 重名的只留一个，var和函数重名函数优先

  2. （执行）再从上至下执行其他代码。

    • 作用域

  3. 最大的作用域为script标签；

  4. 遇到函数执行产生新的作用域；
  5. 产生新的作用域后同样按照定义-执行的规则解析该作用域的代码；
  6. 子作用域可以访问父作用域的参数和变量，反之不行；

  7. 每个作用域要访问变量时，先从自身找，找不到再往上一级找。

发表评论

表情：
评论列表 （有 0 条评论，405人围观）

还没有评论，来说两句吧...

相关阅读

    相关 第二阶段冲刺03

    　　昨天干了什么：完成了页面间跳转后数据刷新功能 　　今天要做什么：完成下拉页面刷新功能，如果可以再使用定时器，使得页面5秒刷新一次 　　遇到什么困难：下拉页面刷新使用了函

    爱被打了一巴掌爱被打了一巴掌/ 0 赞/ 481 阅读

    相关 第二阶段冲刺-08

    昨天：将日历设计成了自定义对话框 遇到的问题：未选择时间，类型是仍可以进行添加 今天：设置限制，未选择时间类型时不可以进行输入添加 转载于:https://www.cnb

    迷南。迷南。/ 0 赞/ 584 阅读

    相关 第二阶段冲刺-07

    昨天：完成了每个界面的限制 遇到的问题：在日历界面如果不点击日期直接记账的话，消费记录时间为空 今天：在记一笔界面添加日历对话框 转载于:https://www.cnbl

    痛定思痛。痛定思痛。/ 0 赞/ 550 阅读

    相关 第二阶段冲刺7

    1、我昨天的成就：完成了注册账号后，数据能添加到数据库中 2、遇到什么困难：数据库添加的语句遇到很多问题 3、今天的任务：判断注册后用户名是否是与数据库中的用户名重复，

    我就是我我就是我/ 0 赞/ 399 阅读

    相关 第二阶段冲刺-08

    昨天：将日历设计成了自定义对话框 遇到的问题：未选择时间，类型是仍可以进行添加 今天：设置限制，未选择时间类型时不可以进行输入添加 转载于:https://www.cnb

    向右看齐向右看齐/ 0 赞/ 493 阅读