首页 > > 程序设计 > Java技术 >

javaWeb技术第二篇之CSS、事件和案例

2019-08-16 12:20:19来源：博客园 阅读 ()

新老客户大回馈,云服务器低至5折

javaWeb技术第二篇之CSS、事件和案例 

<!--内联式
CSS （层叠样式表） 编辑
层叠样式表(英文全称：Cascading Style Sheets)
CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
就是网页的美化技术。
入门:如何在html里面使用css
html里面的外观命名跟css外观命名会有所有不同。但效果一致
css属性:
属性1：值1;属性2：值2;属性3：值3;...
内联式:对每个元素都进行style进行样式添加.
内部式:在当前html的head的style标签里面添加
<head>
    <style>
        查找元素{//css属性}
    </style>
</head>
外部式:要求大家敲明白
<head>
    <link rel="stylesheet" type="text/css" href="css/out.css"/>
    固定写法:rel="stylesheet" type="text/css"  前者是当作一个样式文件,后者是当作css代码
</head>
-->
        <input type="text" value="内联式" style="background-color: yellow ;" /><br />
        <input type="text" value="内联式" style="background-color: yellow ;" />
        <div >
            我是div
        </div>
        <div >
            我是div
        </div>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*对每一个option进行外观设置*/
            option{
                min-width: 200px;
            }
        </style>
    </head>
    <body>
    <!--css能做到html做不到外观设置,可以更简洁高效-->
        <select size="3"  >
            <option>小班</option>
            <option>中班</option>
            <option>大班</option>
        </select>

    </body>

</html>

选择器最终目的就是为了拿到指定的元素对象.

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        
        <style>
            /*选择器就是一些选择html元素的符号*/
            /*#id{//css属性}*/
            #input1{ background-color: blue;}
            /*.class值{//css属性 }*/
            .inp{background-color: yellow;}
            /*名称元素选择器:使用标签名,表示对当前页面的每个元素*/
            div{background-color: red;}
            /*虽然有的元素名称一样,这时不要用名称选择器*/
            /*元素[属性='值']{//css代码}*/
            /*input[type='password']{background-color: green;}*/
            /*扩展:分组选择器,包含选择器
             外部元素选择器  内部元素选择器{//css代码}*/
            div span{background-color: orange;}
            /*分组选择器是一种共用样式的写法 简化css代码
             选择器1,选择器2...{//css代码}*/
            /*input[type='text']{background-color: green;}*/
            /*input[type='password'],input[type='text']{background-color: green;}*/
            #pwd,#txt{background-color: green;}
        </style>
    </head>
    <body>
        <!--id 是元素的唯一编码
        可以根据id查找出当前文档的html元素
        一般是js里面使用的属性
        根据class进行元素查找-->
         <input id="input1" value="id选择器"/><br />
         <input class="inp" value="input选择器"/><br />
         <input class="inp" value="input选择器"/><br />
         <input class="inp" value="input选择器"/><br />
         <input class="inp" value="input选择器"/><br />
         <input class="inp" value="input选择器"/><br />
         <div>我是div</div>
         <div>我是div</div>
         <div>我是div</div>
         <div>我是div</div>
         <div>我是div</div>
         <div>我是div</div>
         <input id="pwd" type="password" /><br />
         <input id="txt" type="text" /><br />
         <div>
             <span>我是div内部的span</span>
         </div>
         <span>我是div外部的span</span>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*对每一个div进行操作*/
            div {
                /*设置字体颜色*/
                color: red;
                /*设置字体大小*/
                font-size: 20px;
                /*设置粗细*/
                font-weight: 700;
                /*设置对齐*/
                text-align: center;
            }
            a {
                /*设置删除 下划线 上划线*/
                text-decoration: none;
            }
        </style>
    </head>
    <body>
        <!--<i><font color="red" size="6" face="黑体">我是王宝强</font></i>
        <i><font color="red" size="6" face="黑体">我是马蓉</font></i>-->
        <div>我是王宝强</div>
        <div>我是马蓉</div>
        <a href="#">我是宋jj</a>
        <a href="#">我是宋kk</a>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                background-color: gray;
            }
            #div1{
                background-image: url(img/015.jpg);
                /*设置宽高*/
                height: 400px;
                width: 400px;
            }
        </style>
    </head>
    <body>
        <div>我是div</div>
        <div>我是div</div>
        <div id="div1">我是div</div>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                /*border:宽度  形状 颜色;
                 solid实线
                 dotted虚线*/
                /*border: 2px solid  red;*/
                border-top: 2px solid red;
                border-right: 2px dotted red;
                border-bottom: 5px dotted red;
                border-left: 5px dotted green;
            }
        </style>
    </head>
    <body>
        <div>我是div</div>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            span {
                border: 1px solid red;
                background-color: green;
                /*缩进(内边距):内容与边界的距离*/
                /*padding: 10px;*/
                /*上,右,下,左*/
                /*使用空格隔开*/
                padding: 10px 20px 30px 40px;
                /*外边距：边界与边界的距离*/
                /*上,右,下,左*/
                margin: 20px;
            }
        </style>
    </head>

    <body>
        <br />
        <span>我是span</span>
        <span id="second">我是span</span>
        <span id="third">我是span</span>

    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*设置元素在界面的中的位置
             摆放元素就是布局
             标准流/普通流：默认的显示顺序,先上后下 先左后右 碰到div换行
             float:浮动 不显示在标准上面,而有自己的一层，该层在标准流上面
             left:向左浮动
             right:向右浮动
             clear:清除浮动:不让左边,右边，同时左右出现浮动
             display*/

            #div1 {
                width: 150px;
                height: 150px;
                background-color: red;
                float: right;
            }

            #div2 {
                width: 50px;
                height: 50px;
                background-color: green;
                float: right;
            }

            #div3 {
                width: 100px;
                height: 100px;
                background-color: blue;
                float: right;
            }

            #clear {
                width: 0px;
                height: 0px;
                background-color: orange;
                /*项目中使用both最多
                 当我们给clear为both设置宽高为0,0
                 当它与div一块使用可以替代table*/
                clear: both;
            }
        </style>
    </head>

    <body>
        <div id="div1"></div>
        <div id="clear"></div>
        <div id="div2"></div>

        <div id="div3"></div>

    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .grid{
                width: 60px;
                height: 60px;
                border: 1px solid gray;
                float: left;
            }
            /*换行*/
            #clear{
                clear: both;
                width: 0px;
                height: 0px;
            }

        </style>
    </head>

    <body>
        <div class="grid">1</div>
        <div class="grid">2</div>
        <div class="grid">3</div>
        <div id="clear"></div>
        <div class="grid">4</div>
        <div class="grid">5</div>
        <div class="grid">6</div>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                /*将元素设置成内联元素/行内元素
                 此时宽高失效*/
                display: inline;
            }
            span{
                border: 1px solid red;
                /*将元素设置成块级元素*/
                display: block;
                width: 100px;
                height: 100px;
                /*将元素隐藏*/
                /*display: none;*/
                /*应用场景:菜单*/
            }
        </style>
    </head>

    <body>
          <div id="div1">我是div</div>
          <div>我是div</div>
          <span>我是span</span>
          <span>我是span</span>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            .grid{
                width: 60px;
                height: 60px;
                border: 1px solid gray;
                float: left;
            }
            /*换行*/
            #clear{
                clear: both;
                width: 0px;
                height: 0px;
            }

        </style>
    </head>

    <body>
        <div class="grid">1</div>
        <div class="grid">2</div>
        <div class="grid">3</div>
        <div id="clear"></div>
        <div class="grid">4</div>
        <div class="grid">5</div>
        <div class="grid">6</div>
    </body>

