JavaScript经典应用案例

########JavaScript#######

 

 

 

## JS注册表单的校验雏形

 

<!--
1. 需求:
    1). 用户在注册的时候会输入一些信息, 但是用户输入的内容有可能不合法, 会导致服务器端压力过大;
    2). 当用户填写信息之后, 对填写的信息进行校验(前端校验, 只能防君子不能防小人)

    -后台校验: 也是需要校验的;

2. 需要掌握的技能:
    0). 如何在加载页面时执行指定函数?
    1). 如何获取指定元素对象?
    2). 如何弹出一个警告框?
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload = function () {
            // 获取输入用户名的标签对象
            var uEle = document.getElementById('username');
            alert(uEle);
            // 获取这个对象里面的值
            var uValue = uEle.value;
            // alert弹出一个警告框
            alert(uValue);
        }
    </script>
</head>
<body>

<form action="#" method="get">
    <!--
        get: 填写的信息会在url里面显示, 对于重要的数据来说是不安全的;
        post: 填写的信息不会在url里面显示
    -->
    <span>用户名:<input type="text" name="username" placeholder="username" id="username"></span><br>
    <span>密码:<input type="password" name="passwd" placeholder="passwd"></span><br>
    <input type="submit" value="注册">

</form>

</body>
</html>

 

 

 

## 注册表单校验用户名是否为空

 

<!--
实现步骤:
    1. 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
    2. 对这个事件绑定一个函数(执行的操作写在函数里面);
    3. 函数的核心功能: 校验用户名是否为空?
        1). 获取输入用户名标签提交的内容;
        2). if判断用户名是否为空?
        3). 如果数据合法, 继续执行, 提交表单;
        4). 如果数据不合法, 不让表单提交? (显示弹出框报错) --- alert
-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkForm() {
            var user = document.getElementById('username').value;
            if (user === '') {
                alert('用户名不能为空');
                return false;
            }
            var passwdLen = document.getElementById('passwd').value.length;
            if (passwdLen < 6) {
                alert('密码长度不能小于6位');
                return false;
            }
        }
    </script>
</head>
<body>
<form action="#" method="get" onsubmit="return checkForm()">
    用户名:<input type="text" name="username" placeholder="username" id="username"><br>
    密码:<input type="password" name="passwd" placeholder="passwd" id="passwd"><br>
    <input type="submit" value="注册">
</form>
</body>
</html>

 

## 注意:

在JS里 ‘==’ // 两个等号做比较时, 会将字符串转换为整形进行比较; ' === ' 作比较时不同数据类型不能做比较

 

 

 

 

## 轮播图

 

## 实现图片的切换

 

分析:
    1. 确定事件类型为onclick事件;
    2. 并跟对应的函数changeImg绑定在一起;
    3. 实现函数功能;
      当点击下一页按钮之后, 修改img标签里面的src属性内容;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #pictures {
            width: 590px;
            height: 500px;
            margin: 0 auto;
            text-align: center;
        }

        #adImg {
            text-align: center;
            width: 600px;
            height: 80px;
            margin: 0 auto;
        }
    </style>
    <script>
        // 定义一个变量,控制图片循环顺序
        var i = 1;

        function ChangeImg() {
            // 当点击下一页时,i+1 图片编程img2
            i += 1;
            // 修改img标签里面src的内容
            document.getElementById('img').src = 'img/img' + i + '.jpg';
            // 如果图片一轮轮播结束,从头开始
            if (i === 6) {
                i = 0;
            }
        }
    </script>
</head>
<body>
<div id="pictures"><img src="img/img7_ad.jpg" id="adImg">
    <img src="img/img1.jpg" id="img">
    <input type="button" value="下一页" onclick="ChangeImg()">
</div>
</body>
</html>

 

 

## 实现图片的轮播

## 每隔1s自动执行某一个函数
            setInterval('changeImg()', 1000);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #pictures {
            width: 590px;
            height: 500px;
            margin: 0 auto;
            text-align: center;
        }

        #adImg {
            text-align: center;
            width: 600px;
            height: 80px;
            margin: 0 auto;
        }
    </style>
    <script>
        window.onload = function () {
            //每隔一秒执行函数
            setInterval('ChangeImg()', 1000);
        };
        // 定义一个变量,控制图片循环顺序
        var i = 1;

        function ChangeImg() {
            // 当点击下一页时,i+1 图片编程img2
            i += 1;
            // 修改img标签里面src的内容
            document.getElementById('img').src = 'img/img' + i + '.jpg';
            // 如果图片一轮轮播结束,从头开始
            if (i === 6) {
                i = 0;
            }
        }
    </script>
</head>
<body>
<div id="pictures"><img src="img/img7_ad.jpg" id="adImg">
    <img src="img/img1.jpg" id="img">
    <!--<input type="button" value="下一页" onclick="ChangeImg()">-->
</div>
</body>
</html>

 

Tips:

## 外部引入CSS样式与JS

Js的引入方式:
        - 内部引入: 直接在head标签里面的<script>写的内容;
        - 外部引入:<script src="js/main.js" ></script>

执行代码:

    <link href="#" rel="stylesheet">
    <script src="#"></script>


 

 



## 定时弹出广告
 

目标:
    实现网页定时弹出广告, 并定时取消弹出的广告;

