首页 > 代码库 > JS(六)

JS(六)

2024-08-26 21:02:37   218人阅读

没有视频看了,心里有点慌啊,像这种每天都会灌输很多知识的学习方式,我觉得提前预习真的是有奇效,不然不容易跟上老师的思维.

1.发送验证码:简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>验证码</title>
    <script type="text/javascript">
    var sec = 59;
    var timer;
    function sendInfo(){
         timer=window.setInterval(changeText, 1000);
    }
    function changeText(){
        var bton = document.getElementById("bton");
        bton.value = sec+"s后重新发送";
        bton.disabled = "disabled";
        sec--;
        if(sec==0){
            window.clearInterval(timer);
            bton.value = "重新发送";
            bton.removeAttribute("disabled");
            sec=59;
        }
    }
    </script>
</head>
<body>
<input type="text" /><input type="button" onclick="sendInfo()" id="bton" value="发送验证码">    
</body>
</html>

2.全选功能:简单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
            width: 500px;
            margin: 100px auto;
            text-align: center;
        }
        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
            height: 24px;
        }
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }
    </style>
    <script type="text/javascript">
    function qx(){
        var checkboxAll = document.getElementById("checkAll");
        var inputObj = document.getElementsByName("check");
        for(var i=0; i<inputObj.length; i++){
            //反选功能
            /*inputObj[i].checked = !inputObj[i].checked;*/
            //全选功能
            checkAll.checked ? inputObj[i].checked=true : inputObj[i].checked=false;
        }
    }
    function checking(){
        var inputObj = document.getElementsByName("check");
        var checkboxAll = document.getElementById("checkAll");
        for(var i=0;i<inputObj.length;i++){
            //只要有一个复选框没选中,就进入if语句并结束函数
            if(!inputObj[i].checked){
                checkboxAll.checked = false;
                return false;
            }
        }
        checkboxAll.checked = true;
        return true;
        //另一种傻瓜式做法
        /*if(inputObj[0].checked && inputObj[1].checked && inputObj[2].checked){
            checkboxAll.checked = true;
        }else {
           checkboxAll.checked = false; 
        }*/
    }

    </script>
</head>
<body>
<table>
    <tr>
        <th>
            <input type="checkbox" name="checkboxAll" id="checkAll" onclick="qx()"/>全选/全不选
        </th>
        <th>菜名</th>
        <th>商家</th>
        <th>价格</th>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check" onclick="checking()"/>
        </td>
        <td>红烧肉</td>
        <td>隆江猪脚饭</td>
        <td>￥200</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check" onclick="checking()"/>
        </td>
        <td>香酥排骨</td>
        <td>隆江猪脚饭</td>
        <td>￥998</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox" name="check" onclick="checking()"/>
        </td>
        <td>北京烤鸭</td>
        <td>隆江猪脚饭</td>
        <td>￥88</td>
    </tr>
</table>
</body>
</html>

3.表单验证:虽然只验证了两个,原理已明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
    <script type="text/javascript">
    window.onload = function(){
    //没有加var定义的全局变量
         spanObj = document.getElementsByTagName("span");
         v =document.form1.username;
        v2 = document.form1.userpwd;
    }
    function fct1(){
        //光标选中时,提示信息
        spanObj[0].innerHTML = "请输入用户名";
        spanObj[0].style.color = "#f00";
    }
    function fct2(){
        //光标移开时,检查表单
        if(v.value == ""){
            //验证用户是否输入数据
            spanObj[0].innerHTML = "用户名必须要填写";
            spanObj[0].style.color = "#f00";
            return false;
        }else if(v.value.length<5 || v.value.length>16){
            //验证用户名的长度是否符合要求
            spanObj[0].innerHTML = "用户名必须在5-16位之间";
            return false;
        }else{
            //验证用户名中是否含有特殊字符
            var arr = ["*","%","&","<",">","/","\\","!","@","#"];
            var length1 = arr.length;
            var length2 = v.value.length;
            for(var i=0;i<length1;i++){
                for(var j=0;j<length2;j++){
                    if(arr[i]==v.value.charAt(j)){
                        spanObj[0].innerHTML = "用户名含有特殊字符";
                        spanObj[0].style.color = "#f00";
                        return false;
                    }
                }    
            }
            //前面验证通过则用户名验证通过
            spanObj[0].innerHTML = "用户名合法";
            spanObj[0].style.color = "#00f";
            return true;
        }
    }
    function fct3(){
        //光标选中时,提示输入信息
        spanObj[1].innerHTML = "请输入密码";
        spanObj[1].style.color = "#f00";
    }
    function fct4(){
        //验证用户是否输入数据
        if(v2.value == ""){
            spanObj[1].innerHTML = "密码还是要的,大哥!";
            spanObj[1].style.color = "#f00";
            return false;
        }else if(v2.value.length<5 || v2.value.length>16){
            //验证密码的长度是否符合要求
            spanObj[1].innerHTML = "别太短,也别太长,5-16位!";
            spanObj[1].style.color = "#f00";
            return false;
        }else{
            //前面的验证通过则密码验证通过
            spanObj[1].innerHTML = "Well Done!";
            spanObj[1].style.color = "#00f";
            return true;
        }
    }
    //在提交表单时,再进行一次检查,是否所有的所填项目都符合要求
    function checkForm(){
        var res_1 = fct2();
        var res_2 = fct4(); 
        if(res_1 && res_2){
            return true;
        }else{
            return false;
        }
    }
    </script>