</html>


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            div{
                width: 100px;
                height: 100px;
                border: 1px solid red;
                /*将元素设置成内联元素/行内元素
                 此时宽高失效*/
                display: inline;
            }
            span{
                border: 1px solid red;
                /*将元素设置成块级元素*/
                display: block;
                width: 100px;
                height: 100px;
                /*将元素隐藏*/
                /*display: none;*/
                /*应用场景:菜单*/
            }
        </style>
    </head>

    <body>
          <div id="div1">我是div</div>
          <div>我是div</div>
          <span>我是span</span>
          <span>我是span</span>
    </body>

</html>

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            #outer{
                border: 1px solid red;
                width: 100px;
                height: 100px;
            }
            #inner{
                border: 1px solid grey;
                width: 50px;
                height: 50px;
                /*0设置上下 auto由外部计算居中的外边距*/
                margin: 0 auto;
            }
        </style>
    </head>

    <body>
          <div id="outer">
              <div id="inner"></div>
          </div>
    </body>

</html>



<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            /*每一个div设置宽 边框*/
            div{
             width: 100%;
             /*border: 1px solid gray;*/
             float: left;
            }
            /*清除+宽高为00等于br*/
            #clear{
                height: 0px;
                width: 0px;
                clear: both;
            }
            /*第一行内的三个div,是包含关系*/
            #head div{
                width: 33%;
                text-align: center;
                height: 60px;
            }
            #head div a{
                margin: 10px;
                text-decoration: none;
            }
            #head #head_div{
                /*设置内边距*/
             padding-top: 20px;
            }
            /*第二行开始*/
            #menu{
                height: 40px;
                background-color: black;
                padding-top: 10px;
            }
            #menu a{
                color: white;
                text-decoration: none;
                font-size: 20px;
                margin-left: 10px;
                /*如果margin元效可以使用padding*/
            }
            /*第三行开始*/
            #register{
                width: 100%;
                background-image: url(img/015.jpg);
                height: 700px;
            }
            #register #form_div{
                background-color: white;
                border: 2px solid gray;
                width: 60%;
                height: 70%;
                /*上 右 下 左*/
                margin: 5%  20% 0% 20%;
            }
            #register #form_div table{
                margin: 0 auto;
                padding-top: 20px;
            }
            /*第四行*/
            #footer {

            }
            #footer img{
                  width: 100%;
            }
            /*第五行*/
            p {
                text-align: center;
            }
        </style>
    </head>

    <body>
        <!--联想
        列点
        *创建表格(div+float+clear)
        *css 操作元素外观
        * 第一行
        * 第二行
        * 。。。。
        实现-->
        <div id="head">
            <!--1/3宽度的div-->
            <div >
                <img src="img/logo2.png" />
            </div>
            <div >
                <img src="img/header.jpg" />
            </div>
            <div id="head_div">
                <a href="#">注册</a><a href="#">登录</a><a href="#">关于</a>
            </div>
        </div>
        <div id="clear"></div>

        <!--第二行 菜单-->
        <div id="menu">
            <a href="#">首页</a>
            <a href="#">笔记</a>
            <a href="#">手机</a>
        </div>
        <div id="clear"></div>
        <!--第三行 注册部分-->
        <div id="register">
            <div id="form_div">
                    <!--用户注册-start-->
                    <!-- *表单:集合-->
        <form action="#" method="post">

            <!--*表单元素-->
            <!--*使用table标签-->
            <table width="70%" border="0px">
                <tr>
                    <td align="right" >
                        <font color="blue">会员注册</font>
                    </td>
                    <td align="left" colspan="2">USER REGISTER</td>
                </tr>
                <!--*text-->
                <tr>
                    <td align="right"><b>用户名</b></font>
                    </td>
                    <td align="left" colspan="2"><input type="text" name="username" size="50" placeholder="用户名"/></td>
                </tr>
                <!--*password-->
                <tr>
                    <td align="right"><b>密码</b></font>
                    </td>
                    <td align="left" colspan="2"><input type="password" name="password" size="50" /></td>
                </tr>
                <tr>
                    <td align="right"><b>确认密码</b></font>
                    </td>
                    <td align="left" colspan="2"><input type="password" name="password2" size="50" /></td>
                </tr>
                <tr>
                    <td align="right"><b>Email</b></font>
                    </td>
                    <td align="left" colspan="2"><input type="text" name="email" size="50" /></td>
                </tr>
                <tr>
                    <td align="right"><b>姓名</b></font>
                    </td>
                    <td align="left" colspan="2"><input type="text" name="uname" size="50" /></td>
                </tr>

                <!--*radio-->
                <tr>
                    <td align="right"><b>性别</b></font>
                    </td>
                    <td align="left" colspan="2"><input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex" />女</td>
                </tr>

                <!--*date-->
                <tr>
                    <td align="right"><b>出生日期</b></font>
                    </td>
                    <td align="left" colspan="2"><input type="date" name="birthday" /></td>
                </tr>
                <!--*image-->
                <tr>
                    <td align="right"><b>验证码</b></font>
                    </td>
                    <td align="left" width="33%"><input type="text" name="code" width="100" /></td>
                    <td align="left" width="33%"><input type="image" src="img/015.jpg" width="60" height="40" /></td>
                </tr>
                <!--*submit-->
                <tr>
                    <td colspan="3" align="center">
                        <input type="submit" value="注册" width="200px" />
                    </td>
                </tr>
            </table>
        </form>
                    <!--用户注册-end-->

            </div>
        </div>
        <div id="clear"></div>
        <div id="footer" >
            <img src="img/footer.jpg" />
        </div>
        <div id="clear"></div>
    <div>
    <p>联系我们 联系我们 联系我们 联系我们 联系我们 联系我们
    </p>
    <p>
        Copyright © 2005-2016 传智商城 版权所有
    </p>
