第二阶段（day04）javascript2

sunshine195

已于 2022-09-04 20:09:33 修改

阅读量235

点赞数

分类专栏：第二阶段文章标签： java

于 2022-03-31 17:08:47 首次发布

本文链接：https://blog.csdn.net/sunshine195/article/details/123878006

版权

第二阶段专栏收录该内容

27 篇文章 2 订阅

订阅专栏

1.Bom浏览器对象模型

1.1Window对象

Window 对象是全局对象，可直接调用其方法和属性

Window对象的一些方法和属性可省略不写

如 window.document 等同于 document

window.alert() 等同于 alert()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" />
    </body>
    <script>
        console.log(window.document);      //用document可在控制台看到完整的代码   document.getElementById("")从文档里根据id查找元素
        //document属于window对象，windows可省略不写
        
        //alert("警告框");     效果：页面弹出一个框，写着警告，还有一些提示信息。之前用来做代码调试，因为以前开发者工具不好用
        //现在不用了，弹出警告框后，页面会转圈。（js执行引擎是单线程，警告框会阻止线程的运行，即程序卡在这里，后面不在运行）
        //这东西现在只在教程里用用，公司里用这个，会有人找你喝喝茶
        
        //prompt("请输入");    效果：页面弹出一个框，写着请输入，下面有个文本框，还有一些提示信息。同样会阻止js引擎运行
        //页面里的输入框
        
        //confirm("确定离开么 还有xx分钟就可以领取大奖")   效果：页面弹出一个框，写着确定离开么 还有xx分钟就可以领取大奖，还有一些
        //提示信息。同样会阻止js引擎运行
        //页面里的确认框
    
    </script>
</html>

1.2History对象

表示历史记录，常用方法：

1.back()：加载上一个浏览的文档

2.forward()：加载下一个浏览过的文档

3.go(n)：n为整数，跳转第n个浏览过的文档

n==0 则刷新当前页面

n>0 则向前跳转到第n个文档

n<0 则向后跳转到第n个文档

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="go0" οnclick="myBack()" />
    </body>
    <script>
    
    //浏览器历史记录的按钮实际上就是前进和后退按钮，故可用js可控制前进后退按钮
    //浏览器里的前进后退是在浏览的历史记录里跳转，故有前一个文档才能后退。
     
        function myBack(){
            //history.back();     加载上一个浏览的文档(浏览器里的后退)
            //history.forward();  加载下一个浏览过的文档（浏览器里的前进）
            history.go(0);        //刷新页面，相当于在第0个历史记录里跳转
        }
    
    </script>
</html>

1.3Location对象

常用属性和方法：

Href属性与浏览器地址栏直接输入地址效果相同

Reload（）方法与浏览器刷新按钮效果相同

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="跳转" οnclick="myHREF()" />
        <input type="button" value="刷新页面" οnclick="myRefresh()" />
    </body>
    <script>
    //想控制页面跳转，调用href属性，赋值和a标签一样，相对路径，相对根路径，绝对路径。
    //之前想让页面跳转，通过代码用a标签，或者表单提交。 
    //可将其看做更自由的a标签，可让所有元素称为a标签。
    //使用location.href传值用的get方式（有url拼接的默认get方式）
    
        function myHREF(){
            location.href = "https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=123&fenlei=256&rsv_pq=b3903db40004d883&rsv_t=26dfCMNmJN8OLu8M%2F6R0rmWsUMQJPAWUKGi369qTEIZJP7hLs1UlUXlvnmI&rqlang=cn&rsv_enter=0&rsv_dl=tb&rsv_btype=i&inputT=1073&rsv_sug4=1297"
        }
        
    //浏览器的刷新按钮通过location对象调用reload属性
        function myRefresh(){
            location.reload();      //刷新当前页面
        }
    
    </script>
</html>

1.4Document对象

常用属性和方法：

1.Title 可以设置文档的title

2.getElementById() 返回对拥有指定id的第一个对象的引用

3.getElementsByTagName() 返回带有指定名称的对象集合

4.getElementsByName() 返回带有指定名称的对象集合

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="mycls">div1</div>
        <div>div2</div>
        <span class="mycls">span1</span>
        <input id="mytext" type="text" />
        
        <hr />
        <input name="hobby"  type="checkbox" value="1" />
        <input name="hobby"  type="checkbox" value="2" />
        <input name="hobby"  type="checkbox" value="3" />
        
        <div class="mytest">
            <p>鹅鹅鹅</p>
            <p>曲项向天歌</p>
            <div id="mydiv">
                <p>拔毛浮绿水</p>
                <p>红掌拨清波</p> 
            </div>
            
        </div> 
        
        <!-- 让文本框1,2,3的颜色改变，先找到元素，故加特征，最简单的特征就是用div包起来，再给div加个id。 -->
        <div id="aimdiv">
            <input type="text" value="文本框1" />
            <input type="text" value="文本框2" /> 
            <input type="text" value="文本框3" />
            <input type="button" value="按钮" />
            <input type="checkbox" value="123" />
        </div>
        
        
    </body>
    <script>
    //document对象属于windows对象，代表当前文档
    
    //带s的通常是查找一组元素

        document.title="mypage";     //document.title   操作title标签（页面左上角的标题）
        
        console.log(document.getElementById("mytext"));   //需要元素有id  getElementById，通过id找到唯一的一个元素
        //id属性使用时有一个规则，给页面元素起id时，值不能重复。故，做批量操作或多元素操作不方便
        
        console.log(document.getElementsByTagName("div"));  //通过标签名查找元素，需要传入标签名 
        
        
        console.log(document.getElementsByName("hobby"));  // 通过name属性查找元素
        
        
        console.log(document.getElementsByClassName("mycls")); //通过class的值查找元素
        
        
        console.log(document.getElementById("mydiv").getElementsByTagName("p"));  //在某个元素中查找元素
        

        //让文本框1,2,3的颜色改变    通过元素属性筛选元素
        var eles = document.getElementById("aimdiv").getElementsByTagName("input"); //找到5个input标签
        for(var i = 0;i<eles.length;i++){   
            if(eles[i].type=="text"){      //判断type是否为text，是则变为红色
                eles[i].style.color="red";
            }
        }
    </script>
</html>

1.5Window对象常用方法

1.Open（）打开新窗口

