首页 > 代码库 > [学习笔记]day03&JS

[学习笔记]day03&JS

前提:需要掌握的知识点

 
 
 
 
 
填写HTML代码
Element元素中有一个innerHTML属性,这个属性可以填写一段html代码
innerHTML = "<font color=‘red‘>这是一段测试的文本内容</font>"
这样做可以修改body中所需要修改的内容
 
 
 
 
 
 
定时器:
    setInterval();每隔多少毫秒去执行一个操作
    setTimeout();每隔多少毫秒后去执行一个操作
    clearInterval();取消由 setInterval()设置的 timeout
    clearTimeout();取消由 setTimeout() 方法设置的 timeout
 
 
 
 
 
 
事件:
    onl oad();页面加载事件
    onclick():按钮事件
    onfocus() : 获取到焦点
    onblur():  失去焦点
    onkeyup(): 当用户输入完成之后,按键弹起触发的事件.
 
 
 
 
 
 
打印方式:
console.log("显示方法被调用了..."):在浏览器-->检查-->console中显示
alert("显示方法被调用了..."):浏览器-->弹出页面提示
 
 
 
 
 
 
    绝对定位:
        position : absolute (必须先指定,才能使用left  top);
        left:  距离左边的距离
        top:  距离顶部
 

 

案例一,定时弹出广告**

 
 
 
 
 
css属性: display
    显示: block
    隐藏: none;
 
 
 
 
 
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--每隔2秒弹出广告-->
        <script type="text/javascript">
/*      1. 确定事件 onl oad(页面加载完成)
        2. 事件通常都会触发一个函数 
            1. 首先都获取广告所在的img
            2. 启动定时器,2秒之后显示广告
            3. 修改它的属性值 style.display="block"*/
            var i;
            function dis(){
                var v = document.getElementById("picture");
                /*alert("消失");*/
                //将图片样式设置为消失
                v.style.display="none";
                setTimeout("show()",2000);
            }
            function show(){
                var v = document.getElementById("picture");
                /*alert("显示");*/
                 //将图片样式设置为显示
                v.style.display="block";
                console.log("方法被调用了")
                //清除定时器setInterval()效果
                clearInterval(i);
                //2秒后执行dis()
                setTimeout("dis()",2000);
            }
            function init(){
                //每2隔秒调用show方法
                i = setInterval("show()",2000);
            }
        </script>
    </head>
    <body onload="init()">
        <div>
            <img id="picture" style="display: none;" src="img/1.jpg" width="100%"/>
        </div>
    </body>
</html>
 

案例二,注册页面优化

 
 
 
 
 
需求:当用户输入的时候,我们需要对用户输入的内容进行表单的验证,这样可以减轻对服务器的压力
 