</div>
    </body>

</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--方式1:内联式   通过script标签-->
        <script>
            /*直接在标签体中编写js代码即可*/
            // 
            alert("hello js!");
        </script>
        
        <!--方式2:外联式     a.首先编写外部的js代码    b.引入该js文件-->
        <script type="text/javascript" src="js/first.js" >
            alert("情绪是智慧不够的产物!");
            
        </script>
        
        
        
        <!--
            注意事项:
                加载顺序:
                    从上到下
                    从左到右
                一个页面中可以出现多个script标签,可以放在任何位置(一般放在head标签中,注意正确嵌套)
                外联式的script一旦是src属性,那么标签体失效.
        -->
    </head>
    <body>
        <script>
            /*直接在标签体中编写js代码即可*/
            // 
            alert("hello js11111!");
        </script>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //变量声明
            var age = 18;
            var name1 = "tom";
//            alert(age);
            alert(name1);
        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            var age = 18;   //number
            age = "tom";    //string
            age = true;        //boolean
//            alert(typeof age);
            var age1 = null;    //object
//            alert(typeof age1); 弹出一个窗口(会停止程序的运行)
            var age2;    //undefined
            alert(typeof age2);
        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //等性运算符
            // == !=    判断数值
//            alert(18==18);    //true
//            alert(18=="18");    //true
            //一个number类型的数值和一个非数值形式的字符串不能比较
//            alert(66=="B");        //false 
//            alert("B"=="B");    //true 比较ASCII
//            alert("A"=="B");    //false
            
            // === !==   判断数值和类型
//            alert(18==="18");    //false
//            alert(18!=="18");    //true
//            alert("B"==="B");    //true

            //关系运算符
            // > < >= <=
//            alert(18>19);        //fasle
//            alert(18>"17");        //true
            //一个number类型的数值和一个非数值形式的字符串不能比较
//            alert(67>"B");        //false
//            alert("B">"A");        //true  比较ASCII
            
            //逻辑运算符
            //&& || !
            //&&
//            alert(true&&false);        //false
//            alert(false&&true);        //fasle
//            alert(true&&true);        //true
            //在&&运算中,如果两边都为true(对象转为的Boolean),那么运算结果为右边的值
//            alert("abc"&&true);        //true
//            alert(true&&"abc");        //abc
            //||
//            alert(true||false);        //true
//            alert(false||true);        //true
//            alert(false||false);    //false
            //在||运算中,如果两边都为true(对象转为的Boolean),那么运算结果为左边的值
//            alert("abc"||false);    //abc
//            alert(false||"abc");    //abc
            alert("abc"||true);        //abc



        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
//            if(18>17){
//                alert("18大于17");
//            }
            for(var i=0;i<3;i++){
                alert(i);
            }
        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            
            //编写普通函数
            function add(){
                alert(1+1);
            }
            //调用函数
//            add();

            
            //匿名函数(先编写后使用)
            var add1 = function(i,j){
                alert(i+j);
            }
//            add1(4,4);

            //带有参数的函数
            function add2(i,j){
                alert(i+j);
            }
//            add2(3,3);
            //返回值
            function add3(i,j){
                return i+j;
            }
            var sum = add3(5,5);
            alert(sum);
        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn(){
                alert("44944");
            }
            
        </script>
    </head>
    <body>
        <!--方式1:绑定事件   通过标签的事件属性-->
        <input type="button" value="点我44" onclick="btn("111")" />
        <!--方式2:派发事件    -->
        <input type="button" value="再点我44" id="btnId" />
    </body>
    <script>
        //1.获取事件源(标签对象)
        var inpObj = document.getElementById("btnId");
        //2.给事件源派发事件
        inpObj.onclick = function(data){
            alert(449444444);
        }
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //页面加载成功事件 等页面加载完毕后再来加载页面加载成功事件中的代码片段  
            onload = function(){
//                alert("123");
                //1.获取事件源(标签对象)
                var inpObj = document.getElementById("btnId");
                //2.给事件源派发事件
                inpObj.onclick = function(){
                    alert(449444444);
                }
            }
            
        </script>
    </head>
    <body>
        <!--方式2:派发事件    -->
        <input type="button" value="再点我44" id="btnId" />
    </body>