</head>
<body>
<form action="index.php"  onsubmit="return checkForm()" name="form1">
    <table width="500" align="center" border="1" bordercolor="#ccc" cellpadding="5">
        <caption><h2>表单验证</h2></caption>
        <tr>
            <td align="right">用户名:</td>
            <td><input type="text" name="username" onfocus="fct1()" onblur="fct2()"></td>
            <td width="250"><span></span></td>
        </tr>
        <tr>
            <td align="right">密码:</td>
            <td><input type="password" name="userpwd" onfocus="fct3()" onblur="fct4()"></td>
            <td><span></span></td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td colspan="2"><input type="submit">&nbsp;<input type="reset" ></td>
        </tr>
    </table>
</form>
</body>
</html>

4.坑爹的三级联动,费老劲了,还不完善...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多级联动菜单</title>
    <script type="text/javascript">
    arr_province = ["请选择省份","北京市","广东省","湖南省"];
    arr_city = [
                    ["请选择城市"],
                    ["海淀区","宣武区","朝阳区","房山区"],
                    ["广州市","深圳市","清远市","罗定市"],
                    ["长沙市","常德市","岳阳市","永州市"],
    ];
    //www.jq22.com
    arr_area = [
                    [
                        ["请选择地区"]
                    ],
                    [
                        ["中关","北理"],
                        ["宣区","武区"],
                        ["朝区","阳区"],
                        ["房山","良乡"]
                    ],
                    [    
                        ["天河","越秀"],
                        ["罗湖","?"],
                        ["清","远"],
                        ["罗","定"]
                    ],
                    [
                        ["雨花","岳麓"],
                        ["鼎城","澧县"],
                        ["浏阳","楼"],
                        ["冷水","东安"]
                    ]
    ]

    window.onload = function(){    
        //在省份下拉列表中写入省份数组
        var province = document.form1.province;
        var city = document.form1.city;
        var area = document.form1.area;
        province.length = arr_province.length;
        for(var i=0; i<province.length; i++){
            province.options[i].text = arr_province[i];
            province.options[i].value = arr_province[i];
        }
        province.selectedIndex = 0;
        var index = province.selectedIndex;
        //在省份下拉列表中写入城市数组
        city.length = arr_city[index].length;
        for(var j=0; j<city.length; j++){
            city.options[j].text = arr_city[index][j];
            city.options[j].value = arr_city[index][j];
            }
        //在城市下拉列表中写入地区数组
        city.selectedIndex = 0;
        var index2 = city.selectedIndex;
        area.length = arr_area[index][index2].length;
        for(var k=0;k<area.length;k++){
            area.options[k].text = arr_area[index][index2][k];
            area.options[k].value = arr_area[index][index2][k];
        }    
    }
    //二级联动的实现
    function changeSelected(changedIndex){
        var city = document.form1.city;
        city.length = arr_city[changedIndex].length;
        for(var j=0; j<city.length; j++){
            city.options[j].text = arr_city[changedIndex][j];
            city.options[j].value = arr_city[changedIndex][j];
            }
        //三级联动功能的实现
        var index2 = city.selectedIndex;    
        var area = document.form1.area;
        area.length = arr_area[changedIndex][index2].length;
        for(var k=0; k<area.length; k++){
            area.options[k].text = arr_area[changedIndex][index2][k];
            area.options[k].value = arr_area[changedIndex][index2][k];
        }
        //初始化
        city.selectedIndex = 0;
        area.selectedIndex = 0;
    }
    //二级列表联动三级下拉列表
    function changeSelected2(changedIndex2){
        var province = document.form1.province;
        var city = document.form1.city;
        var area = document.form1.area;
        var index = province.selectedIndex;
        area.length = arr_area[index][changedIndex2].length;
        for(var i=0;i<area.length;i++){
            area.options[i].text = arr_area[index][changedIndex2][i];
            area.options[i].value = arr_area[index][changedIndex2][i];
        }
        area.selectedIndex = 0;
    }    
    </script>
</head>
<body>
<form name="form1" method="post">
省份:<select name="province" onchange="changeSelected(this.selectedIndex)"></select>
城市:<select name="city" onchange="changeSelected2(this.selectedIndex)"></select>
地区:<select name="area"></select>
</form>    
</body>
</html>

 

JS(六)


联系
我们