js

最新推荐文章于 2024-09-02 08:12:38 发布

hr963171814

最新推荐文章于 2024-09-02 08:12:38 发布

阅读量674

点赞数

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.youkuaiyun.com/hr963171814/article/details/53296928

js 专栏收录该内容

3 篇文章

订阅专栏

1.做一个页面弹图片,弹完就隐藏

总结

事件是onload()
函数是:init();//showAd()//hiddenAd();
方法是:setTimeout();//setIntevl();

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--script标签-->
        <script>
            var id_Interval;
            function showAd(){
                //获取要操作的元素
                var ad = document.getElementById("ad"); //<img>
                //是不是要操作元素里面的显示
//              alert(ad.style);
                ad.style.display="block";

                console.log("显示方法被调用了...")
//              setTimeout("hideAd()",3000);

                //这里需要想办法取消定时器
                clearInterval(id_Interval);
                //让广告显示3秒钟之后再去执行
                setTimeout("hideAd()",3000); 
            }
            function hideAd(){
                var ad = document.getElementById("ad"); //<img>
                //是不是要操作元素里面的显示
//              alert(ad.style);
                ad.style.display="none";
            }
            window.onload = function(){
                //三秒之后显示广告
//              setTimeout("showAd()",3000);
                //setTimeout(showAd,3000); //传入的是方法的应用
            //  setTimeout(showAd(),30000); // 这个调用有问题      
                id_Interval = setInterval("showAd()",3000); //启动了一个定时器  
            }   
        </script>
    </head>
    <body>
        <img id="ad" style="display: none; width: 100%;" src="../products/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" />
    </body>
</html>

2.注册页面校验的优化;

总结:

事件是:onfocus;//onblur();//onkeyup();
函数:checkName();//checkPassword();
方法:getElementById();//.value();获取值;

<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>

3.表格里面的隔行上背景,checkbox的全选与全取消;

总结:
事件是:onload();//oncilck();
函数是:function();//selectAll();
方法是:tbodies[0].rows;//rows[i].style.backgroundcolor = “”;
–checked()

<script>
        /*
         1. 确定事件,文档加载onload
         2. 事件要触发函数
                获取到表格
                获取到所有的行
                    然后对奇数行改变 red
                    对偶数行改变成黄色
         */
        window.onload = function(){
            var table1 = document.getElementById("table1");
//          var rows = table1.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 = "yellow";
                }else{
                    row.style.backgroundColor = "red";
                }
            }   
        }   
    </script>
/*
                1.确定事件:onclick 
                2.实现函数也声明
                    获得checkbox
                    获取当前点击之后的状态checked 还是非
            */
        function selectAll(){
            var ckall = document.getElementById("ckall")
//          alert(ckall.checked);
            var checkedFlag = ckall.checked;
            var ckones = document.getElementsByName("ckone");
            for (var i=0; i<ckones.length; i++) {
                var ckone = ckones[i];
                ckone.checked = checkedFlag;
            }
        }

4.省市联动select标签;

总结:
事件是:onchange();
函数是:创建元素,节点等;createElement()/
方法是:/appendChild();

<script>
            /*
             先准备数据
             * */
            var cities = new Array(4);
            cities[0] = new Array("深圳市","东莞市","广州市","佛山市"); //广东省
            cities[1] = new Array("哈尔滨","齐齐哈尔市","漠河"); //黑龙江
            cities[2] = new Array("黄石市","黄冈市","武汉市","孝感市"); //湖北省
            cities[3] = new Array("拉萨市","阿里地区","八一","塔尔村"); //西藏

            /*
             首先还是确认事件onchange
             事件对应所要触发的方法 changeProvince()
             */
            function changeProvince(){
                //得到要操作的select
                var selectProvince = document.getElementById("selectProvince");
                //判断它当前被选中的值
                var index = selectProvince.value;
                //从数组中去找到对应的城市数组
                var selectCities = cities[index];

                //找到放置城市信息的select
                var selectCity = document.getElementById("selectCity");

                //清空select中的option
                selectCity.options.length = 0;
                //遍历是城市信息数组
                for(var i = 0 ; i<selectCities.length; i++){
                    var citiName = selectCities[i];
                    //alert(citiName);//
                    //创建子节点
                    var option1 = document.createElement("option");//<option></option>

                    //创建文本节点
                    var textNode = document.createTextNode(citiName);
                    //将文本节点添加到option中
                    option1.appendChild(textNode); // <option>东莞市</option>

                    //将封装好的option添加到selectCity中
                    selectCity.appendChild(option1);
                }                               
            }
</script>

5.使用JS控制下拉列表左右选择

总结:
事件:onclick()
函数:selectOne()//selectAll();
方法:appendChild();selectd();

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>

        <script>
            function selectOne() {
                var right = document.getElementById("selectright");
                var left = document.getElementById("selectleft");
                var options = left.options;
                for(var i = 0; i < options.length;i++) {
                    if(options[i].selected) {
                        right.appendChild(options[i]);
                        break;
                    }
                }
            }

            function selectAll() {
                var right = document.getElementById("selectright");
                var left = document.getElementById("selectleft");
                var options = left.options;
                for(var i = 0; i < options.length;i++) {
                        right.appendChild(options[i--]);
                }
            }

            function selectOnetol() {
                var right = document.getElementById("selectright");
                var left = document.getElementById("selectleft");
                var options = right.options;
                for(var i = 0; i < options.length;i++) {
                    if(options[i].selected) {
                        left.appendChild(options[i]);
                        break;
                    }
                }
            }

            function selectAlltol() {
                var right = document.getElementById("selectright");
                var left = document.getElementById("selectleft");
                var options = right.options;
                for(var i = 0; i < options.length;i++) {
                        left.appendChild(options[i--]);
                }
            }
        </script>
    </head>
    <body>
        <table border="1px" width="450px">
            <tr>
                <td>
                    分类名称
                </td>
                <td>
                    <input type="text" value="手机数码" />
                </td>
            </tr>
            <tr>
                <td>
                    分类描述
                </td>
                <td>
                    <input type="text" value="全是手机"/>
                </td>
            </tr>
            <tr>
                <td>
                    分类商品
                </td>
                <td>
                    <span style="float: left;">
                        已有商品<br />
                        <select multiple="multiple" id="selectleft" >
                            <option>肾5</option>
                            <option>肾6</option>
                            <option>肾7</option>
                            <option>肾8</option>

                        </select><br />
                        <a href="#" onclick="selectOne()">&gt;&gt;</a><br />
                        <a href="#" onclick="selectAll()">&gt;&gt;&gt;</a>
                    </span>
                    <span style="float: right;">
                        未有商品<br />
                        <select id="selectright" multiple="multiple" ondblclick="selectOnetol()">
                            <option>三星</option>
                            <option>萝卜</option>
                            <option>小米</option>
                            <option>大米</option>

                        </select><br />
                        <a href="#" onclick="selectOnetol()" >&lt;&lt;</a><br />
                        <a href="#" onclick="selectAlltol()">&lt;&lt;&lt;</a>
                    </span>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="提交" />
                </td>
            </tr>
        </table>
    </body>
</html>