</html>


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script>
        /*    步骤分析:
        1.确定事件(表单提交事件)
            //checkForm函数必须要有返回值(Boolean)
            <form onsubmit="return checkForm()"></form>
        2.编写函数(校验用户名和密码)
            a.获取用户名和密码的标签对象
                var obj = document.getElementById("id");
            b.获取用户名和密码的值(value属性)
                var userVal = obj.value;
            c.校验是否为空
                if(userVal==""){
                    alert("用户名不可为空");
                    return false;
                }
            d.返回值
            return true;*/
        //必须要有返回值
        function checkForm(){
            //a.获取用户名和密码的标签对象
            var userObj = document.getElementById("username");
            var pwdObj = document.getElementById("password");
            //b.获取用户名和密码的值(value属性)
            var userVal = userObj.value;
            var pwdVal = pwdObj.value;
//            alert(userVal+"   "+pwdVal);
            //c.校验是否为空
            if(userVal==""){
                alert("用户名不可为空");
                return false;
            }
            if(pwdVal==""){
                alert("密码不可为空");
                return false;
            }
            return true;
        }
    </script>
    <body>
        <form action="#" method="get" onsubmit="return checkForm()">
            <table width="60%" height="60%"  align="center" bgcolor="#ffffff">
                <tr>
                    <td colspan="3">会员注册USER REGISTER</td>
                </tr>
                <tr>
                    <td width="20%">用户名:</td>
                    <td width="40%"><input type="text" name="username" id="username"></td>
                    <td width="40%"><span id="username_msg"></span></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="password" id="password"></td>
                    <td><span id="password_msg"></span></td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td><input type="password" name="repassword" id="repassword"></td>
                    <td><span id="repassword_msg"></span></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" id="email"></td>
                    <td><span id="email_msg"></span></td>
                </tr>
                <tr>
                    <td>姓名:</td>
                    <td><input type="text" name="name"></td>
                </tr>
                <tr>
                    <td>性别:</td>
                    <td>
                        <input type="radio" name="sex" value="男"> 男
                        <input type="radio" name="sex" value="女" />女
                    </td>
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td>
                        <input type="text" name="birthday">

                    </td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td>
                        <input type="text" name="checkcode">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="注册" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        
        <title></title>
        <link rel="stylesheet" href="../css/lunbo.css" />
        <script type="text/javascript">
        /*    步骤分析:
        1.确定事件(页面加载成功事件)
            onload = function(){
                //设置周期执行的定时
                setInterval(changeImg,2000);
            }
        2.编写changeImg函数(改变图片)
            function changeImg(){
                a.获取图片的标签对象
                    var imgObj = document.getElementById("id");
                b.改变src属性的值
                    imgObj.src = "url";
            }*/
            onload = function(){
                //设置周期执行的定时
                setInterval(changeImg,2000);
            }
            var i = 1;
            function changeImg(){
                i++;
                //a.获取图片的标签对象
                var imgObj = document.getElementById("imgId");
                //b.改变src属性的值
//                alert(imgObj.src);
                imgObj.src = "../img/"+i+".jpg";
                //判断是否是最后一张
                if(i==3){
                    i=0;
                }
            }
        </script>
    </head>
    <body>
        <!--
            一个大div中放置8个div
        -->
        <div>
            <!--logo
                嵌套三个div
            -->
            <div class="header">
                <div>
                    <img src="../img/logo2.png" height="40px" />
                </div>
                <div>
                    <img src="../img/header.jpg" />
                </div>
                <div>
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
            
            <div class="cle"></div>
            
            <!--菜单-->
            <div class="menu">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                </ul>
            </div>
            
            <!--轮播图-->
            <div class="lunbo">
                <img id="imgId" src="../img/1.jpg"/>
            </div>
            
            <!--热门
                将起划分成两个div
                    左边放图片
                    右边的放商品
                        
            -->
            <div class="hot">
                <!--存放热门商品和一张图片-->
                <div>
                    <h2 style="display: inline;">热门商品</h2>
                    <img  src="../img/title2.jpg" />
                </div>
                <div>
                    <!--存放左边的图片-->
                    <div class="left">
                        <img src="../img/big01.jpg" />
                    </div>
                    <!--存放商品图片-->
                    <div class="right">
                        <div class="middle">
                            <img src="../img/middle01.jpg" />
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        
                    </div>
                </div>
            </div>
            
            <div class="cle"></div>
            
            <!--广告-->
            <div class="ad1">
                <img src="../img/ad.jpg"/>
            </div>
            
            <!--最新-->
            <div></div>
            
            <!--广告-->
            <div class="ad1">
                <img src="../img/footer.jpg"/>
            </div>
            
            <!--版权foot-->
            <div class="foot">
                <p>
                        <a href="#">关于我们</a> 
                        <a href="#">关于我们</a> 
                        <a href="#">关于我们</a> 
                        <a href="#">关于我们</a> 
                        <a href="#">关于我们</a> 
                    </p>
                    <p>
                        Copyright &copy; 2005-2016 传智商城 版权所有
                    </p>
            </div>
            
            
        </div>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //周期执行定时器
//            var interId = setInterval(fun,1000);
//            var interId = setInterval("fun()",1000);
            var i = 0;
            function fun(){
                i++;
                alert(i);
                if(i==3){
                    //清除周期执行定时器
                    clearInterval(interId);
                }
            }
            //单次执行定时器