步骤:
    1. 在页面设置一个隐藏的图片; style="display: none"
    2. 确定事件类型为onload, 为其绑定一个函数;
    3. 设置定时执行显示图片的函数showAd();
    4. 编写定时任务里面的函数showAd()----
            - 获取标签的样式display=‘block’;
            - 清除显示广告的定时任务;
            - 编写隐藏广告图片的定时任务;

    5. 实现定时任务里面的函数hiddenAd();
        - 获取标签的样式display=‘none’;
        - 清除隐藏广告的定时任务;

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #pictures {
            width: 590px;
            height: 500px;
            margin: 0 auto;
            text-align: center;
        }

        #adImg {
            text-align: center;
            width: 1190px;
            height: 80px;
            margin: 0 auto;
        }
    </style>
    <script>
        window.onload = function () {
            //每隔一秒执行函数
            setInterval('ChangeImg()', 1000);
            //每隔1s执行显示广告的函数;
            // 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
            //(http://www.w3school.com.cn/jsref/met_win_setinterval.asp)
            // 在js的函数里面。 变量名没有var时, 是一个全局变量;
            adtime = setInterval('showAd()', 1000);
        };
        // 定义一个变量,控制图片循环顺序
        var i = 1;

        function ChangeImg() {
            // 当点击下一页时,i+1 图片编程img2
            i += 1;
            // 修改img标签里面src的内容
            document.getElementById('img').src = 'img/img' + i + '.jpg';
            // 如果图片一轮轮播结束,从头开始
            if (i === 6) {
                i = 0;
            }
        }

        function showAd() {
            // 获取到广告图片对应的标签对象
            var adEle = document.getElementById('ad');
            //修改广告图片元素里面的style属性里面的display
            adEle.style.display = 'block';
            // 清除显示图片的定时操作;
            clearInterval(adtime);
            // 设置隐藏广告图片的定时任务;
            hiddentime = setInterval('hiddenAd()', 1000);
        }

        function hiddenAd() {
            var adEle = document.getElementById('ad');
            adEle.style.display = 'none';
            clearInterval(hiddentime);
        }
    </script>
</head>
<body>
<div id="pictures">
    <img src="img/img1.jpg" id="img">
</div>
<div id="adImg">
    <img src="img/img7_ad.jpg" id="ad"style="display: none">
</div>
</body>
</html>

 

 

 

## _用户注册

 

注意:

    1). 确定事件类型(onfocus-聚焦事件), 并为其绑定一个函数;
    2). 确定事件类型(onblur-离焦事件), 并为其绑定一个函数;

 

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function showUserTip() {
            // 获取标签对象
            document.getElementById('userTip').innerHTML = '<b style="color: lightgray;">用户名不能为空</b>';
        }

        function showPwdTip() {
            document.getElementById('pwdTip').innerHTML = '<b style="color: lightgray;">密码必须大于6位</b>';
        }

        function checkUser() {
            //1. 离焦时判断用户名是否为空?
            var name = document.getElementById('user').value;
            // 2. 如果为空, 右边来一个红色的提示;
            // 3. 如果不为空, 则取消所有提示;
            if (name === '') {
                document.getElementById('userTip').innerHTML = '<b style="color: #f10180">用户名不能为空</b>';
                return false;
            } else {
                document.getElementById('userTip').innerHTML = '<b style="color:  green"> ok </b>';
                return true;
            }
        }

        function checkPwd() {
            var pwdLen = document.getElementById('pwd').value.length;
            if (pwdLen < 6) {
                document.getElementById('pwdTip').innerHTML = '<b style="color: #f10180">密码不能小于6位</b>';
                return false;
            } else {
                document.getElementById('pwdTip').innerHTML = '<b style="color:  green"> ok </b>';
                return true;
            }
        }
    </script>
</head>
<body>
<form action="#" method="get">
    <span><input type="text" name="username" id="user" placeholder="输入用户名" onfocus="showUserTip()"
                 onblur="checkUser()"></span><br>
    <span id="userTip"></span><br>
    <span><input type="password" name="password" id="pwd" placeholder="输入密码" onfocus="showPwdTip()"
                 onblur="checkPwd()"></span><br>
    <span id="pwdTip"></span><br>
    <input type="submit" value="注册">
</form>
</body>
</html>

 

 

 

 

## _表格的全选和全部选

 

需求:
    实现批量选中和批量不选中

步骤分析:
    1). 确定事件类型:鼠标单击单选按钮时(onclick事件), 绑定一个函数;
    2). 编写函数checkAll()

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkAll() {
            var checkAllEle = document.getElementById('checkAll');
            //alert(checkAllEle);
            //判断该单选框是否被选中,
            //alert(checkAllEle.checked);
            // 对编号前面的复选框的状态进行判断;
            //      - 如果状态为选中, 则设置所有的单选框为选中状态;
            //      - 如果状态为没有选中, 则设置所有的单选框为没有选中状态;
            if (checkAllEle.checked) {
                var checkOnes = document.getElementsByName('checkOne');
                for (var i = 0; i < checkOnes.length; i++) {
                    checkOnes[i].checked = true;
                }
            } else {
                var checkOnes = document.getElementsByName('checkOne');
                for (var i = 0; i < checkOnes.length; i++) {
                    checkOnes[i].checked = false;
                }
            }
        }
    </script>
</head>
<body>
<table id="tab" style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
    <th style="text-align: center" colspan="5">
        <input type="button" value="添加">
        <input type="button" value="删除">
    </th>
    <tr>
        <th><input type="checkbox" id="checkAll" onclick="checkAll()">全选</th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>1</td>
        <td>kobe</td>
        <td>male</td>
        <td>40</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>2</td>
        <td>james</td>
        <td>male</td>
        <td>34</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>3</td>
        <td>curry</td>
        <td>male</td>
        <td>30</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>4</td>
        <td>durant</td>
        <td>male</td>
        <td>29</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>5</td>
        <td>hardan</td>
        <td>male</td>
        <td>28</td>
    </tr>
</table>
</body>
</html>

 

 

 

 

#######################################

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值