代码实现

 
 
 
 
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>网站注册页面优化</title>
        <link rel="stylesheet" href="../css/main.css" />
        <script type="text/javascript" src="../js/check.js" ></script>
        <script>

            /*
             1. 确认事件 onsubmit  并且注意onsubmit="return checkForm()"
                2. 实现checkForm这个方法
                   1. 对用户名做非空判断,
                   2. 对用户名进行输入长度判断
                   3. 输入的密码长度不能少于8位
                   4. 两次输入的密码必须一样
                   5. 邮箱格式需要正确sdfasdf@qq.com.cn
                3.  当用户输入有问题的时候, 需要在后面给出友好提示
                   1. 修改span的内容 使用innerHTML
?
             */
            function showTips(){
                var span = document.getElementById("spanId");
                span.innerHTML = "<font color=‘red‘>用户名不能为空,长度须大于6</font>"
            }

            function checkUsername(){

                //1. 对用户名做非空判断,
                //先得获取用户输入
                var username = document.getElementById("username");
                //alert(username.value);
                var uValue = username.value;
                //类型的转换
//              var i = 123;
//              alert(i.toString());
//              var j = "hello world";
//              var m = j.substring(0,6);
//              alert(m);
?
                //对用户名进行输入长度判断
                if(uValue == "" || uValue.length < 6){
                    //在后面的span中填入给用户温馨提示
                    /*
                      1.首先获取span
                      2. 修改span的innerHTML属性
                     */
                    var span = document.getElementById("spanId");
                    span.innerHTML = "<font color=‘red‘>用户名不合法</font>"

                    return false;
                }else{
                    var span = document.getElementById("spanId");
                    span.innerHTML = "<font color=‘red‘>恭喜您,合法</font>"
                }

            }

            function checkForm(){
                //1. 对用户名做非空判断,
                //先得获取用户输入
                var username = document.getElementById("username");
                //alert(username.value);
                var uValue = username.value;
                //类型的转换
//              var i = 123;
//              alert(i.toString());
//              var j = "hello world";
//              var m = j.substring(0,6);
//              alert(m);
?
                //对用户名进行输入长度判断
                if(uValue == "" || uValue.length < 6){
                    //在后面的span中填入给用户温馨提示
                    /*
                      1.首先获取span
                      2. 修改span的innerHTML属性
                     */
                    var span = document.getElementById("spanId");
                    span.innerHTML = "<font color=‘red‘>用户名不合法</font>"

                    return false;
                }
                /*
                    输入的密码长度不能少于8位
                    先获取到密码框输入的内容
                    判断它的长度是否小于8
                   4. 两次输入的密码必须一样
                    获取重复密码框的内容
                 * */
                var pValue = document.getElementById("password").value;
                var rePValue = document.getElementById("repassword").value;

                if(pValue.length < 8){
                    var span = document.getElementById("password_spanId");
                    span.innerHTML = "<font color=‘red‘>密码长度不够8位</font>"
                    return false;
                }else{
                    var span = document.getElementById("password_spanId");
                    span.innerHTML="";
                }

                if(pValue != rePValue){
                    var span = document.getElementById("repassword_spanId");
                    span.innerHTML = "<font color=‘red‘>两次输入密码不一致</font>"
                    return false;
                }else{
                    var span = document.getElementById("repassword_spanId");
                    span.innerHTML = ""
                }
                //邮箱校验 正则表达式
                var email = document.getElementById("email").value;
                //正则表达式
                /*var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/; 
                if(! reg.test(email)){
                    alert("邮箱表达式有问题")
                    return false;
                }*/
                if(!checkEmail(email)){
                    return false;
                }


                return true;
            }
        </script>

    </head>
    <body>
        <div style="width: 100%;">
            <div>
                <div class="logo">
                    <img src="../img/logo2.png" />
                </div>
                <div class="logo">
                    <img src="../image/header.jpg" />
                </div>
                <div class="logo" style="padding-top: 20px;height: 40px;" >
                    <a href="#">登录</a>
                    <a href="#">注册</a>
                    <a href="#">购物车</a>
                </div>
            </div>
            <div style="clear: both;"></div>
            <!--第二行:导航栏-->
            <div style=" height: 50px;">
                <ul>
                    <li style="display: inline; color:white">首页</li>
                    <li style="display: inline; color:white">手机数码</li>
                    <li style="display: inline; color:white">电脑办公</li>
                    <li style="display: inline; color:white">香烟酒水</li>
                </ul>
            </div>

            <!--注册模块-->
            <div style="height: 600px;border: 1px solid red;background: url(../image/regist_bg.jpg);">
                <div style="position:absolute;top:210px;left:360px;border: 5px solid gray; width: 50%;height: 60%;">
                    <form  action="js输出.html" onsubmit="return checkForm()">
                                    <table border="1px"  width="80%" height="90%" align="center">
                                        <!--创建一个九行两列-->
                                        <tr>
                                            <td colspan="2">
                                                <h3>会员注册</h3>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="right">用户名:</td>
                                            <td>
                                                <input type="text" id="username" onfocus="showTips()" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="spanId"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="right">密码:</td>
                                            <td>
                                                <input type="password" id="password"/><span id="password_spanId"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="right">确认密码:</td>
                                            <td>
                                                <input type="password" id="repassword" /><span id="repassword_spanId"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="right">
                                                邮箱:
                                            </td>
                                            <td>
                                                <input type="text" id="email"/><span id="email_spanId"></span>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="right">
                                                姓名:
                                            </td>
                                            <td>
                                                <input type="text" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="right">
                                                性别:
                                            </td>
                                            <td >
                                                <input type="radio" name="sex" />
                                                <input type="radio" name="sex" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="right">
                                                出生日期:
                                            </td>
                                            <td>
                                                <input type="date" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td align="right">
                                                验证码:
                                            </td>
                                            <td>
                                                <input type="text" />
                                                <img src="" />
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>
                                            </td>
                                            <td>
                                                <input type="submit" value="注册"/>
                                            </td>
                                        </tr>
                                    </table>
                                </form>
                </div>

            </div>
            <div>
                <img src="../image/footer.jpg" width="100%" />
            </div>
            <!--8-->
            <div style="text-align: center;">
                <a href="#">关于我们</a>
                <a href="#">联系我们</a>
                <a href="#">招贤纳士</a>
                <a href="#">法律声明</a>
                <a href="#">友情链接</a>
                <a href="#">支付方式</a>
                <a href="#">配送方式</a>
                <a href="#">服务声明</a>
                <a href="#">广告声明</a> <br />
                Copyright ? 2005-2016 xx商城 版权所有
            </div>
        </div>
    </body>
