js提升的6个小案例

Posted 2020-09-18

1.js完成图片轮播效果

　　步骤分析:

1. 创建html文件
2. 在页面加载时添加onload事件
3. 编写onload事件触发的函数
4. 获取图片的控制权
5. 修改图片的src属性

<script>
    //绑定页面加载时的触发事件和函数
    window.onload = function(){
        //设置每隔5秒执行change函数
        window.setInterval("change()",5000);
    }
    //编写函数
    //设置轮换图片的变量i
    var i = 1;
    function change(){
        i++;
        if(i > 3) {
            i =1;
        }
        //得到图片对象
        var img = document.getElementById("img1");
        img.src = "./img/"+i+".jpg";
    }
    </script>

2.使用js定时弹出广告定时隐藏

　　步骤分析

1. 创建html文档
2. 绑定页面加载的事件和执行的函数
3. 编写触发的函数

<script>
    //绑定页面加载的触发事件
        window.onload = function(){
            //设置触发函数的时间
            window.setTimeout("show",1000);
        }
        //编写显示的函数
        function show() {
            //得到广告显示处的div对象
            var adDiv = document.getElementById("adDiv");
            //设置div显示
            adDiv.style.display = "block";
            //调用隐藏
            window.setTimeout("hide()",1000);
        }
        //编写隐藏函数
        function hide(){
            //得到广告显示处的div对象
            var adDiv = document.getElementById("adDiv");
            //设置div为隐藏
            adDiv.style.display = "none";
            //调用显示的函数
            window.setTimeout("show()",1000);
        }
    </script>

3.使用js完成注册页面的表单校验

　　步骤分析

1. 创建html文档
2. 在校验的文本框上添加事件
3. 触发事件绑定的函数

    <script>
        //在表单后面绑定提交的check函数
        //用户名验证
        function check(){
            //获取到username表单对象
            var username = document.getElementById("username").value;
            //判断用户名是否为空
            if(username == ""){
                //提示
                alert("用户名不能为空");
                //返回false不让表单提交
                return false;
            }
            //获取到password表单对象
            var password = document.getElementById("pasword").value;
            //获取重复密码对象
            var repassword = document.getElementById("repassword").value;
            //判断
            if(password != repassword) {
                //提示
                alert("前后密码不一致");
                //返回false给submit事件
                return false;
            }
        }
        
    </script>

4.使用js完成隔行换色

　　步骤分析

1. 创建html文档
2. 确定onload事件
3. 在触发的函数中获得操作的表格
4. 获得表格的所有行数
5. 遍历表格
6. 判断偶数和奇数

<script>
        //在body中添加onload事件并绑定changeColor函数
        //第一行不想换色就把第一个tr嵌入<thead>标签,后面的<tr>嵌入<tbody>标签
        //编写函数
        function changeColor(){
            //得到table对象
            var tab = document.getElementById("tab");
            //得到第一个tbodys标签下的tr的length
            var len = tab.tBodies[0].rows.length;
            //遍历
            for (var i=0;i<len;i++) {
                //判断奇数偶数
                if(i % 2 == 0){
                    //为偶数tr设置背景颜色
                    tab.tBodies[0].rows[i].style.backgroundColor="green";
                }else {
                    //为奇数tr设置背景颜色
                    tab.tBodies[0].rows[i].style.backgroundColor="red";
                }
            }
        }
    </script>

5.完成复选框的全选和全不选效果

　　步骤分析:

1. 创建html文档
2. 确定复选框的单击事件
3. 触发一个函数
4. 在函数中确定全选按钮有没有被选中,
5. 如果选中,下面得都选中,
6. 没有,下面的也都不选中

    <script>
        function changeColor() {
            var tab1 = document.getElementById("tab1");
            var len = tab1.tBodies[0].rows.length;
            for(var i=0;i<len;i++) {
                i % 2==0?tab1.tBodies[0].rows[i].style.backgroundColor="green" : tab1.tBodies[0].rows[i].style.backgroundColor="red";
            }
            reverseCheck();
        }
        function checkAll() {
            //获取到复选框的根标签
            var selectAll = document.getElementById("selectAll");
            //得到复选框下面的
            var ids = document.getElementsByName("ids");
            for(var i=0;i<ids.length;i++) {
                //让上下一致
                ids[i].checked = selectAll.checked;
            }
        }
        var count = 0;
        //不选其中一个就全校全选
        function reverseCheck() {
            var ids = document.getElementsByName("ids");
            var selectAll = document.getElementById("selectAll");
            for(var i=0;i<ids.length;i++) {
                ids[i].onclick = function() {
                    if(this.checked) {
                        count++;
                    }else {
                        count--;
                    }
                    selectAll.checked = count == ids.length;
                }
            }
        }
        //反选
        function invert() {
            var selectAll = document.getElementById("selectAll");
            var ids = document.getElementsByName("ids");
            for(var i =0;i<ids.length;i++){
                ids[i].checked =! ids[i].checked;
                if(this.checked) {
                    count++;
                }else {
                    count--;
                }
                selectAll.checked = count == ids.length;
            }
        }
    </script>

 

6.二级下拉菜单的联动

　　步骤分析:

1. 新建html文档
2. 确定onchange事件
3. 获得到所选择的省份的信息
4. 根据信息获取对应的数组中的信息
5. 遍历数组中的信息
6. 创建元素,创建文本,将元素添加到第二个列表中

<script>
    
        //创建二维数组,并未里面的元素赋值
        var arrs = new Array(2);
        arrs[0] = new Array("渝中区","渝北区");
        arrs[1] = new Array("成都","眉山");
        //得到option中的value(选择菜单)
        var val = document.getElementById("province").value;
        //清空第二个列表中的内容
        document.getElementById("city").options.length=0;
        //遍历集合
        for(var i=0;i<arrs.length;i++) {
            if(i == val) {
                //获取对应val的信息
                for (var j=0;j<arrs[i];j++) {
                    //创建option标签
                    var opEl = document.createElement("option");
                    //创建内容标签
                    var text = document.createTextNode(arrs[i][j]);
                    //将内容添加到option标签
                    opel.appendChild(text);
                    //将option标签添加到二级下拉菜单的根标签
                    document.getElementById("city").appendChild(opEl);
                }
            }
        }
    </script>