//            var timeId = setTimeout(fun1,1000);
            var timeId = setTimeout("fun1()",1000);
            function fun1(){
                i++;
                alert(i);
            }
            //清除单次执行定时器
            //clearTimeout(timeId);
        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            a{
                text-decoration: none;
            }
            .cle{
                clear: both;
            }
            /*logo 部分的div*/
            .header{
                width: 100%;
            }
            .header div{
                float:left;
                width:33.33%;
                height: 60px;
                line-height: 50px;
            }
            .header a{
                padding: 15px;
            }
            
            /*菜单部分*/
            .menu{
                width: 100%;
                background-color: #000;
                height: 50px;
                padding-top:1px
            }
            
            .menu ul li{
                list-style-type: none;
                display: inline;
            }
            
            .menu a{
                font-size: 25px;
                color: #fff;
                
            }
            
            /*轮播图*/
            .lunbo{
                width:100%;
                margin-top:10px;
                margin-bottom: 10px;
            }
            
            .lunbo img{
                width:100%;
            }
            
            /*热门商品*/
            /*.left,.right{
                float:left;
            }*/
            .left{
                float:left;
                width: 16%;
                height: 500px;
            }
            .right{
                float: left;
                width:84%;
                text-align: center;
                height: 500px;
            }
            
            .middle{
                float:left;
                width: 50%;
                height: 250px;
            }
            .item{
                float:left;
                width:16.66%;
                height: 250px;
            }
            
            /*给广告*/
            .ad1{
                width: 100%;
            }
            .ad1 img{
                width: 100%;
            }
            
            /*版权*/
            .foot{
                width:100%;
            }
            .foot p{
                text-align: center;
            }
        </style>
        <script>
        /*    步骤分析:
        1.确定事件(页面加载成功事件)
            0.设置周期执行定时器的id
            var interId;
            0.设置计数器
            var count = 0;
            onload = function(){
                //设置周期执行的定时器
                interId = setInterval(showAd,4000);
            }
        2.编写showAd函数(展示广告)
            0.计数
            count++;
            a.获取div标签对象
                var divObj = document.getElementById("divId");
            b.展示广告(显示div)
                divObj.style.css属性 = "block";
            c.设置单次执行定时器(用来计时)
                setTimeout(hideAd,2000);
            d.判断是否已经执行三次了
                if(count==3){
                    clearInterval(interId);
                }
        3.编写hideAd函数(隐藏div)
            a.获取div标签对象
                var divObj = document.getElementById("divId");
            b.展示广告(显示div)
                divObj.style.css属性 = "none";*/
            var interId;
            var count = 0;
            onload = function(){
                //设置周期执行的定时器
                interId = setInterval(showAd,4000);
            }
            //2.编写showAd函数(展示广告)
            function showAd(){
                //0.计数
                count++;
                //a.获取div标签对象
                var divObj = document.getElementById("ad");
                //b.展示广告(显示div)
                divObj.style.display = "block";
                //c.设置单次执行定时器(用来计时)
                setTimeout("hideAd()",2000);
                //d.判断是否已经执行三次了
                if(count==3){
                    clearInterval(interId);
                }
            }
            function hideAd(){
                //a.获取div标签对象
                var divObj = document.getElementById("ad");
                //b.展示广告(显示div)
                divObj.style.display = "none";
            }
        </script>
    </head>
    <body>
        <div id="ad" style="width:100%;display: none;">
            <img src="../img/ad_.jpg" width="100%" />
        </div>
        <!--
            一个大div中放置8个div
        -->
        <div>
            <!--logo
                嵌套三个div
            -->
            <div class="header">
                <div>
                    <img src="../img/logo2.png" height="40px" />
                </div>
                <div>
                    <img src="../img/header.jpg" />
                </div>
                <div>
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
            
            <div class="cle"></div>
            
            <!--菜单-->
            <div class="menu">
                <ul>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                    <li><a href="#">首页</a></li>
                </ul>
            </div>
            
            <!--轮播图-->
            <div class="lunbo">
                <img src="../img/1.jpg"/>
            </div>
            
            <!--热门
                将起划分成两个div
                    左边放图片
                    右边的放商品
                        
            -->
            <div class="hot">
                <!--存放热门商品和一张图片-->
                <div>
                    <h2 style="display: inline;">热门商品</h2>
                    <img src="../img/title2.jpg" />
                </div>
                <div>
                    <!--存放左边的图片-->
                    <div class="left">
                        <img src="../img/big01.jpg" />
                    </div>
                    <!--存放商品图片-->
                    <div class="right">
                        <div class="middle">
                            <img src="../img/middle01.jpg" />
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        <div class="item">
                            <img src="../img/small08.jpg" />
                            <p align="center"><a href="#">电饭煲</a></p>
                            <p align="center">200</p>
                        </div>
                        
                    </div>
                </div>
            </div>
            
            <div class="cle"></div>
            
            <!--广告-->
            <div class="ad1">
                <img src="../img/ad.jpg"/>
            </div>
            
            <!--最新-->
            <div></div>
            
            <!--广告-->
            <div class="ad1">
                <img src="../img/footer.jpg"/>
            </div>
            
            <!--版权foot-->
            <div class="foot">
                <p>
                        <a href="#">关于我们</a> 
                        <a href="#">关于我们</a> 
                        <a href="#">关于我们</a> 
                        <a href="#">关于我们</a> 
                        <a href="#">关于我们</a> 
                    </p>
                    <p>
                        Copyright &copy; 2005-2016 传智商城 版权所有
                    </p>
            </div>
            
            
        </div>
    </body>
    
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn1(){
//                history.forward();
                history.go(1);
            }
        </script>
    </head>
    <body>
        我是a页面<br />
        <a href="b.html">b.html</a><br>
        <input type="button" value="前进" onclick="btn1()"/>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn2(){
//                history.back();
                history.go(-1);
            }
        </script>
    </head>
    <body>
        我是b页面<br />
        
            <input type="button" value="后退" onclick="btn2()"/>
        
    </body>
    
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn3(){
                alert(location.href);
            }
            function btn(){
                location.href = "../案例3-弹出广告.html";
            }
        </script>
    </head>
    
    <body>
        <input type="button" value="获取url" onclick="btn3()">
        <input type="button" value="设置url" onclick="btn()">
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            onload = function(){
                document.getElementById("inp").onclick = function(){
                    window.close();
                }
            }
        </script>
        
    </head>
    <body>
        我是a页面
        <input type="button" value="close" id="inp"/>
    </body>
    <script>
        
    </script>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //打开a页面
            function btn(){
                window.open("a.html");            
            }
        </script>
    </head>
    <body>
            <input type="button" value="openA" onclick="btn()"/>
    </body>
    
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //对话框
//            var mes = window.prompt("请输入你的姓名","tom");
//            alert(mes);
            //确认框
            var message = confirm("你确定付款吗");
            alert(message);
        </script>
    </head>
    <body>
    </body>
    
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //获取文本框的值
            function getVal(){
                //1.获取要操作的标签对象
                var inpObj = document.getElementById("inp");
                //2.获取value属性的值
                alert(inpObj.value);
            }
            //设置value属性的值
            function setVal(){
                //1.获取要操作的标签对象
                var inpObj = document.getElementById("inp");
                //2.设置value的值
                inpObj.value = "jerry";
            }
        </script>
    </head>
    <body>
        <input type="text" name="username" value="tom" id="inp"/><br />
        <input type="button" value="获取value的值" onclick="getVal()"/>
        <input type="button" value="设置value的值" onclick="setVal()"/>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //获取标签体的内容
            function getVal(){
                //1.获取要操作的标签对象
                var spObj = document.getElementById("sp");
                //2.获取标签体的内容
                alert(spObj.innerHTML);
            }
            //设置标签体的内容
            function setVal(){
                //1.获取要操作的标签对象
                var spObj = document.getElementById("sp");
                //2.设置标签体的内容
                spObj.innerHTML += "<font color='red'>如今的现在早已不是曾经说好的以后</font>";
            }
        </script>
    </head>
    <body>
        <span id="sp">佑我中华</span><br />
        <input type="button" value="获取标签体的内容" onclick="getVal()"/>
        <input type="button" value="设置标签体的内容" onclick="setVal()"/>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //校验
            function checkInp(){
                //0.获取要校验的值
                var val = document.getElementById("inp").value;
                //校验
                //1.编写正则表达式
                var zz = /^[a-z0-9_-]{3,16}$/;  //object
                var kzz = /^\s*$/;
//                alert(typeof zz);
                //2.校验值
//                var flag = zz.test(val);
//                alert(flag);

//                alert(kzz.test(val));
                if(kzz.test(val)){
                    alert("用户名不可为空");
                }else if(!zz.test(val)){
                    alert("用户名不符合格式");
                }else{
                    alert("满足格式....");
                }
            }
        </script>
    </head>
    <body>
        <input type="text" id="inp" /><br />
        <input type="button" value="校验输入的值" onclick="checkInp()"/>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //获得焦点的时候要触发的函数
            function focusFun(){
                document.getElementById("sp").innerHTML = "输入框获得焦点";
            }
            //失去焦点的时候要触发的函数
            function blurFun(){
                document.getElementById("sp").innerHTML = "输入失去焦点了啊....";
            }
            //内容改变的时候要触发的函数
            function changeFun(){
                alert("输入框的内容改变了...");
            }
        </script>
    </head>
    <body>
        <input type="text" onfocus="focusFun()" onblur="blurFun()" onchange="changeFun()"/><br />
        <span id="sp"></span><br />
    </body>