2.Close（）关闭窗口

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="打开新窗口" οnclick="myOpen()" />
        <input type="button" value="关闭窗口" οnclick="myClose()" />
    </body>
    <script> 
        //打开新窗口就是通过windows对象调open。需要传入几个参数：1.打开窗口的地址url  2.给窗口起一个名字  
        //3.一些可选项，比如窗口大小，所在位置，是否要滚动条，工具栏等    后两个参数选填，第一个必填
        //这里后面两个参数给了空值
        //效果和a标签的href的一个属性值类似，主要区别是：第三个参数窗口特征可设置参数
        //open主要用来做广告用的
        /* function myOpen(){
            window.open("2history对象.html","","");
        } */
        
        
        //关闭窗口，没有参数。谁调用，就关谁（windows对象调用的，windows对象代表当前窗口）
        /* function myClose(){
            window.close();
        } */
        
        
        //如何关闭新窗口，而不是当前窗口，只要获得新窗口对象，就可关闭。
        //新窗口对象通过open的返回值获取，但js里有变量的作用域，1全局 2函数内
        //函数内定义的变量只能在自己函数中生效，故为了给myClose()函数新窗口对象，应用全局变量
        //注：全局只针对当前页面生效
        var newWin;
        function myOpen(){
            newWin =  window.open("2history对象.html","","");   
        }
        
        
        function myClose(){
            newWin.close();     //此时关闭的是新窗口
        } 
    
    </script>
</html>

3.定时函数

<body>
        <input type="button" value="开始定时触发" οnclick="myStart()" />
        
    </body>
    <script>
        //一旦开启定时函数，他就会定时自动帮我执行javascript代码,有两个定时函数： 
        //1.setInterval（fun,time）定时重复不断地执行   clearInterval  停止
        //两个参数，1.要执行的函数对象  2.间隔多长时间去执行，是毫秒数

        //2.setTimeout（fun,time）定时执行一次   clearTimeout  停止
    
        function myLog(){
        console.log("1");      
        } 
        
        setInterval（"myLog()",1000);   //页面加载结束后触发该定时函数，该定时函数每隔一秒执行一次myLog()函数。
        //这是第一种写法，引号里加函数名加括号
        
        //setInterval（myLog,1000);   这是第二种写法，函数名即可，不加引号和括号，不推荐，看起来难受
        
        /* setInterval（function(){    这是第三种写法，用匿名函数
            console.log("1");
        }
        ,1000); */
        
        //通常定时函数通过按钮触发，故写法上会套在一起
        function myStart(){
            setInterval（function(){   
                console.log("1");
            },1000); 
            
        //但要注意，按钮点完之后马上禁用，不然定时重复不断地执行。

<body>
        <input type="button" value="开始定时触发" οnclick="myStart(this)" />
        
    </body>
    <script>
        //但要注意，按钮点完之后马上禁用，不然定时重复不断地执行。
        function myStart(myObj){
            myObj.disabled = true;    //按钮禁用
            setInterval(function(){   
                console.log("1");
            },1000);

<body>
        <input type="button" value="开始定时触发" οnclick="myStart(this)" />
        <input type="button" value="停止定时" οnclick="myStop()" />
    </body>
    <script>

        //setTimeout用法和setInterval一样
            setTimeout(function(){
                console.log(3);
            },1000); 
        
        
            var taskid;
            function myStop(){
                clearInterval(taskid);   //停掉定时，参数是Interval的id，其id从开启的返回值获得。同样提升作用域
                //clearTimeout() 是停掉setTimeout定时，参数是Timeout的id
            }
            
            function myStart(myObj){
                myObj.disabled = true;
                taskid = setInterval(function(){
                    console.log("2");
                },1000); 
               }
        </script>

案例----页面定时跳转：

<body>
        <h3><span id="myTimeSpan">3</span>秒后自动跳转.....</h3>   <!-- h3标签是为了让字大点 -->
        <!-- 将3单独包裹，做3,2,1的效果 -->
    </body>
    <script> 
    
        setTimeout(function(){
            location.href="/xxxx";    //跳转
        },3000)
        
        setInterval(function(){     //整个过程，每一秒执行一次
            var oldval = parseInt(document.getElementById("myTimeSpan").innerHTML);  //获得文本里的内容3，并将
            //字符串转数字
            oldval--;
            document.getElementById("myTimeSpan").innerHTML = oldval;  //减完以后重新赋值
        },1000)

    </script>

案例---图片隐藏（解决地鼠自动往外冒出的问题）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .myimg{
                display: none;  /* 图片隐藏 */
            }
        </style>
    </head>
    <body>
        <img id="myimg" class="myimg" src="img/pic1.png" />
    </body>
    <script>
        setInterval(function(){    //第一层定时函数，2s后使图片显示
            document.getElementById("myimg").style.display = "inline";
               setTimeout(function(){        //第二层定时函数，1s后图片隐藏
                  document.getElementById("myimg").style.display = "none"; 
               },1000);
        },2000);
        
        
    </script>
</html>

案例---随机数（解决图片随机出现问题）：

<script>
        //console.log(Math.random());  获取0-1间的小数，包头不包尾
        //打地鼠有25张图片，获得0-24间的随机整数
        console.log(parseInt(Math.random()*25));
    </script>

案例---通过js代码生成界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="mydiv">
            123
        </div>
        <div><img id="img5" class="myimg" src="img/pic1.png" /> </div>
        
    </body>
    <script>
        for(var i=0;i<25;i++){   //生成25个图片
            document.getElementById("mydiv").innerHTML += '<div><img id="img'+ i +'" class="myimg" src="img/pic1.png" /> </div>';
        }
        
    </script>
</html>

2.文档对象模型（dom树结构）

文档对象模型简介：javascript将整个文档结构描述成了树状模型，根节点是html，套着head和body。head和body又有各自的标签，通过节点与节点之间的关系将元素查找到。

HTML 文档中的每个成分都是一个节点（Node）。

DOM 是这样规定的：整个文档是一个文档节点，每个 HTML 标签是一个元素节点（通常叫做element），包含在 HTML 元素中的文本是文本节点，每一个 HTML 属性是一个属性节点，注释属于注释节点。常用的是元素节点（用document.elementBy...获取）；文本节点一般是双标签中的内容（用innerHTML操作文本节点）；属性节点通常用元素.属性去操作。

每个节点都拥有包含节点某些信息的属性。（比如：元素节点的节点名称就是标签名称）

nodeName（节点名称）：元素节点的 nodeName 是标签名称，属性节点的 nodeName 是属性名称，文本节点的 nodeName 永远是 #text（文本节点的节点名称是#加上text），文档节点的 nodeName 永远是 #document。（故控制台输出#document就是输出了文档节点）

nodeValue（节点值）：对于文本节点，nodeValue 属性包含文本；对于属性节点，nodeValue 属性包含属性值。

nodeType（节点类型）：元素 1 、属性 2、文本 3、注释 8、文档 9（不同数字代表不同节点类型）

常用方法和属性：

1.获取元素节点

getElementById():返回对拥有指定id的第一个对象的引用

getElementsByTagName():返回带有指定名称的对象集合

getElementsByName():返回带有指定名称的对象集合

<body>
        <div id="aimdiv">
            <div class="mydiv">
                我的标签1
            </div>
            <div id="mydiv">
                我的标签2
            </div>
            <div class="mydiv">
                我的标签3
            </div>
        </div>
        <input id="mytext" type="text" value="abc"/>
    </body>
    <script>
        
        console.log(document.getElementById("mydiv"));        //通过id获取元素
        console.log(document.getElementsByTagName("div"));     //通过标签名获取元素 
        console.log(document.getElementsByClassName("mydiv"));  //通过class属性获取元素
    </script>

2.根据节点层次关系获取节点（属性不是方法，属性是不带括号的）（这几个都是属性)

