JavaScript部分案例

最新推荐文章于 2024-11-05 22:07:06 发布

ahao4311

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量125

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wzhsc/p/10306023.html

版权

01、电灯的开关

<img id="light" src="img/off.gif">
<script>
    /*
        1、获取图片对象
          2、绑定点击事件
           3、切换图片
                使用flag标注状态
    * */
        var element = document.getElementById("light");
        var flag = false;//关闭状态

        element.onclick = function (ev) {
            if(flag){//如果灯开着
                element.src = "img/off.gif";
                flag = false;
            }else{
                element.src = "img/on.gif";
                flag = true;
            }
        }
</script>

02、设置时间弹出图片或其他

    <span id="time">5</span>
    <img id="img" src="img/gui.jpg" style="display: none">
<script>
        var time = document.getElementById("time");
        var img = document.getElementById("img");
        var num = time.innerHTML;
        setInterval(function () {
            if(num>1){
                num--;
                time.innerHTML = num;
            }else{
                img.style.display = "block";
            }
        },1000);
</script>

03、轮播图

   <img id="img" src="img/banner_1.jpg">
<script>
        var img = document.getElementById("img");
        var num = 1;
        setInterval(function () {
           num++;
           //判断num和3的大小
            if(num>3){
                num = 1;
            }
            img.src = "img/banner_"+num+".jpg";
        },2000);
</script>

04、多级联动

<select id="pro" οnchange="choice()">
    <option value="sc">四川</option>
    <option value="cq">重庆</option>
    <option value="gd">广东</option>
</select>

<select id="city">
    <option>成都</option>
    <option>德阳</option>
    <option>绵阳</option>
</select>

<script>
    var pro = document.getElementById("pro");
    var city = document.getElementById("city");
    function choice() {
        var _pro = pro.value
        switch (_pro) {
            case "sc":
                city.innerHTML = "<option>成都</option>\n" +
                    "       <option>德阳</option>\n" +
                    "       <option>绵阳</option>"
                break;
            case "cq":
                city.innerHTML = "<option>重庆</option>";
                break;
            case "gd":
                city.innerHTML = "<option>广州</option>\n" +
                    "       <option>深圳</option>\n" +
                    "       <option>东莞</option>"
                break;
        }
    }
</script>

05、动态表格

<style>
        table{
            border: 1px solid;
            margin : auto;
            width: 500px;
        }
        td{
            border: 1px solid;
        }
        div{
            text-align: center;
        }
    </style>
<body>

        <div>
            <input type="text" id="id" placeholder="请输入编号">
            <input type="text" id="name" placeholder="请输入名字">
            <input type="text" id="gender" placeholder="请输入性别">
            <input type="button" id="add" value="添加" οnclick="add()">
        </div>

    <table>
        <tr>
            <td>id</td>
            <td>name</td>
            <td>gender</td>
            <td>delete</td>
        </tr>
        <tr>
            <td>1</td>
            <td>coco</td>
            <td>女</td>
            <td><a href="javascript:void(0)" οnclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>bobo</td>
            <td>男</td>
            <td><a href="javascript:void(0)" οnclick="del(this)">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>yoyo</td>
            <td>女</td>
            <td><a href="javascript:void(0)" οnclick="del(this)">删除</a></td>
        </tr>
    </table>

</body>

<script>
        function del(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
        }

        function add() {
            var id = document.getElementById("id").value;
            var name = document.getElementById("name").value;
            var gender = document.getElementById("gender").value;

            var table = document.getElementsByTagName("table")[0];
            //追加一行
            table.innerHTML += " <tr>\n" +
                "            <td>"+id+"</td>\n" +
                "            <td>"+name+"</td>\n" +
                "            <td>"+gender+"</td>\n" +
                "            <td><a href=\"javascript:void(0)\" οnclick=\"del(this)\">删除</a></td>\n" +
                "        </tr>"

        }
</script>

06、根据输入的行和列，创建表格

<div>

请输入你想创建的表格：

行：<input type="text" id="row">

列：<input type="text" id="col">
    <input type="button" id="creat" value="创建" οnclick="creat()">
</div>

<div id="div1">
</div>
<script>
    function creat() {
        var row = document.getElementById("row").value;
        var col = document.getElementById("col").value;
        var div1 = document.getElementById("div1");

        var tab = "<table border='1' cellpadding='0' cellspacing='0' style='margin: 50px auto'>";
        for (var i = 1; i <= row; i++) {
            tab += "<tr>";
            for (var j = 1; j <= col; j++) {
                tab += "<td style='width: 50px;height: 30px;'>aa</td>";
            }
            tab += "</tr>";
        }
        tab += "</table>";
        div1.innerHTML = tab;
    }
</script>

07、表单验证

<form id="form">
    用户名：<input type="text" id="username" name="name" οnblur="checkName()">
    <span id="sp_name"></span>
    <br>
    <input type="submit">
</form>

<script>
    window.onload = function (ev) {
        document.getElementById("form").onsubmit = function (ev1) {
            return checkName();
        }
    }
    function checkName() {
        var useranme = document.getElementById("username").value;
        var sp_name= document.getElementById("sp_name");
        var regExp = new RegExp("^.{3,20}$");
        if(regExp.test(useranme)){
            sp_name.innerHTML = "可以注册";
            sp_name.style.color = "green";
            return true;
        }else{
            sp_name.innerHTML = "用户名格式有误";
            sp_name.style.color = "red";
            return false;
        }
    }
</script>