</html>


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <style type="text/css">
        #e02, #e022 {
            border: 1px solid #000000;
              height: 200px;
             width: 200px;
        }
    </style>
    <script type="text/javascript">
        
        // 页面加载事件：当整个html页面加载成功调用
        window.onload = function(){
            // 文本框事件
            var e01 = document.getElementById("e01");
            e01.onfocus = function(){
                html("textMsg","文本框获得焦点：focus");
            }
            e01.onblur = function(){
                html("textMsg","文本框失去焦点：blur");
            }
            e01.onkeydown = function(){
                html("textMsg","键盘按下：keydown；");
            }
            e01.onkeypress = function(event){
                var event = event || window.event;
                append("textMsg","键盘按：keypress ("+ String.fromCharCode(event.keyCode)+")；");
            }
            e01.onkeyup = function(){
                append("textMsg","键盘弹起：keyup；");
            }
            
            // 鼠标事件
            var e02 = document.getElementById("e02");
            e02.onmouseover = function(){
                html("divMsg","鼠标移上：mouseover");
            }
            e02.onmouseout = function(){
                html("divMsg","鼠标移出：mouseout");
            }
            
            
            var e022 = document.getElementById("e022");
            e022.onmousedown = function(){
                html("divMsg2","鼠标按下：mousedown");
            }
            e022.onmouseup = function(){
                html("divMsg2","鼠标弹起：mouseup");
            }
            
            
            // 按钮事件
            var e03 = document.getElementById("e03");
            e03.onclick = function () {
                html("buttonMsg","单击：click");
            };
            e03.ondblclick= function () {
                html("buttonMsg","双击：dblclick");
            };
            
        };
        
        /**
         * 指定位置显示指定信息
         * @param objId ，元素的id属性值
         * @param  text，需要显示文本信息
         */
        function html(objId,text){
            document.getElementById(objId).innerHTML = text;
        }
        /**
         * 指定位置追加指定信息
         * @param objId ，元素的id属性值
         * @param  text，需要显示文本信息
         */
        function append(objId,text){
            document.getElementById(objId).innerHTML += text;
        }
        
    </script>
    
</head>
<body>
    <input id="e01" type="text" /><span id="textMsg"></span>
    <hr/>
    <div id="e02" >鼠标移上来试试</div><span id="divMsg"></span>
    <hr/>
    <div id="e022" >鼠标移上来点击试试</div><span id="divMsg2"></span>
    <hr/>
    <input id="e03" type="button" value="可以点击"/><span id="buttonMsg"></span>
</body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn(){
                /*通过id选择器获取文本框的值*/
                var userObj = document.getElementById("usernameId");
//                alert(userObj.value);
                /*获取所有span标签中的值*/
//                var spanObjArr = document.getElementsByTagName("span");
//                for(var i=0;i<spanObjArr.length;i++){
//                    alert(spanObjArr[i].innerHTML);
//                }
                /*获取所有class为spanClass的元素对象*/
//                var spanObjArr1 = document.getElementsByClassName("spanClass");
//                for(var i=0;i<spanObjArr1.length;i++){
//                    alert(spanObjArr1[i].innerHTML);
//                }
                /*获取name为hobby的元素对象*/
                var hobbyObjArr = document.getElementsByName("hobby");
                alert(hobbyObjArr.length);
            }
        </script>
    </head>
    <body>
        <input type="text" value="tom" id="usernameId" name="username"/><br />
        <input type="checkbox" name="hobby" value="抽烟" />抽烟<br />
        <input type="checkbox" name="hobby" value="喝酒" />喝酒<br />
        <input type="checkbox" name="hobby" value="烫头" />烫头<br />
        <span class="spanClass">佑我中华</span>
        <span class="spanClass">佑我中华1</span>
        <span>佑我中华2</span><br />
        <input type="button" value="获取对象" onclick="btn()" />
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            
            function btn(){
//                //创建一个标题元素节点,标题名称客,并将它加到div内部     <h1>客</h1>
//                //创建元素节点
//                var ele = document.createElement("h1");//<h1></h1>
//                //创建文本节点
//                var eleText = document.createTextNode("客");//客
//                //将文本节点添加到指定的节点中
//                ele.appendChild(eleText);//<h1>客</h1>
//                //获取div元素对象
//                var divObj = document.getElementById("di");
//                divObj.appendChild(ele);
                
                var divObj = document.getElementById("di");
                divObj.innerHTML+="<h1>客</h1>";
            }
            function btn1(){
                //删除div元素中的子节点
                var divObj = document.getElementById("di");
//                divObj.removeChild(divObj.childNodes[0]);
//                divObj.innerHTML = "";
                divObj.remove();
            }
        </script>
    </head>
    <body>
        <div id="di">
        
        </div>
        <input type="button" value="设置" onclick="btn()" />
        <input type="button" value="删除" onclick="btn1()" />
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function btn(){
                var inpObj = document.getElementById("inp");
                /*给标签对象设置属性和值*/
//                inpObj.setAttribute("value","jerry");
                inpObj.value = "jerry";
            }
            function btn1(){
                var inpObj = document.getElementById("inp");
//                var Val = inpObj.getAttribute("value");
//                alert(Val);
                alert(inpObj.value);
            }
            function btn2(){
                var inpObj = document.getElementById("inp");
                inpObj.removeAttribute("value");
//                inpObj.value = "";
            }
        </script>
    </head>
    <body>
        <input id="inp" name="asd" value="tom"/><br />
        <input type="button" value="给输入框设置默认值" onclick="btn()" /><br />
        <input type="button" value="获取输入框的值" onclick="btn1()" /><br />
        <input type="button" value="删除输入框的value属性" onclick="btn2()" /><br />
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var arr = new Array();
            var arr1 = new Array(3);
            var arr2 = new Array(1,2,3);
            
            arr[0] = 11;
            arr[1] = "tom";
            arr[2] = true;
//            alert(arr.length);
//            alert(arr.join("#"));//遍历数组,在数组每个元素之间加入#
//            alert(arr);
//            var ele = arr.shift();
//            alert(ele);
            var l = arr.unshift(5,3);
            alert(arr);
//            alert(l);
//            alert(arr);
//            alert(arr.sort());
//            alert(arr.reverse());
        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            //String
            var str = "[www.baidu.com]";