parentNode：返回节点的父节点

childNodes：返回子节点集合,childNodes[i]

firstElementChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点

lastElementChild：返回节点的最后一个子节点

nextElementSibling：下一个节点

previousElementSibling：上一个节点

<body>
        <div id="aimdiv">
            <div class="mydiv">
                我的标签1
            </div>
            <div id="mydiv">
                我的标签2
            </div>
            <div class="mydiv">
                我的标签3
            </div>
        </div>
        <input id="mytext" type="text" value="abc"/>
    </body>
    <script>
        
        console.log(document.getElementsByClassName("mydiv")[0].parentNode);  //第一个class属性为mydiv的节点的父节点。注意parentNode使用时不要加括号，是一个属性，不是方法。
        
        console.log(document.getElementById("aimdiv").childNodes);   //返回子节点集合（注：div标签间会有一些空白，属于文本节点，不想要这些空白节点，就不要用childNodes，用带element的属性）
        
        console.log(document.getElementById("aimdiv").lastElementChild);     //获取最后一个元素子节点
        console.log(document.getElementById("aimdiv").lastChild);     //获取最后一个子节点
        console.log(document.getElementById("mydiv").previousElementSibling);   //获取上一个元素节点

3.节点属性操作

getAttribute() 获取某个节点的属性值

节点对象.getAttribute( "属性名" );

setAttribute() 设置某个节点的属性值

节点对象.setAttribute( "属性名", "属性值" );

<body>
        <input id="mytext" type="text" value="abc" />
    </body>
    <script>
       //之前的对元素属性的操作  找到元素，然后点属性。   写操作就是将新属性值赋给该属性。 读操作就是将属性赋给新的变量
       //document.getElementById("mytext").value = "123";
       
       //也可使用方法的方式  getAttribute() 获取属性   setAttribute() 设置属性值
       document.getElementById("mytext").setAttribute("value","123456");  
       document.getElementById("mytext").getAttribute("value");   //取值只需传入属性名
       
    </script>

4.文本节点（比较特殊，单独拿出）操作

<body>
        <div id="aimdiv">
            <div class="mydiv">
                我的标签1
            </div>
            <div id="mydiv">
                我的标签2
            </div>
            <div class="mydiv">
                我的标签3
            </div>
        </div>
    </body>
    <script>
       //.innerHTML  可解析html标签
       //.innerText   不能解析html标签，纯文本
       
       //document.getElementById("mydiv").innerHTML = "<h1>test</h1>";  可带标签，将文本替换
       //（我的标签2被修改为test，并增加了标签h1的效果）
       
       document.getElementById("mydiv").innerText = "<h1>test</h1>";  //将"我的标签2"替换为" <h1>test</h1>"
       
    </script>

2.1Dom动态操作相关方法

createElement() 创建元素

appendChild() 追加元素

insertBefore() 在某元素前追加元素

cloneNode(bol) 复制元素

removeChild() 删除元素

<body>
        <input type="button" value="添加元素" οnclick="addEle()" />  
        <input type="button" value="添加元素2" οnclick="addEle2()" />
        <input type="button" value="删除元素" οnclick="delEle()" />
        <ul id="myul">
            <li id="myli"><input type="button" value="女足夺冠"/> </li>
        </ul>
    </body>
    <script>
    
        function addEle(){    //功能：点击添加元素按钮，在无序列表中增加一条新闻
            //添加新元素流程：1.创建元素createElement  2.把元素填入页面中appendChild，参数是新创建的元素
            
            /* var newEle = document.createElement("li");   1.创建元素，但只会出现在内存里
            newEle.innerHTML="男足(没有)夺冠"; */    //3.写文本，用innerHTML属性
            //document.getElementById("myul").appendChild(newEle);   2.把元素填入页面中appendChild，参数是新创建的元素，但此时只多出一个点，没有文本

            //想把新添加的新闻放到女足新闻前面，用insertBefore
            //document.getElementById("myul").insertBefore(newEle,document.getElementById("myli"));
            
            
            //将女足新闻做成按钮，新添加的新闻也做成按钮：（多了一层嵌套效果）
            var newEle = document.createElement("input");    //1.创建input标签
            newEle.setAttribute("type","button");            //6.input标签通过type属性决定各种类型（也可newEle.type = "button"）;
            newEle.value="男足(没有)夺冠";                    //2.写标签内容
            var newli = document.createElement("li");        //3.创建li元素
            newli.appendChild(newEle);                       //4.将input放在li里 
            document.getElementById("myul").appendChild(newli);   //5.将准备好的li整个放到ul里
        }
         
        function addEle2(){
            
            //cloneNode(bol)   克隆方法，参数为布尔值。bol决定子元素是否一起复制。若为false，则指复制了列表的图标。
            //为true。才会将女足新闻整体复制。    不写布尔值，默认false
            var newEle = document.getElementById("myli").cloneNode(true);
            document.getElementById("myul").appendChild(newEle);
            
        }
        
        function delEle(){
            //removeChild删除节点
            //通过元素结构 找到需要删除的子节点
            //删除最后一个
            document.getElementById("myul").removeChild(document.getElementById("myul").lastElementChild);
        }

    </script>

dom动态操作简单的方法：

<body>
        <input type="button" value="添加元素" οnclick="addEle()" />
        <input type="button" value="删除元素" οnclick="delEle()" />
        <ul id="myul">
            <li id="myli"><input type="button" value="女足夺冠"/> </li>
        </ul>
    </body>
    <script>
    /* 
     添加或者替换时 把元素当文本操作
     删除时 使用动态dom的删除方式
     
     */
        //操作ul时，里面的内容都是文本。且innerHTML可解析标签
        function addEle(){
            document.getElementById("myul").innerHTML +=  '<li id="myli"><input type="button" value="女足夺冠2"/> </li>';
        }
        
        function delEle(){
            document.getElementById("myul").removeChild(document.getElementById("myul").lastElementChild);
        }
    
    </script>

2.2 Dom操作表格相关方法

Js中把table描述成二维数组有rows数组和cells数组可以根据行列下标找到对应的单元格内容

insertRow(idx) 添加行

insertCell(idx) 新增单元格（列）