</html>
 

案例三:表单的隔行换色&全选与全不选

 
 
 
 
 
需求:我们商品分类的信息太多,如果每一行都显示同一个颜色的话会让人看的眼花,为了提高用户体验,减少用户看错的情况,需要对表格进行隔行换色
 

技术分析

 
 
 
 
 
【HTML中checked属性】
var ck1 = document.getElementById("ck1");
alert(ck1.checked); 当被选中它就是true, 否则就是false
 

代码实现:

 
 
 
 
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload = function() {
                //返回对拥有指定 id 的第一个对象的引用。
                var table1 = document.getElementById("table1");
                //tBodies[0] 返回包含表格中所有 tbody 的一个数组。
                //rows[] 返回包含表格中所有行的一个数组。
                var rows = table1.tBodies[0].rows;
                //alert(rows);
                for(var i=0;i < rows.length;i++){
                    var row = rows[i];
                    if(i%2 == 0){
                        row.style.backgroundColor = "red";
                    }else{
                        row.style.backgroundColor = "yellow";
                    }
                }
            }
            function checkAll(){
                var ck1 = document.getElementById("ck1");
                //alert(ck1);
                //alert(ck1.checked);//勾选上为true,取消为false
                //返回带有指定名称的对象集合。
                var ck2 = document.getElementsByName("ck2");
                //alert(ck2.length);
                //遍历该名称对象的集合,获取每一个对象
                for(var i = 0; i <ck2.length; i++){
                    //判断对象是否勾选,将表头的属性赋值过来
                    ck2[i].checked = ck1.checked;
                }
            }
        </script>
    </head>
?
    <body>
        <table id="table1" border="1px" width="700px" height="200px" align="center">
            <thead>
                <tr>
                    <td>
                        <input type="checkbox" id="ck1" onclick="checkAll()"/>
                    </td>
                    <th>
                        分类ID
                    </th>
                    <th>
                        分类名称
                    </th>
                    <th>
                        分类商品
                    </th>
                    <th>
                        分类描述
                    </th>
                    <th>
                        操作
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr align="center">
                    <td>
                        <input onclick="checkAll()" type="checkbox" name="ck2" />
                    </td>
                    <td>
                        1
                    </td>
                    <td>
                        手机数码
                    </td>
                    <td>
                        三星NOTE7,IPhone7
                    </td>
                    <td>
                        这里面放的都是最新手机
                    </td>
                    <td>
                        <a href="#">修改</a>|
                        <a href="#">删除</a>
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <input onclick="checkAll()" type="checkbox" name="ck2" />
                    </td>
                    <td>
                        2
                    </td>
                    <td>
                        黄鹤楼,双喜,长白山,白沙
                    </td>
                    <td>
                        分类商品
                    </td>
                    <td>
                        这里面都是香烟
                    </td>
                    <td>
                        <a href="#">修改</a>|
                        <a href="#">删除</a>
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <input onclick="checkAll()" type="checkbox" name="ck2" />
                    </td>
                    <td>
                        3
                    </td>
                    <td>
                        电脑办公
                    </td>
                    <td>
                        MBP,联想
                    </td>
                    <td>
                        电脑
                    </td>
                    <td>
                        <a href="#">修改</a>|
                        <a href="#">删除</a>
                    </td>
                </tr>
                <tr align="center">
                    <td>
                        <input onclick="checkAll()" type="checkbox" name="ck2" />
                    </td>
                    <td>
                        4
                    </td>
                    <td>
                        冰箱洗衣机
                    </td>
                    <td>
                        海尔,格力,三菱,美的
                    </td>
                    <td>
                        冰箱洗衣机
                    </td>
                    <td>
                        <a href="#">修改</a>|
                        <a href="#">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </body>
?
</html>
 

案例四:控制下拉列表的左右选择

 
 
 
 
 
需求:商品分类界面中,当我们点击全选框的时候,我们希望选中所有的商品,当我们取消掉的时候,我们希望不选中所有的商品
 

技术分析

 
 
 
 
 
1. 确定事件 onclick();
2. 实现全选checkbox 所要触发的函数
3. 获去最上面全选的checked属性
4. 修改列表中商品项的选中状态
 