//            alert(str.length);
//            alert(str.substring(1,str.length-1));
//            alert(str.slice(1,-1));
            //Boolean
//            alert(Boolean("abc"));
            //Math
//            alert(Math.PI);
            
            //Date
//            alert(new Date().toLocaleString());
            
            var str = "188.8元";
//            alert(parseInt(str));
//            alert(parseFloat(str));
//            alert(Number(str)); //NaN
            
            var str1 = "www.baidu.com/引用数据类型 .html";
            var str2 = encodeURI(str1);
            document.write(str2+"<br/>");
            var str3 = decodeURI(str2);            
            document.write(str3);
            
            var str4 = "alert('hello js')";
            eval(str4);
            
        </script>
    </head>
    <body>
    </body>
</html>


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <script>
        /*    步骤分析:
        1.确定事件(表单提交事件)
            <form onsubmit="retrun checkForm()"></form>
            <form id="formId"></form>
        2.编写checkForm函数
            function checkForm(){
                //0/设置全局开关
                var flag = true;
                //a.获取用户名和密码输入框对象
                    var 对象 = document.getElementById("id");
                //b.获取用户名和密码的值
                    var val = 对象.value;
                //c.编写正则表达式
                    
                //d.校验
                    if(zz.test(val)){
                        //校验不通过
                        给对应的span标签中填写提示信息
                        flag = false;
                    }else{
                        //校验通过
                        给对应的span标签中填写提示信息
                    }
                //e.返回值
                return flag;
                    
            }*/
            onload = function(){
                document.getElementById("formId").onsubmit=function(){
                    //设置全局开关
                    var flag = true;
                    //a.获取用户名和密码输入框对象
                    var userObj = document.getElementById("username");
                    var pwdObj = document.getElementById("password");
                    //b.获取用户名和密码的值
                    var userVal = userObj.value;
                    var pwdVal = pwdObj.value;
//                    alert(userVal+"   "+pwdVal);
                    //c.编写正则表达式
                    var zz = /^[a-z0-9_-]{3,16}$/;  //object
                    var kzz = /^\s*$/; 
                    //d.校验
                    //用户名
                    if(kzz.test(userVal)){
                        //校验不通过
                        //给对应的span标签中填写提示信息
                        //获取span标签对象
                        document.getElementById("username_msg").innerHTML = "用户名不可为空";
                        flag = false;
                    }else if(!zz.test(userVal)){
                        //获取span标签对象
                        document.getElementById("username_msg").innerHTML = "用户名的格式不合法";
                        flag = false;
                    }else{
                        //获取span标签对象
                        document.getElementById("username_msg").innerHTML = "?";
                    }
                    
                    //密码
                    if(kzz.test(pwdVal)){
                        //校验不通过
                        //给对应的span标签中填写提示信息
                        //获取span标签对象
                        document.getElementById("password_msg").innerHTML = "<font color='#f00'>密码不可为空</font>";
                        flag = false;
                    }else if(!zz.test(pwdVal)){
                        //获取span标签对象
                        document.getElementById("password_msg").innerHTML = "密码的格式不合法";
                        flag = false;
                    }else{
                        document.getElementById("password_msg").innerHTML = "?";
                    }
                    
                    return flag;
                }
            }
    </script>
    <body>
        <form action="#" method="get" id="formId">
            <table width="60%" height="60%"  align="center" bgcolor="#ffffff">
                <tr>
                    <td colspan="3">会员注册USER REGISTER</td>
                </tr>
                <tr>
                    <td width="20%">用户名:</td>
                    <td width="40%"><input type="text" name="username" id="username"></td>
                    <td width="40%"><span id="username_msg"></span></td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="password" id="password"></td>
                    <td><span id="password_msg"></span></td>
                </tr>
                <tr>
                    <td>确认密码:</td>
                    <td><input type="password" name="repassword" id="repassword"></td>
                    <td><span id="repassword_msg"></span></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" id="email"></td>
                    <td><span id="email_msg"></span></td>
                </tr>
                <tr>
                    <td>姓名:</td>
                    <td><input type="text" name="name"></td>
                </tr>
                <tr>
                    <td>性别:</td>
                    <td>
                        <input type="radio" name="sex" value="男"> 男
                        <input type="radio" name="sex" value="女" />女
                    </td>
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td>
                        <input type="text" name="birthday">

                    </td>
                </tr>
                <tr>
                    <td>验证码</td>
                    <td>
                        <input type="text" name="checkcode">
                    </td>
                </tr>
                <tr>
                    <td colspan="2">
                        <input type="submit" value="注册" />
                    </td>
                </tr>
            </table>
        </form>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            /*        步骤分析:
            1.确定事件(页面加载成功事件)
                onload = function(){
                    
                }
            2.编写匿名函数
                a.获取当前页面所有行对象
                    var trObjArr = document.getElementsByTagName("tr");
                b.遍历数组对象,给计数行和偶数行添加不同的背景颜色
                    for(var i=0;i<trObjArr.length;i++){
                        if(i%2==0){
                            trObjArr[i].style.backgroundColor = "颜色";
                        }else{
                            trObjArr[i].style.backgroundColor = "颜色";
                        }
                    }*/
            onload = function (){
                //a.获取当前页面所有行对象
                var trObjArr = document.getElementsByTagName("tr");
                //b.遍历数组对象,给计数行和偶数行添加不同的背景颜色
                for(var i=1;i<trObjArr.length;i++){
                    if(i%2==0){
                        trObjArr[i].style.backgroundColor = "#ff0";
                    }else{
                        trObjArr[i].style.backgroundColor = "#f0f";
                    }
                }
            }
        </script>
    </head>
    <body>
        <table id="tab1" border="1" width="800" align="center" >
            
            <tr style="background-color: #999999;">
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td>2</td>
                <td>电脑办公</td>
                <td>电脑办公类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td>4</td>
                <td>家居饰品</td>
                <td>家居饰品类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
        </table>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            /*    步骤分析:
        1.确定事件(单击事件)
            给头部的复选框添加单击事件
        2.编写函数
            a.获取头部复选框状态
                对象.checked;
            b.获取其他的复选框对象
            c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性*/
            function checkAll(flag){
//                alert(flag);
                //a.获取头部复选框状态
//                alert(obj.checked);
                //b.获取其他的复选框对象
                var elseTrObjArr = document.getElementsByClassName("itemSelect");
                //c.遍历其他的复选框对象数组,分别给每一个复选框对象设置checked属性
                for(var i=0;i<elseTrObjArr.length;i++){
                    elseTrObjArr[i].checked = flag;
                }
            }
        </script>
    </head>
    <body>
        <table id="tab1" border="1" width="800" align="center" >
            <tr>
                <td colspan="5"><input type="button" value="添加"/> <input type="button" value="删除"></td>
            </tr>
            <tr>                                <!--this表示当前元素对象-->
                <th><input type="checkbox" onclick="checkAll(this.checked)"></th>
                <th>分类ID</th>
                <th>分类名称</th>
                <th>分类描述</th>
                <th>操作</th>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>1</td>
                <td>手机数码</td>
                <td>手机数码类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>2</td>
                <td>电脑办公</td>
                <td>电脑办公类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>3</td>
                <td>鞋靴箱包</td>
                <td>鞋靴箱包类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
            <tr>
                <td><input type="checkbox" class="itemSelect"></td>
                <td>4</td>
                <td>家居饰品</td>
                <td>家居饰品类商品</td>
                <td><a href="">修改</a>|<a href="">删除</a></td>
            </tr>
        </table>
    </body>