deleteRow(idx) 删除行

    <body>
    <input type="button" value="添加一行数据" οnclick="addNewRow()" />
    <table id="mytable" border="1">
        <caption>用户信息表</caption>
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>小明</td>
                <td>25</td>
            </tr>
            <tr>
                <td>2</td>
                <td>小白</td>
                <td>25</td>
            </tr>
            <tr>
                <td>3</td>
                <td>小光</td>
                <td>29</td>
            </tr>
        </tbody>
    </table>
    </body>
    <script>
        function addNewRow(){
            /* 
             把table描述成二维数组
             rows    行
             cells   单元格
             insertRow() insertCell() 参数都是索引
             */
            console.log(document.getElementById("mytable").rows[3].cells[1].innerHTML);   //4行2列----小光
            
            //var newTR = document.getElementById("mytable").insertRow(0);   第1行添加
            //var newTR = document.getElementById("mytable").insertRow(4);   最后一行添加
            //但再想在最后一行添加要改索引，不方便，可用document.getElementById("mytable").rows.length。
            var newTR = document.getElementById("mytable").insertRow(document.getElementById("mytable").rows.length);
            
            //列一般定死，不会再扩
            var newTd1 = newTR.insertCell(0);
            var newTd2 = newTR.insertCell(1);
            var newTd3 = newTR.insertCell(2);
            newTd1.innerHTML="test";
            newTd2.innerHTML="test";
            newTd3.innerHTML="test";
        }
    
    </script>

用innnerHTML方式简化：

<body>
        <input type="button" value="添加一行数据" οnclick="addNewRow()" />
        <input type="button" value="删除最后一行" οnclick="delRow()" />
        <hr />
        <input id="myCode" type="text" placeholder="编号" />
        <input id="myName" type="text" placeholder="姓名" />
        <input id="myAge" type="text" placeholder="年龄" />
        <table id="mytable" border="1">
            <caption>用户信息表</caption>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody id="mytbody">
                <tr>
                    <td>1</td>
                    <td>小明</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>小白</td>
                    <td>25</td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>小光</td>
                    <td>29</td>
                </tr>
            </tbody>
        </table>
    </body>
    <script>
            function addNewRow(){

                var myCode = document.getElementById("myCode").value;
                var myName = document.getElementById("myName").value;
                var myAge = document.getElementById("myAge").value;
                
                document.getElementById("mytbody").innerHTML+='<tr>'
                                                                +'<td>'+myCode+'</td>'
                                                                +'<td>'+myName+'</td>'
                                                                +'<td>'+myAge+'</td>'
                                                                +'</tr>'
            }
            
            function delRow(){
                //删除最后一行
                //document.getElementById("mytable").rows.length-1 数组长度-1 正好是最后一条数据的idx
                document.getElementById("mytable").deleteRow(document.getElementById("mytable").rows.length-1);
            }
            
        
        </script>

3.Js常用对象

3.1String

跟java类似，eg：

IndexOf 查找指定字符

subString 截取字符串

Substr 截取字符串

Split 分割

toUppercase 转大写

<script>
        var myStr = "abc123efcg";
        
        //indexOf()   返回指定字符索引出现位置(从前往后找一次出现的索引)
        console.log(myStr.indexOf("c"));  //2
        
        //lastIndexOf()  从后往前找指定字符第一次出现索引位置。若找不到返回-1
        console.log(myStr.lastIndexOf("ca"));   //-1
        
        //substring() 截取     两个参数:起，止的索引，包头不包尾
        console.log(myStr.substring(2,4));    //c1
        //substr()    两个参数：起,个数
        console.log(myStr.substr(2,4));   //c123
        
        //replace()     将第一个参数替换为第二个参数
        console.log(myStr.replace("ef","oo"));   //abc123oocg
        
        
        
        //split()分割   通常用在有格式的字符串
        var myStr2 = "id=5;name=jack;age=15";
        var kvs = myStr2.split(";");      //用;拆分
        console.log(kvs);                     //Array(3)   0: "id=5"  1: "name=jack"   2: "age=15"
        
        //将name=jack的值取出
        for(var i = 0;i<kvs.length;i++){
            var kandv = kvs[i].split("=");
            //console.log(kandv[0]+'---'+kandv[1]);    id---5   name---jack   age---15    类比map数组
            if(kandv[0]=="name"){
                console.log(kandv[1]);      
            }
        }
        
    </script>

3.2Math

Ceil 向上取整

Floor 向下取整

Round 四舍五入

Random 伪随机数 [0-1)

<script>
        var myNum = 10.1;
        

        console.log(Math.ceil(myNum));    //11   ceil()向上取整 
        console.log(Math.floor(10.9));    //10   floor()向下取整
        
        console.log(Math.round(10.4));    //10   round() 四舍五入
        console.log(Math.abs(-10));       //10    绝对值
        
        // 产生1-10间的整数,含1和10
        console.log(Math.floor(Math.random()*10)+1); //Math.random() 0-1间的随机小数（包头不包尾）  
    </script>

3.3Date

通过new Date（）获取日期对象参数允许多种格式如”2011-11-11 11:11:11” “2011/11/11”都可以不加参数获取当前客户端的时间

<script>
    /* 
    日期对象在其他语言里可能复杂，在js里较简单.没有格式化，没有日期转换
    
    需要获取年月日时分秒，自己拼接成需要的格式（传的计算机可能不认识），但一般获取指定日期时，
    ，传入常用日期格式字符串，主要有两种
    1.2022-12-12 12:12:12    2.2022/12/12 12:12:12
    
    其它方法：
    getDate()           返回Date对象一个月中的每一天，值介于1-31
    getDay()            返回Date对象星期中的某一天，值介于0-6
    getHours()          返回Date对象小时数，0-23
    getMinutes()        返回Date对象分钟数，0-59
    getSeconds()        返回Date对象秒数，0-59
    getMonth()          返回Date对象月份，0-11
    getFullYear()       返回Date对象的年份，值为4位数
    getTime()           返回自某一时刻（1970.1.1）以来的毫秒数
 
     */
     var nowTime = new Date();     //获取当前时间    
     console.log(nowTime);  //Thu Mar 31 2022 15:51:44 GMT+0800 (中国标准时间)  （星期四，3月31日，2022年，15:51:44）
     
     
    var myDate = new Date("2022/12/12 12:12:12");   //需要获取年月日时分秒，传入常用日期格式字符串
    console.log(myDate);   //Mon Dec 12 2022 12:12:12   GMT+0800 (中国标准时间)
    
    </script>

3.4Array对象

创建数组可直接赋值 var myarr=[1,3,5,”g”]; 也可以通过var myarr = new Array();

js中数组不定长可以扩容也可以放任意类型数据

属性

Lenght 数组长度

方法

Join() 通过特定字符拼成字符串

Sort() 排序

Push() 尾部添加元素

Pop() 尾部删除元素

Shift() 头部删除元素

Unshift() 头部添加元素

