Js简单学习

来源：互联网发布：离线地图知乎编辑：程序博客网时间：2024/06/06 11:46

获取元素

    <head>        <script>            window.onload = function(){                //获取页面指定位置的元素                var uEle = document.getElementById("username");                //alert(uEle);                //获取页面指定位置的内容(值)                var uValue = uEle.value;                alert(uValue);            }        </script>    </head>    <body>        用户名：<input type="text" name="username" id="username"/><br />        密码: <input type="password" name="password" />    </body>

或者

    <head>        <script>            function init(){                //获取页面指定位置的元素                var uEle = document.getElementById("username");                //alert(uEle);                //获取页面指定位置的内容(值)                var uValue = uEle.value;                alert(uValue);            }        </script>    </head>    <body onload="init()">        用户名：<input type="text" name="username" id="username"/><br />        密码: <input type="password" name="password" />    </body>

页面表单注册

    <script>            function checkForm(){                /*校验邮箱*/                var eValue = document.getElementById("eamil").value;                if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){                    alert("邮箱格式不正确!");                    return false;                }            }        </script><body>        <table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">            <tr>                <td height="600px" background="../img/regist_bg.jpg">                    <!--嵌套一个十行二列的表格-->                    <form action="#" method="get" name="regForm" onsubmit="return checkForm()">                        <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">                            <tr>                                <td>                                    Emaile                                </td>                                <td>                                    <input type="text" name="email" size="34px" id="eamil"/>                                </td>                            </tr>                            <tr>                                <td colspan="2">                                    <input type="submit" value="注册" />                                </td>                            </tr>                        </table>                    </form>                </td>                           </tr>        </table>    </body>

轮播图片

<script>            function init(){                //书写轮图片显示的定时操作                setInterval("changeImg()",3000);            }            //书写函数            var i=0            function changeImg(){                i++;                //获取图片位置并设置src属性值                document.getElementById("img1").src="../img/"+i+".jpg";                if(i==3){                    i=0;                }            }        </script><body onload="init()">    <div id="">                <img src="../img/1.jpg" width="100%" id="img1"/>    </div></body>

图片定时弹出、消失

var time;function init(){    //1.设置显示广告图片的定时操作    time = setInterval("showAd()",3000);}function showAd(){    //3.获取广告图片的位置    var adEle = document.getElementById("img2");    //4.修改广告图片元素里面的属性让其显示    adEle.style.display = "block";    //5.清除显示图片的定时操作    clearInterval(time);    //6.设置隐藏图片的定时操作    var timeHide = setInterval("hiddenAd()",3000);}//7.书写隐藏广告图片的函数function hiddenAd(){    //8.获取广告图片并设置其style属性的display值为none    document.getElementById("img2").style.display= "none";    //9.清除隐藏广告图片的定时操作        clearInterval(timeHide);}<body onload="init()"><img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/></body>

鼠标onfocus、onblur

    function showTips(id,info){                document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";            }            function check(id,info){                //1.获取用户输入的用户名数据                var uValue = document.getElementById(id).value;                //2.进行校验                if(uValue==""){                    document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";                }else{                    document.getElementById(id+"span").innerHTML="";                }            }<td>                                    <input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空！')"/><span id="userspan"></span>                                </td>

表格隔行换色

        window.onload = function(){                //1.获取表格                var tblEle = document.getElementById("tbl");                //2.获取表格中tbody里面的行数(长度)                var len = tblEle.tBodies[0].rows.length;                //alert(len);                //3.对tbody里面的行进行遍历                for(var i=0;i<len;i++){                    if(i%2==0){                        //4.对偶数行设置背景颜色                        tblEle.tBodies[0].rows[i].style.backgroundColor="pink";                    }else{                        //5.对奇数行设置背景颜色                        tblEle.tBodies[0].rows[i].style.backgroundColor="gold";                    }                }            }

本页面跳转

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script>            window.onload = function(){                document.getElementById("btn").onclick = function(){                    location.href="惊喜.html"                }            }        </script>    </head>    <body>        <input type="button" value="点我有惊喜！" id="btn" />    </body></html>

全选和全不选

        <script>            function checkAll(){                //1.获取编号前面的复选框                var checkAllEle = document.getElementById("checkAll");                //2.对编号前面复选框的状态进行判断                if(checkAllEle.checked==true){                    //3.获取下面所有的复选框                    var checkOnes = document.getElementsByName("checkOne");                    //4.对获取的所有复选框进行遍历                    for(var i=0;i<checkOnes.length;i++){                        //5.拿到每一个复选框，并将其状态置为选中                        checkOnes[i].checked=true;                    }                }else{                    //6.获取下面所有的复选框                    var checkOnes = document.getElementsByName("checkOne");                    //7.对获取的所有复选框进行遍历                    for(var i=0;i<checkOnes.length;i++){                        //8.拿到每一个复选框，并将其状态置为未选中                        checkOnes[i].checked=false;                    }                }            }        </script>、、、    <tr>                    <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>                    <th>编号</th>                    <th>姓名</th>                    <th>年龄</th>                </tr>            </thead>            <tbody>                <tr >                    <td><input type="checkbox" name="checkOne"/></td>                    <td>1</td>                    <td>张三</td>                    <td>22</td>                </tr>                <tr >                    <td><input type="checkbox" name="checkOne"/></td>                    <td>2</td>                    <td>李四</td>                    <td>25</td>                </tr>

态添加城市

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>动态添加城市</title>        <script>            window.onload = function(){                document.getElementById("btn").onclick = function(){                    //1.获取ul元素节点                    var ulEle = document.getElementById("ul1");                    //2.创建城市文本节点                    var textNode = document.createTextNode("深圳");//深圳                    //3.创建li元素节点                    var liEle = document.createElement("li");//<li></li>                    //4.将城市文本节点添加到li元素节点中去                    liEle.appendChild(textNode);//<li>深圳</li>                    //5.将li添加到ul中去                    ulEle.appendChild(liEle);                }            }        </script>           </head>    <body>        <input type="button" value="添加新城市" id="btn"/>        <ul id="ul1">            <li>北京</li>            <li>上海</li>            <li>广州</li>        </ul>    </body></html>

二级城市联动

        <script>            //1.创建一个二维数组用于存储省份和城市            var cities = new Array(3);            cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");            cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");            cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");            cities[3] = new Array("郑州市","洛阳市","开封市");            function changeCity(val){                //7.获取第二个下拉列表                var cityEle = document.getElementById("city");                //9.清空第二个下拉列表的option内容                cityEle.options.length=0;                //2.遍历二维数组中的省份                for(var i=0;i<cities.length;i++){                    //注意，比较的是角标                    if(val==i){                        //3.遍历用户选择的省份下的城市                        for(var j=0;j<cities[i].length;j++){                            //alert(cities[i][j]);                            //4.创建城市的文本节点                            var textNode = document.createTextNode(cities[i][j]);                            //5.创建option元素节点                            var opEle = document.createElement("option");                            //6.将城市的文本节点添加到option元素节点                            opEle.appendChild(textNode);                            //8.将option元素节点添加到第二个下拉列表中去                            cityEle.appendChild(opEle);                        }                    }                }            }        </script><td>                                <select onchange="changeCity(this.value)">                                    <option>--请选择--</option>                                    <option value="0">湖北</option>                                    <option value="1">湖南</option>                                    <option value="2">河北</option>                                    <option value="3">河南</option>                                </select>                                <select id="city">                                </select>                            </td>

阅读全文

0 0