代码实现:

 
 
 
 
 
<!DOCTYPE html>
<html>
?
    <head>
        <meta charset="UTF-8">
        <title>商品左右选择页面</title>
        <script type="text/javascript">
        //商品的单个选择
            function selectOne(){
                var left = document.getElementById("selectLeft");
                var right = document.getElementById("selectRight");
                var op = right.options;
                for(var i = 0; i < op.length; i++) {
                    //通过selected判断某个对象是否被选中
                    if(op[i].selected) {
                        left.appendChild(op[i]);
                    }
                }
            }
            //全选
            function selectAll(){
                //获取左边商品的select
                var left = document.getElementById("selectLeft")
                //获取右边商品的select
                var right = document.getElementById("selectRight");
                //获取右边商品的所有option
                var op = right.options;
                //遍历options集合/数组
                for(var i = 0; i < op.length; i++){
                    left.appendChild(op[i--]);
                }
            }
        </script>
    </head>
?
    <body>
        <!--创建一个四行两列的表格-->
        <table border="1px" width="300px">
            <tr>
                <td>分类名称</td>
                <td>
                    <input type="text" value="手机数码" />
                </td>
            </tr>
            <tr>
                <td>分类描述</td>
                <td>
                    <input type="text" value="这里头满满的都是肾" />
                </td>
            </tr>
            <tr>
                <td>分类商品</td>
                <td>
                    <div style="float: left;">
                            已有商品<br />
                            <select multiple="multiple" id="selectLeft">
                                <option>肾6</option>
                                <option>肾7</option>
                                <option>肾8</option>
                                <option>肾6</option>
                                <option>锤子</option>
                            </select><br />
                        <a href="#">&gt;&gt;</a><br />
                        <a href="#">&gt;&gt;&gt;</a>
                    </div>
?
                    <div style="float: right;">
                            未有商品<br />
                            <select multiple="multiple" id="selectRight" ondblclick="selectOne()">
                                <option>三星note7</option>
                                <option>小米Mix</option>
                                <option>华为meta9</option>
                                <option>波导手机</option>
                                <option>oppoR9</option>
                            </select><br />
                        <a href="#" onclick="selectOne()">&lt;&lt;</a><br />
                        <a href="#" onclick="selectAll()">&lt;&lt;&lt;</a>
                    </div>
                </td>
            </tr>
            <tr>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
?
</html>
 

案例五,省市联动

 
 
 
 
 
需求:在我们的分类管理中,我们要能够去修改我们的分类信息,当我们一点修改的时候,跳转到一个可以编辑的页面,这里面能够修改分类的名称,分类的描述,以及分类的商品
 

技术分析

 
 
 
 
 
1. 确定事件: onclick
2. 需要实现事件所触发的函数,selectOne
3. 找到已有商品这个Select
4. 从左边的select中,寻找哪一个选项,被选中了.
5. 找到未有商品所对应的select
6. 将左侧选中的商品,动态的添加到右侧未有的商品中
 

代码实现:

 
 
 
 
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
        //创建包含城市名称的二维数组
            var cites = new Array(3);
            cites[0] = new Array("武汉", "黄冈", "黄石", "九江");
            cites[1] = new Array("广州", "深圳", "佛山", "惠州");
            cites[2] = new Array("长沙", "怀化", "衡阳");
        //onchange事件对应的函数
            function changePrince() {
                //获取指定 id 的第一个对象的引用。
                var prince = document.getElementById("changePrince");
                //获取省份的角标
                var index = prince.value;
                //alert(index);
                //根据角标找到该省的城市组
                var cite = cites[index];
                //找到放置城市的select
                var prince1 = document.getElementById("selectPrince");
                //alert(prince);
                //清空select中的option
                prince1.options.length=0;
                //遍历城市组,获取里面的城市
                for(var i=0;i<cite.length;i++){
                    //创建option节点
                    var op = document.createElement("option");
                    //创建城市名称文本
                    var tn = document.createTextNode(cite[i]);
                    //将城市名添加进option中
                    op.appendChild(tn);
                    //将option添加进select中
                    prince1.appendChild(op);
                }
            }
        </script>
    </head>
?
    <body>
        <!--省份-->
        <select id="changePrince" onchange="changePrince()">
            <option value="0">湖北</option>
            <option value="1">广东</option>
            <option value="2">湖南</option>
        </select>
        <!--城市-->
        <select id="selectPrince">
?
        </select>
    </body>
?
</html>
 

 

[学习笔记]day03&JS