<script>
    //js里的数组是假数组。数组在内存里要开辟空间，故其它语言要指定类型，根据类型在内存开辟空间。
    
          var myarr = new Array(5);   //获取数组对象，可传参，参数为长度
          var myarr2 = [1,"2",true,new Date(),[1,2,3]];    //也是定义数组，类型任意 .但处理时尽量把相同类型数据的放一起
          console.log(myarr2.length);     // 5   数组常用的属性，就这一个
          
          
          //数组常用的方法：
           //console.log(myarr2.join("_"));  将内容用‘-’拼成字符串，不同类型数据也能拼。
          //1_2_true_Thu Mar 31 2022 16:16:13 GMT+0800 (中国标准时间)_1,2,3
          
          //sort()排序
    /*     var myarr3 = [4,1,7,6,9];
           myarr3.sort(function(a,b){    //需要传入排序规则，这里用匿名函数表示降序排列
               return b-a;
           }) */
    
    /*   
           myarr3.push(2);      尾部添加元素
           myarr3.unshift(3)    头部添加元素
           
           myarr3.pop();        尾部删除元素
           myarr3.shift();      头部删除元素   */
           
           
          //替换元素  splice (索引 ,几个,...(替换成xxx)) 第三个参数为可变参数
          
          var myarr3 = [4,1,7,6,9];
          myarr3.splice(1,2,"a","b");   //第1个索引开始，替换两个，替换成ab
          console.log(myarr3);          //[4,a,b,6,9]
        </script>

课后习题：

（1）制作表格

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			table{
				border: 1px solid black;
			}
			th,td{
				border: 1px solid black;
				width: 80px;
				height: 60px;
				text-align: center;
			}
			.mybody td{
				color: #008000;
			}
			
			.myalert{
				background-color: #F08080;
			}
		</style>
	</head>
	<body>
		<table>
			<thead>
				<tr>
					<th>姓名</th>
					<th>年龄</th>
					<th>班级</th>
				</tr>
			</thead>
			<tbody class="mybody">
				<tr>
					<td>小明</td>
					<td>15</td>
					<td>722</td>
				</tr>
				<tr>
					<td class="myalert">小明2</td>
					<td>26</td>
					<td>720</td>
				</tr>
				
				<tr>
					<td>小明3</td>
					<td>36</td>
					<td>711</td>
				</tr>
				
			</tbody>
			
			
		</table>
	</body>
</html>

