JavaScript

最新推荐文章于 2024-10-05 15:21:03 发布

原创最新推荐文章于 2024-10-05 15:21:03 发布 · 139 阅读

CC 4.0 BY-SA版权

JavaScript

JavaScript 是世界上最流行的脚本语言。
JavaScript 是属于 web 的语言，它适用于 PC、笔记本电脑、平板电脑和移动电话。
JavaScript 被设计为向 HTML 页面增加交互性。
我们具体最几个例子来理解JavaScript
用户登录校验案例：
在这里插入图片描述
代码实现如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkForm() {
            var username=document.getElementsByName('username')[0].value;
            if (username===''){
                alert("用户名为空")
            }
            var password=document.getElementsByName("password")[0].value;
            if (password.length<6){
                alert("密码长度不足6位")
            }
        }

    </script>
</head>
<body>
<div class="login">
    <form action="#" method="get"  onsubmit="return checkForm()">
        <input type="text" name="username" placeholder="用户名"><br/>
        <input type="password" name="password" placeholder="密码"><br/>
        <input type="submit" value="登录">
    </form>
</div>
</body>

聚焦和离焦事件案例
在这里插入图片描述
代码实现如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function showUserTips() {
            var usertipobj=document.getElementById("usertips");
            var info = '<span style= "color:gray">用户名不能为空</span>';
            usertipobj.innerHTML=info;
        }
        function checkUser() {
            var username=document.getElementsByName('username')[0].value;
            var usertipobj=document.getElementById("usertips");
            if (username.length<=2){
                usertipobj.innerHTML='<span style="color: red">用户名长度不大于2</span>'
            }
            else {
                usertipobj.innerHTML='<span style="color: green">ok</span>'
            }
        }
    </script>
</head>
<body>
<div class="login">
    <h1>用户登录</h1>
<form action="#" method="get" >
    <input type="text" name="username" placeholder="用户名" onfocus="showUserTips()" onblur="checkUser()"><span id="usertips"></span><br/>
        <input type="password" name="password" placeholder="密码" id="pwd"><br/>
        <input type="submit" value="登录">

    </form>
</div>
</body>

图片转换案例
在这里插入图片描述
当点击下一页的时候，图片就会跳转。
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var count = 1;
        function changeImg() {
            count+=1;
            var imgObj=document.getElementById("img");
            imgObj.src ='./img/img' +count+'.jpg';
            if (count===5){
                count=0;
            }
        }
    </script>
</head>
<body>
<div class="box">
    <img src="./img/img1.jpg" id="img"><br/>
    <input type="submit" value="下一页" onclick="changeImg()">
</div>
</body>
</html>

动态添加城市
在这里插入图片描述
代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function addCity() {
            var city =document.getElementById('city').value;
            if(city){
                var textnode=document.createTextNode(city);
                var liEleNode= document.createElement('li');
                liEleNode.appendChild(textnode);

                var ulEleNode = document.getElementById('city_ul');
                ulEleNode.appendChild(liEleNode)
            }else {
                alert("城市为空！")
            }
        }
    </script>
</head>
<body>
<div class="content">
    <form>
        <input type="text" name="city"  id="city" placeholder="请输入城市">
        <input type="button" value="添加城市" onclick="addCity()">
    </form>

    <ul id="city_ul">
        <li>西安</li>
        <li>上海</li>
        <li>成都</li>
    </ul>
</div>
</body>
</html>

城市信息二级联动
在这里插入图片描述
这里我们分成两个部分，
js内容如下：

function changeCity() {
    //    1. 如何让存储省份和城市之间的关系?
    //    provinces = [["西安", "渭南", '宝鸡'], ["太原", "晋城"， ”大同“], ["桂林", "南宁"]]
    var provinces = new Array(3);
    provinces[0] = new Array("西安", "渭南", '宝鸡');
    provinces[1] = new Array("太原", "晋城", "大同");
    provinces[2] = new Array("桂林", "南宁");

    //    2. 获取用户选择的省份
    var choiceProvince = document.getElementById('province').value;  //0

    //     3. 遍历用户选择省份对应的所有城市
    var citys = provinces[choiceProvince];

    // 获取select节点对象
    var selectCityObj = document.getElementById('city');
    //清空select标签里面的所有内容;
    selectCityObj.length = 0;
    //      4. 并添加到select里面;
    for (var i = 0; i < citys.length; i++) {
        //  创建城市的文本节点;
        var textnode = document.createTextNode(citys[i]);  // "西安"
        // 创建option节点对象
        var optEleObj = document.createElement('option');
        // 将文本节点添加到option节点中
        optEleObj.appendChild(textnode);
        selectCityObj.appendChild(optEleObj);
    }
}

html代码如下：

<div class="content">
    <form action="#" method="get">
        <span>籍贯</span>
        <!--当修改省份选项时， 执行函数changeCity的内容-->
        <select id="province" onchange="changeCity()">
            <option>---选择省份-----</option>
            <option name="province" value="0">陕西</option>
            <option name="province" value="1">山西</option>
            <option name="province" value="2">广西</option>
        </select>
        <select id="city">
            <option>---选择城市---</option>
        </select>
    </form>
</div>