</html>


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            // 定义二维数组:
            var arr = new Array(4);
            arr[0] = new Array("石家庄","邯郸","保定","秦皇岛");
            arr[1] = new Array("郑州市","洛阳市","安阳市","南阳市");
            arr[2] = new Array("沈阳市","锦州市","大连市","铁岭市");
            arr[3] = new Array("长春市","吉林市","四平市","通化市");
        </script>
        <script>
            /*步骤分析:
        1.确定事件(改变事件)
            给省份的下拉选添加改变事件
        2.编写changePro函数
            function changePro(){
                a.获取选中省份所对应的市数组(value)
                    var cityArr = arr[value];
                b.获取市的下拉选对象
                    var cityObj = document.getElementById("cityId");
                
                c.遍历市数组,将每一个市拼成option追加到市的下拉选中
                    cityObj.innerHTML += "";
                    
            }*/
            function changePro(index){
//                alert(index);
//                a.获取选中省份所对应的市数组(value)
                var cityArr = arr[index];
                //b.获取市的下拉选对象
                var cityObj = document.getElementById("city");
                //初始化
                cityObj.innerHTML = "<option>=请选择=</option>";
                //c.遍历市数组,将每一个市拼成option追加到市的下拉选中
                for(var i=0;i<cityArr.length;i++){
                    cityObj.innerHTML += "<option>"+cityArr[i]+"</option>";
                }
            }
        </script>
    </head>
    <body>
        <form action="#" method="get">
            <input type="hidden" name="id" value="007"/>
            姓名:<input name="username" value="xuduoduo"/><br>
            密码:<input type="password" name="password"  value="123"><br>
            性别:<input type="radio" name="sex" value="1" checked="checked">男
                <input type="radio" name="sex" value="0">女
                <br>
            爱好:<input type="checkbox" name="hobby" value="eat">吃
                <input type="checkbox" name="hobby" value="drink" checked="checked">喝
                <input type="checkbox" name="hobby" value="sleep" checked="checked">睡
                <br>
            头像:<input type="file" name="photo"><br>
            籍贯:
                <select name="pro" onchange="changePro(this.value)">
                    <option >--请选择--</option>
                    <option value="0">河北</option>
                    <option value="1">河南</option>
                    <option value="2">辽宁</option>
                    <option value="3">吉林</option>
                </select>
                <select id="city">
                    <option >-请选择-</option>     
                </select>
            <br>
            自我介绍:
                <textarea name="intr" cols="40" rows="4">good!</textarea>
            <br>
            <input type="submit" value="保存"/>
            <input type="reset" />
            <input type="button" value="普通按钮"/>
        </form>
    </body>
</html>
<!--
    
-->


案例1-注册页面的简单校验
    需求分析:
        当表单提交的时候,对用户名和密码进行校验,校验是否为空,如果用户名和密码为空,则弹框提示并不允许表单提交.反之允许
    技术分析:
        javaScript:
    //////////////
    步骤分析:
        1.确定事件(表单提交事件)
            //checkForm函数必须要有返回值(Boolean)
            <form onsubmit="return checkForm()"></form>
        2.编写函数(校验用户名和密码)
            a.获取用户名和密码的标签对象
                var obj = document.getElementById("id");
            b.获取用户名和密码的值(value属性)
                var userVal = obj.value;
            c.校验是否为空
                if(userVal==""){
                    alert("用户名不可为空");
                    return false;
                }
            d.返回值
            return true;
案例2-轮播图
    需求分析:
        页面加载成功后,每隔2秒切换一张图片
    技术分析:
        javaScript:
        定时器
    ///////////
    步骤分析:
        1.确定事件(页面加载成功事件)
            onload = function(){
                //设置周期执行的定时
                setInterval(changeImg,2000);
            }
        2.编写changeImg函数(改变图片)
            function changeImg(){
                a.获取图片的标签对象
                    var imgObj = document.getElementById("id");
                b.改变src属性的值
                    imgObj.src = "url";
            }

案例3-弹出广告
    需求分析:
        页面加载成功后,每隔4秒展示一次广告,广告时间2秒钟,以此轮询3次
    技术分析:
        定时器
    /////////////////////
    步骤分析:
        1.确定事件(页面加载成功事件)
            0.设置周期执行定时器的id
            var interId;
            0.设置计数器
            var count = 0;
            onload = function(){
                //设置周期执行的定时器
                interId = setInterval(showAd,4000);
            }
        2.编写showAd函数(展示广告)
            0.计数
            count++;
            a.获取div标签对象
                var divObj = document.getElementById("divId");
            b.展示广告(显示div)
                divObj.style.css属性 = "block";
            c.设置单次执行定时器(用来计时)
                setTimeout(hideAd,2000);
            d.判断是否已经执行三次了
                if(count==3){
                    clearInterval(interId);
                }
        3.编写hideAd函数(隐藏div)
            a.获取div标签对象
                var divObj = document.getElementById("divId");
            b.展示广告(显示div)
                divObj.style.css属性 = "none";

 


原文链接:https://www.cnblogs.com/haizai/p/11335818.html
如有疑问请与原作者联系

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：java设计模式——单例模式

下一篇：微信公众号发送消息给用户 php

相关文章

IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设

网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源

网站联盟： 联盟新闻 联盟介绍 联盟点评 网赚技巧

行业资讯： 搜索引擎 网络游戏 电子商务 广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护

软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识： 网络协议 网络安全 网络管理 组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条
最新资讯
热门关注
热门标签