（2）div布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.main {
				width: 500px;
				height: 500px;
				border: 1px solid black;

				margin: 30px auto;

			}

			.main>.innerdiv {
				width: 65px;
				height: 65px;
				border: 1px solid black;
				float: left;
				margin: 16px;
			}

			.panel {
				width: 300px;
				height: 150px;
				border: 1px solid black;
				margin: 0px auto;
			}

			.panel>p {
				text-align: center;
			}
			.panel input[type="button"]{
				width: 80px;
				height: 40px;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>

			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>

			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>

			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>

			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>
			<div class="innerdiv"></div>

		</div>

		<div class="panel">
			<p>
				计时:0秒<br />
				计分:0分
			</p>
			<p>
				<input type="button" value="开始" />
				<input type="button" value="结束" />
			</p>
		</div>

	</body>
</html>

（3）div布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		
			html,body{
				width: 100%;
				height: 100%;
				padding: 0px;
				margin: 0px;
			}
		
		
			.main {
				width: 100%;
				height: 100%;
				background-color: lightgrey;
			}

			.top {
				width: 100%;
				height: 30%;
				background-color: lightcoral;
			}

			.bottom {
				width: 100%;
				height: 70%;
				background-color: lightgoldenrodyellow;
			}
			
			.left{
				
				width: 20%;
				height: 100%;
				background-color: lightblue;
				float: left;
			}
			.right{
				width: 80%;
				height: 100%;
				background-color: lightgreen;
				float: left;
			}
			
			
		</style>
	</head>
	<body>
		<div class="main">
			<div class="top"></div>
			<div class="bottom">
				<div class="left"></div>
				<div class="right"></div>
			</div>
		</div>
	</body>
</html>

（4）div布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 
			 
			 
			 */
			.mydiv{
				width: 300px;
				height: 200px;
				border: 1px solid black;
				position: fixed;
				top: 200px;
				left: 50%;
				margin-left: -150px;
			}
			
			.main{
				width: 100%;
				height: 600px;
				background-color: lightgray;
			}
			
		</style>
		
		
	</head>
	<body>
		<div class="main">
			
		</div>
		<div class="mydiv"></div>
	</body>
</html>

（5）导航条制作：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul>li{
				/* float: left;
				list-style: none;
				margin-left: 30px; */
				display: inline-block;
				border: 1px solid lightgrey;
				width: 80px;
				height: 40px;
				text-align: center;
				line-height: 40px;
				border-radius: 5px;
			}
			ul>li>a{
				text-decoration: none;
				color: #ADD8E6;
			}
			ul>li:hover{
				background-color: lightsalmon;
				cursor: pointer;
			}
		
		</style>
	</head>
	<body>
		<ul>
			<li><a href="###">首页</a></li>
			<li><a href="###">卫浴产品</a></li>
			<li><a href="###">瓷砖产品</a></li>
			<li><a href="###">工程案例</a></li>
			<li><a href="###">关于我们</a></li>
			
		</ul>
		
	</body>
</html>

（6） div-css页面布局

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		/* 
		 div+css布局
		 
		 1.考虑好比例
		 2.考虑好元素之间嵌套关系
		 
		 */
			html,body{
				margin: 0px;
				padding: 0px;
				height: 100%;/* 使用比例时 需要父元素高度指定 */
				width: 100%;
			}
		
			.mainPanel{
				width: 100%;
				height: 100%;
				background-color: #F08080;
			}
			
			.top{
				width: 100%;
				height: 20%;
				background-color: lightcyan;
			}
			
			.top{
				width: 100%;
				height: 20%;
				background-color: lightcyan;
			}
		
			.bottom{
				width: 100%;
				height: 80%;
				background-color: lightgoldenrodyellow;
			}
			
			.left{
				width: 20%;
				height: 100%;
				background-color: lightseagreen;
				float: left;
			}
			.right{
				width: 80%;
				height: 100%;
				background-color: lightgrey;
				float: left;
			}
			
		</style>
	</head>
	<body>
		<div class="mainPanel">
			<div class="top"></div>
			<div class="bottom">
				<div class="left"></div>
				<div class="right"></div>
			</div>
		</div>
	</body>
</html>

（7）元素居中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.mainPanel{
				width: 300px;
				height: 500px;
				border: 1px solid black;
				margin: 0px auto;
			}
			
			.innerDiv{
				width: 200px;
				height: 50px;
				border: 1px solid black;
				margin: 200px auto;
				text-align: center;
				line-height: 50px;
			}
			
			.alertDiv{
				width: 200px;
				height: 50px;
				border: 1px solid black;
				background-color: aliceblue;
				position: absolute;
				top: 200px;
				left: 50%;
				text-align: center;
				line-height: 50px;
				margin-left: -100px;
			}
			
		</style>
	</head>
	<body>
		<div class="mainPanel">
			<div class="innerDiv">
				文字<span>abc</span><a href="###">连接</a><input type="button" value="按钮" />
			</div>
		</div>
		<div class="alertDiv">
			警告!! 这是一个漂浮的块
		</div>
	</body>
</html>

（8）全选反选

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <input id="checkAllBtn" type="checkbox" onclick="checkAll()" /><label for="checkAllBtn">全选</label>
		 -->
		 <input type="button" value="全选" onclick="checkAll2()" />
		  <input type="button" value="反选" onmouseout="checkRecv()" />
		  <input id="mytext" type="text" value="我的文本框" onchange="checkRecv()" onkeyup="getTextVal()"/>
		  <select onchange="checkRecv()">
			  <option>选项1</option>
			  <option>选项2</option>
			  
		  </select>
		 <hr />
		 <div id="mydiv">
			 <input class="cbs" type="checkbox"/>
			 <input class="cbs" type="checkbox" />
			 <input class="cbs" type="checkbox" />
			 <input class="cbs" type="checkbox" />
		 </div>
		 <!-- 
		 有状态值的属性
		 checked
		 selected
		 disabled
		 
		 
		 -->
		 
		 <form onsubmit="return myFun()"></form>
		 
	</body>
	<script>
	    /* 
		全选 反选 典型场景
		
		记录用户点击过程中的状态切换 */
		var cbChedked = false;//通过变量记录
	
		function checkAll(){
			//console.log(document.getElementById("myele").checked); 
			console.log(document.getElementById("checkAllBtn").checked);
			console.log(document.getElementById("mydiv").getElementsByTagName("input"));
			var eles = document.getElementById("mydiv").getElementsByTagName("input");
			for(var i = 0;i<eles.length;i++){
				eles[i].checked = document.getElementById("checkAllBtn").checked;
			}
			
			
		}
		
		function checkAll2(){
			cbChedked = !cbChedked;
			var eles = document.getElementById("mydiv").getElementsByTagName("input");
			for(var i = 0;i<eles.length;i++){
				
				eles[i].checked = cbChedked;
			}
			
			
		}
		
		function checkRecv(){
			var eles = document.getElementById("mydiv").getElementsByTagName("input");
			for(var i = 0;i<eles.length;i++){

				eles[i].checked = !eles[i].checked;
			}
		}
		
		function getTextVal(){
			console.log(document.getElementById("mytext").value);
			
		}
			
	
	
	</script>
</html>

（9）图片切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.mydiv{
				width: 93px;
				height: 130px;
				border: 1px solid black;
			}
		
		</style>
	</head>
	<body>
		<div class="mydiv">
			<img id="myimg" src="img/pic1.png" />
		</div>
		
		<hr />
		<input  type="button" value="第一张" onclick="firstPic()" />
		<input type="button" value="上一张" onclick="prevPic()"/>
		<select id="mysel" onchange="changePic()">
			<option value="1">第1张</option>
			<option value="2">第2</option>
			<option value="3">第3</option>
			<option value="4">第4</option>
			<option value="5">第5</option>
			<option value="6">第6</option>
			<option value="7">第7</option>
			<option value="8">第8</option>
			
		</select>
		<input type="button" value="下一张" onclick="nextPic()"/>
		<input type="button" value="最后一张" onclick="lastPic()"/>
		<hr />
		<input type="radio" value="1" name="picindex" onclick="radioChangePic(this)"/>显示
		<input type="radio" value="2" name="picindex" onclick="radioChangePic(this)"/>隐藏
	</body>
	<script>
	/* 
	 找元素 改属性
	 给某个元素赋值  
	 值从哪来
	     自己建变量
		 元素身上的属性
	 
	 
	 */
	
	    var imgidx = 1;
		function firstPic(){

			document.getElementById("myimg").src = "img/pic1.png";
		}
		
		function lastPic(){

			document.getElementById("myimg").src = "img/pic8.png";
		}
		function nextPic(){
		    imgidx++;
			document.getElementById("myimg").src = "img/pic"+imgidx+".png";
		}
		
		function prevPic(){
			imgidx--;
			document.getElementById("myimg").src = "img/pic"+imgidx+".png";
		}
		
		
		function changePic(){
			//下拉列表改变图片索引
			console.log(document.getElementById("mysel").value);
			document.getElementById("myimg").src = "img/pic"+document.getElementById("mysel").value+".png";
		}
		
		function radioChangePic(myobj){
			//切换显示 隐藏
			switch(myobj.value){
				case '1':document.getElementById("myimg").style.display = "inline";break;
				case '2':document.getElementById("myimg").style.display = "none";break;
			}	
			
		}
		
		
	</script>
</html>

（10）div切换

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.mydiv{
				width: 600px;
				height: 400px;
				border: 1px solid black;
				display: none;
			}
			span{
				border: 1px solid black;
			}
			.closeBtn{
				color: red;
			}
		</style>
	</head>
	<body>
		<div id="spans">
			<span onclick="addSpanAndDiv()">+</span>
			<span id="span1" style="background-color: lightcoral;" onclick="showdiv(this)">tab1<span class="closeBtn" onclick="closeDiv(this)">X</span></span>
			<span id="span2" onclick="showdiv(this)">tab2<span class="closeBtn" onclick="closeDiv(this)">X</span></span>
			<span id="span3" onclick="showdiv(this)">tab3<span class="closeBtn" onclick="closeDiv(this)">X</span></span>
			<span id="span4" onclick="showdiv(this)">tab4<span class="closeBtn" onclick="closeDiv(this)">X</span></span>

		</div>
		
		<div id="divs">
			<div id="div1" style="display: block;" class="mydiv">d1</div>
			<div id="div2" class="mydiv">d2</div>
			<div id="div3" class="mydiv">d3</div>
			<div id="div4" class="mydiv">d4</div>

			
		</div>
	</body>
	<script>
		var spanidx = 4;
	
		function showdiv(myobj){
			//所有span恢复背景白色
			var eles = document.getElementById("spans").getElementsByTagName("span");
			for(var i = 0;i<eles.length;i++){
				eles[i].style.backgroundColor = "white";
			}
			//点击到的span背景变成红色
			myobj.style.backgroundColor = "lightcoral";
			console.log(myobj.id.replace("span","div"));
			//所有块隐藏
			var eles = document.getElementById("divs").getElementsByTagName("div");
			for(var i = 0;i<eles.length;i++){
				eles[i].style.display = "none";
			}
			//显示特定的块
			var divid = myobj.id.replace("span","div");
			if(document.getElementById(divid) != null){
				document.getElementById(divid).style.display = "block";
			}
			
		}
		
		function addSpanAndDiv(){
			//通过innerHTML 动态添加页面元素
			spanidx++;
			document.getElementById("spans").innerHTML+=' <span id="span'+spanidx+'" onclick="showdiv(this)">tab'+spanidx+'</span> ';
			document.getElementById("divs").innerHTML+=' <div id="div'+spanidx+'" class="mydiv">d'+spanidx+'</div> ';
			
		}
		
		function closeDiv(myobj){
			console.log(myobj.parentNode);
			var divid = myobj.parentNode.id.replace("span","div");
			document.getElementById("spans").removeChild(myobj.parentNode);
			document.getElementById("divs").removeChild(document.getElementById(divid));
		}
		
	
	</script>
</html>

（11）定时跳转

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- <input type="button" value="按钮触发定时" onclick="startInterval(this)" /> -->
		<span id="myTimeNum">3</span>秒后页面跳转<span id="showDot">.</span>
		
		
	</body>
	<script>
		/* function startInterval(myobj){
			myobj.disabled = true;
			
			setInterval(function(){
				console.log(1);
			},1000)
			
		} */
		
		setInterval(function(){
			if(document.getElementById("showDot").innerHTML.length==5){
				document.getElementById("showDot").innerHTML = "";
			}
			document.getElementById("showDot").innerHTML+="."
		},200)
		
		setInterval(function(){
			var oldNum = parseInt(document.getElementById("myTimeNum").innerHTML);
			var newNum = oldNum - 1 ;
			document.getElementById("myTimeNum").innerHTML = newNum;
			
			
		},1000)
		
		setTimeout(function(){
			location.href = "http://www.baidu.com";
		},3000)
	
	
	</script>
</html>

课后作业2：

（1）网页设计案例:

<!DOCTYPE html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页设计案例</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>

<body>
<div class="header"><img src="image/logo.gif" /></div>
<div class="menu">
	<ul>
		<li style="margin-left:6px; display:inline;"><a href="#">首页</a></li>
		<li><a>关于惠达</a></li>
		<li><a href="#">惠达新闻</a></li>
		<li><a href="#">卫浴产品</a></li>
		<li><a href="#">磁砖产品</a></li>
		<li><a href="#">技术创新</a></li>
		<li><a href="#">服务支持</a></li>
		<li><a href="#">工程案例</a></li>
	</ul>
</div>
<div class="banner"><img src="image/banner.gif" /></div>
<div class="main">
	<div class="left">
		<h3><span>MORE</span>新闻动态</h3>
		<ul>
			<li><span>xxxx-7-15</span><a href="#">唐山悲壮一幕再现荧屏</a></li>
			<li><span>xxxx-7-14</span><a href="#">惠达卫浴华南区营销工作会议顺利召开</a></li>
			<li><span>xxxx-7-12</span><a href="#">提升自我 树立民族品牌形象</a></li>
			<li><span>xxxx-7-12</span><a href="#">规范企业发展 提升企业竞争力</a></li>
			<li><span>xxxx-7-12</span><a href="#">加强服务 向国际一流企业看齐</a></li>
		</ul>
	</div>
	<div class="center">
		<h3><span>MORE</span>产品展示</h3>
		<ul>
			<li style="margin-left:16px; display:inline;"><img src="image/tu1.gif" /><p><a href="#">厨卫龙头</a></p></li>
			<li><img src="image/tu2.gif" /><p><a href="#">厨卫水龙</a></p></li>
			<li><img src="image/tu3.gif" /><p><a href="#">浴室龙头</a></p></li>
		</ul>
	</div>
	<div class="right">
		<dl>
			<dt><img src="image/ren.gif" /></dt>
			<dd style="color:#000000;">总部电话</dd>
			<dd style="margin-top:11px;"><span>020-872837294</span></dd>
		</dl>
		<form>
			<table width="190" cellpadding="0" cellspacing="0" border="0">
				<tr><td align="right">用户名：</td><td><input class="text" type="text" /></td></tr>
				<tr><td align="right">密&nbsp;&nbsp;码：</td><td><input class="text" type="password" /></td></tr>
				<tr><td align="center"><input type="submit"  class="btn2" value="登录"/></td><td valign="middle"><input type="button" class="btn1" value="注册"/><span>忘记密码？</span></td></tr>
			</table>
		</form>
	</div>
</div>
<div class="footer">
	<ul>
		<li style="background:none;"><a href="#">关于中网</a></li>
		<li><a href="#">诚聘英才</a></li>
		<li><a href="#">广告服务</a></li>
		<li><a href="#">付款方式</a></li>
		<li><a href="#">服务条款</a></li>
		<li><a href="#">友情链接</a></li>
		<li><a href="#">法律声明</a></li>
		<li><a href="#">常见问题</a></li>
		<li><a href="#">联系我们</a></li>
	</ul>
	<p>市场部：0577-62723777 客服电话：0577-62751363 传真：0577-61788000 商务合作：0577-62727209</p>
	<p>ICP证：浙B2-20050336 E-mail：info@chinaswitch.com</p>
</div>
</body>
</html>

*{padding:0px; margin:0px; }
body{width:868px; margin:0 auto; font-size:12px; font-family: "宋体";}
ul{list-style: none;}
img{border: none;}
a{color: black; text-decoration: none;}
a:hover{color: red;}

.header{width: 868px; height: 76px;}
.header img{margin:22px 8px;}

.menu{ width:868px; height:35px;}
.menu li{ float:left; line-height:35px; width:62px; margin:0 10px; text-align:center;}
.menu li a{ color:#FFFFFF; display:block;}
.menu li a:hover{ color:#FF0000; background:url(../image/li-bg.gif) no-repeat;}

.banner{ width:868px; height:314px; clear:both;}

.main{ width:868px; height:156px; margin-top:10px; color:#666666; }
.left{ width:327px; height:156px; background:url(../image/main-bg.gif) repeat-x; float:left;}
.left h3{ width:316px; height:20px; font-size:14px; border-bottom:1px solid #adadad; line-height:20px; margin-left:7px;}
.left h3 span{ float:right; font-family:Arial, Helvetica, sans-serif; font-size:10px; margin-left:3px;}
.left li{ line-height:25px; background:url(../image/wenzhang-bg.gif) no-repeat left center; margin-left:14px;}
.left li span{ float:right; margin-right:11px;}
.left li a { padding-left:15px;}

.center{ width:312px; height:156px; float:left; margin-left:10px;background:url(../image/main-bg.gif) repeat-x; }
.center h3{ width:300px;height:20px; font-size:14px;border-bottom:1px solid #adadad; line-height:20px; margin-left:7px;}
.center h3 span{ float:right; font-family:Arial, Helvetica, sans-serif; font-size:10px; margin-right:3px;}
.center ul{ margin-top:12px;}
.center li{ float:left; width:87px; height:113px; border:1px solid #dedede; margin-left:4px; text-align:center;}

.right{ width:208px; height:156px; float:right;background:url(../image/main-bg.gif) repeat-x; }
.right dl{ width:190px; height:60px; border-bottom:1px dotted #ccc; margin-left:7px;}
.right dl dt{ float:left; margin-left:16px; margin-top:13px; margin-right:20px;}
.right dl dd{ margin-top:13px; font-size:14px; font-weight:bold;}
.right dl span{ color:#d11a1e;}
.right form{ width:170px; margin-left:20px; height:76px; margin-top:3px;}
.text{ width:109px; height:16px; border:1px solid #cecece;}
.btn1{ width:36px; height:17px; background:url(../image/btn.gif) no-repeat; color:#ff0505; border:none;}
.btn2{ width:36px; height:17px; background:url(../image/btn.gif) no-repeat; color:#636363; border:none;}
.right form tr{ line-height:27px;}
.right td span{ margin-left:22px;}

.footer{ clear:both; height:130px; background:#ededed; color:#8c8c8c;padding-top:21px;}
.footer ul{ width:788px; height:27px; background:url(../image/nav-bg.gif) no-repeat;  padding-left:80px; margin-bottom:22px;}
.footer li{ float:left; background:url(../image/li.gif) no-repeat left center; width:80px; line-height:27px; text-align:center;}
.footer li a{ color:#FFFFFF;}
.footer li a:hover{ color:#FF0000;}
.footer p{ margin:0 auto; text-align:center; margin-top:12px;}

（2）手机号效验

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.checkimg{
			vertical-align: middle;
			display: none;
		}
		</style>
	</head>
	<body>
		<form action="/xxx" method="get" onsubmit="return mySubmit()">
			<input id="phoneText" type="text" name="userPhone"  placeholder="请输入手机号" onkeyup="checkPhone()"/>
			<img id="phoneRegImg" class="checkimg" src="image/wrong.png" />
			<span id="checkPhoneRes"></span><br />
			<input id="mailText" type="text" name="userMail" placeholder="请输入邮箱" onkeyup="checkMail()" />
			<img id="mailRegImg" class="checkimg" src="image/wrong.png" />
			<br />
			<input type="submit" />
		</form>
		
	</body>
	<script>
		
	/* 
	1.由哪个元素触发
	2.使用什么事件
	3.触发后执行的代码
	  给某些属性赋值
	  从某些元素上 取某些属性的值 
	  
	  常用元素属性
	  元素.style.xxx  样式相关属性 
	  元素.value      输入框的值  下拉列表的值
	  元素.innerHTML  双标签的内容
	  元素.src        图片路径
	 
	 */
	
		function checkMail(){
			var myreg = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;
			var mailval = document.getElementById("mailText").value;
			var myflag = false;
			if(myreg.test(mailval)){
				document.getElementById("mailRegImg").style.display = "inline";
				document.getElementById("mailRegImg").src ="image/ok.png";
				myflag = true;
			}else{
				document.getElementById("mailRegImg").style.display = "inline";
				document.getElementById("mailRegImg").src ="image/wrong.png";
				myflag = false;
			}
			return myflag;
		}
		
		function checkPhone(){
			var  myreg = /^1(3|4|5|7|8)\d{9}$/;
			// console.log(myreg.test("13333333333444")); 
			//从文本框中取值
			var phoneval = document.getElementById("phoneText").value;
			//使用文本框的值 与正则表达式匹配
			var myflag = false;
			if(myreg.test(phoneval)){
				//成功
				console.log("格式正确");
				//innerHTML  标识双标签中的内容
				/* document.getElementById("checkPhoneRes").innerHTML = "格式正确";
				document.getElementById("checkPhoneRes").style.color = "green"; */
				document.getElementById("phoneRegImg").style.display = "inline";
				document.getElementById("phoneRegImg").src ="image/ok.png";
				myflag = true;
				
			}else{
				//失败
				
				console.log("格式有误");
				/* document.getElementById("checkPhoneRes").innerHTML = "格式有误";
				document.getElementById("checkPhoneRes").style.color = "lightcoral"; */
				document.getElementById("phoneRegImg").style.display = "inline";
				document.getElementById("phoneRegImg").src ="image/wrong.png";
				myflag = false;
			}
			return myflag;
		}
		
		function mySubmit(){
			return checkPhone()&&checkMail();
		}
		
	
	
	</script>
</html>

（3）计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.countPanel{
				width: 200px;
				height: 258px;
				border: 1px solid gray;
			}
			.showResPanel{
				width: 95%;
				height: 67px;
			}
			.countPanel>input[type="button"]{
				width: 46px;
				height: 46px;
			}
			.countPanel>input.bigNumBtn{
				width: 97px;
			}
		</style>
	</head>
	<body>
		<div class="countPanel">
			<input id="showResRanel" class="showResPanel" readonly="readonly" type="text" /><br />
			<input type="button" value="7" onclick="setTextVal(this)" />
			<input type="button" value="8" onclick="setTextVal(this)"/>
			<input type="button" value="9" onclick="setTextVal(this)"/>
			<input type="button" value="+" onclick="setTextVal(this)"/><br />
			<input type="button" value="4" onclick="setTextVal(this)"/>
			<input type="button" value="5" onclick="setTextVal(this)"/>
			<input type="button" value="6" onclick="setTextVal(this)"/>
			<input type="button" value="-" onclick="setTextVal(this)"/><br />
			<input type="button" value="1" onclick="setTextVal(this)"/>
			<input type="button" value="2" onclick="setTextVal(this)"/>
			<input type="button" value="3" onclick="setTextVal(this)"/>
			<input type="button" value="*" onclick="setTextVal(this)"/><br />
			<input class="bigNumBtn" type="button" value="0" onclick="setTextVal(this)"/>
			<input type="button" value="=" onclick="getRes()"/>
			<input type="button" value="/" onclick="setTextVal(this)"/>
			
		</div>
		
	</body>
	<script>
	/* 
	 练习基本的传值 赋值
	 
	 
	 */
	
		function setTextVal(myobj){
			document.getElementById("showResRanel").value += myobj.value;
		}
		
		function getRes(){
			document.getElementById("showResRanel").value = eval(document.getElementById("showResRanel").value);
		}
	
	
	</script>
</html>

（4）显示时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<h1 id="timePanel"></h1>
	</body>
	<script>
	/* 
	 1 熟悉日期对象
	 2 熟悉定时函数
	 */
	
		function getNowDate() {
			var nowDate = new Date();


			var dayOfMonth = nowDate.getDate();
			console.log(dayOfMonth);
			var dayOfWeek = nowDate.getDay()%7;

			var dayOfWeekStr;
			switch (dayOfWeek) {
				case 0:
					dayOfWeekStr = "星期天";
					break;
				case 1:
					dayOfWeekStr = "星期1";
					break;
				case 2:
					dayOfWeekStr = "星期2";
					break;
				case 3:
					dayOfWeekStr = "星期3";
					break;
				case 4:
					dayOfWeekStr = "星期4";
					break;
				case 5:
					dayOfWeekStr = "星期5";
					break;
				case 6:
					dayOfWeekStr = "星期6";
					break;
			}

			console.log(dayOfWeek);
			var month = nowDate.getMonth() + 1;
			console.log(month);
			var year = nowDate.getFullYear();
			console.log(year);

			var hours = nowDate.getHours();
			var amOrPm = hours / 12 >= 1 ? "PM" : "AM";
			var hours12 = hours % 12;

			var minutes = nowDate.getMinutes();
			var seconds = nowDate.getSeconds();

			var myTimeStr = year + "年" + month + "月" + dayOfMonth + "日&emsp;" + hours12 + ":" + minutes + ":" + seconds +
				" " + amOrPm + " " + dayOfWeekStr;
			console.log(myTimeStr);
			document.getElementById("timePanel").innerHTML = myTimeStr;
		}
		
		setInterval("getNowDate()",1000);
		
	</script>
</html>

（5）打地鼠