JavaScript | 小蜜蜂

JavaScript的简介

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
在此后简称JS

JS注册表单的检验

需求:
1). 用户在注册的时候会输入一些信息，但是用户输入的内容有可能不合法，会导致服务器端压力过大;
2). 当用户填写信息之后，对填写的信息进行校验（前端校验，只能防君子不能防小人）
后台校验: 也是需要校验的；
需要掌握的技能:
1). 如何在加载页面时执行指定函数?
2). 如何获取指定元素对象?
3). 如何弹出一个警告框?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    #当窗口在加载时执行的函数
        window.onload = function () {
        #获取用户输入的用户名的标签对象;
            var uEle = document.getElementById('username')
         #获取这个对象里面的值；
            var  uValue= uEle.value;
         # 弹出一个警示框
            alert(uValue)
        }
    </script>
</head>
<body>
#get: 填写的信息会在url里面显示， 对于重要的数据来说是不安全的；
# post: 填写的信息不会在url里面显示
<form action="#" method="get">
    用户名：<input type="text" name="username" placeholder="用户名" id="username"><br>
    密码：<input type="password" name="passwd" placeholder="密码"><br>
    <input type="submit" value="注册">
</form>
</body>
</html>

JavaScript-LMLPHP

检验用户名及密码

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
    #定义一个函数
        function checkFrom() {
        #获取输入用户名标签提交的内容；
            var user = document.getElementById('username').value;
             #if判断用户名是否为空?
			 #如果数据合法， 继续执行， 提交表单；
		 	 #如果数据不合法， 不让表单提交? (显示弹出框报错)
            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 checkFrom()">
    用户名：<input type="text" name="username" placeholder="用户名" id="username"><br>
    密码：<input type="password" name="passwd" placeholder="密码" id="passwd"><br>
    <input type="submit" value="注册">
</form>
</body>
</html>

JavaScript-LMLPHP

轮播图的实现

实现图片的切换

思路:
1. 确定事件类型为onclick事件；
2. 并跟对应的函数changeImg绑定在一起；
3. 实现函数功能；

  1). 当点击下一页按钮之后， 修改img标签里面的src属性内容;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #sowing_map{
            width: 590px;
            height: 500px;
    #块级元素居中:margin: 0 auto;
    #行内元素居中:text-align: center;
            margin: 0 auto;
            text-align: center;
        }
    </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="sowing_map">
    <img src="img/img1.jpg" id="img">
    <input type="button" value="下一页" onclick="changeImg()">
</div>

</body>
</html>

JavaScript-LMLPHP

轮播图

思路:
1. 确定事件类型为onclick事件；
2. 并跟对应的函数changeImg绑定在一起；
3. 实现函数功能；

   1)每隔1秒修改img标签里面的src属性内容;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #sowing_map{
            width: 590px;
            height: 500px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function () {
            # 每隔1s自动执行某一个函数
            setInterval('changeImg()',1000);
        };
        var i = 1;
        function changeImg() {
            i += 1;
            document.getElementById('img').src = 'img/img'+i+'.jpg';
            if (i === 6){
                i = 0;
            }
        }
    </script>
</head>
<body>
<div id="sowing_map">
    <img src="img/img1.jpg" id="img">
</div>
</body>
</html>

外部引入JS和CSS的方式实现轮播图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
   Js的引入方式:
        - 内部引入: 直接在head标签里面的<script>写的内容;
        - 外部引入:<script src="js/main.js" ></script
     -->
    <link href="css/main.css" rel="stylesheet">
    <script src="js/main.js" ></script>
</head>
<body>
<div id="sowing_map">
    <img src="img/img1.jpg" id="img">
    <!--<input type="button" value="下一页" onclick="changeImg()">-->
</div>
</body>
</html>

定时弹出广告

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

步骤:
1. 在页面设置一个隐藏的图片; style=“display: none”
2. 确定事件类型为onload，为其绑定一个函数;
3. 设置定时执行显示图片的函数showAd();
4. 编写定时任务里面的函数showAd()----

获取标签的样式display=‘block’;
清除显示广告的定时任务;
编写隐藏广告图片的定时任务;

实现定时任务里面的函数hiddenAd();

获取标签的样式display=‘none’;
清除隐藏广告的定时任务;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #sowing_map{
            width: 590px;
            height: 500px;
            margin: 0 auto;
            text-align: center;
        }
        #ad{
            width: 1190px;
            height: 80px;
            margin: 0 auto;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function () {
            setInterval('changeImg()',1000);
            # 在js的函数里面。 变量名没有var时， 是一个全局变量;
            adtime = setInterval('showAd()',1000);
        };
        var i =1;
        function changeImg() {
            i +=1;
            document.getElementById('img').src = 'img/img' + i + '.jpg';
            if (i === 6){
                i = 0;
            }
        }
        # 编写显示隐藏图片的函数
        function showAd() {
        # 获取到广告图片对应的标签对象
            var adEle = document.getElementById('ad_img');
            #修改广告图片元素里面的style属性里面的display
            adEle.style.display = 'block';
             # 清除显示图片的定时操作；
            clearInterval(adtime);
            # 设置隐藏广告图片的定时任务；
            hiddentime = setInterval('hiddenAd()',3000);
        }
        function hiddenAd() {
        # 获取到广告图片对应的标签对象
            var  adEle = document.getElementById('ad_img');
            #修改广告图片元素里面的style属性里面的display
            adEle.style.display = 'none';
            #清除隐藏图片的定时任务;
            clearInterval(hiddenAd)
        }
    </script>
</head>
<body>
<div id="sowing_map">
    <img src="img/img1.jpg" id="img">
</div>
<div id="ad">
    <img src="img/img7_ad.jpg" id="ad_img" style="display: none">
</div>
</body>
</html>

表格的全选和全不选

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkAll() {
        //1. 获取全选框对象
            var chekAllEle = document.getElementById('checkAll');
            //            //判断该单选框是否被选中，
//            alert(checkAllEle.checked);
            // 2. 对编号前面的复选框的状态进行判断;
            //      - 如果状态为选中， 则设置所有的单选框为选中状态;
            //      - 如果状态为没有选中， 则设置所有的单选框为没有选中状态;
            if (chekAllEle.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 j=0;j<checkOnes.length;j++){
                    checkOnes[j].checked = false;
                }
            }
        }
    </script>
</head>
<body>
<table 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>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne" ></td>
        <td>2</td>
        <td>1</td>
        <td>2</td>
        <td>2</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>1</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>4</td>
        <td>4</td>
        <td>1</td>
        <td>4</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkOne"></td>
        <td>5</td>
        <td>5</td>
        <td>1</td>
        <td>5</td>
    </tr>
</table>
</body>
</html>

JavaScript-LMLPHP

注册界面的优化

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <style>
        .login{
            width: 300px;
            height: 400px;
            border: 1px solid rgba(255, 0, 0, 0.27);
            margin: 0 auto;
            margin-top: 90px;
            background-color: snow;
            border-radius: 5px;
        }
        .login_head{
            width: 100%;
            height: 60px;
            border: 1px solid snow;
            text-align: center;
            padding-bottom: 10px;
        }
        .login_body{
            width: 100%;
            height: 310px;
        }
        .login_form{
            width: 100%;
            height: 100%;
            text-align: center;

        }
        .login_table{
            width: 100%;
            height: 40%;
            /*border: 1px solid green;*/
            text-align: center;
            margin-top: 50px;
        }
        #submit_part{
            width: 90%;
            height: 40px;
            margin-top: 50px;
            background-color: #f10180;
            color: white;
            border-radius: 5px;
        }
    </style>
    <script>
        function showUserTip() {
            document.getElementById('userTip').innerHTML = '<b style="color: lightgray;font-size: x-small;">用户名不能为空</b>';
        }
        function showPwdTip() {
            document.getElementById('pwdTip').innerHTML = '<b style="color: lightgray;font-size: x-small;">密码必须大于6位</b>';
        }
        function  checkUser() {
            var name = document.getElementById('username').value;
            if (name === ''){
                document.getElementById('userTip').innerHTML = '<b style="color: #f10180;font-size: x-small;">用户名不能为空</b>'
                return false;

            }else{
                document.getElementById('userTip').innerHTML = '<b style="color:  green;font-size: x-small;"> ok </b>'
                return true;
            }
        }
        function  checkPwd() {
            var pwdLen = document.getElementById('passwd').value.length;
            if (pwdLen < 6){
                document.getElementById('pwdTip').innerHTML = '<b style="color: #f10180;font-size: x-small;">密码必须大于等于6位</b>'
                return false;

            }else{
                document.getElementById('pwdTip').innerHTML = '<b style="color:  green;font-size: x-small;"> ok </b>'
                return true;
            }
        }
    </script>
</head>
<body>
    <div class="login">
        <div class="login_head">
            <h2 style="color: #f10180;">注册界面</h2>
        </div>
        <hr style="margin: 0;color: rgba(128, 128, 128, 0.44)">
        <div class="login_body">
            <form action="#" method="get" class="login_form">
                <table class="login_table"   cellspacing="0">
                    <tr>
                        <td style="color: #f10180">用户名：</td>
                        <td><input style="width: 80%" type="text" id="username" name="username" placeholder="请输入用户名"
                                   onfocus="showUserTip()" onblur="checkUser()"></td>
                    </tr>
                    <tr style="height: 5px">
                        <td colspan="2"><span id="userTip"></span></td>
                    </tr>
                    <tr>
                        <td style="color: #f10180">密码：</td>
                        <td><input type="password" id="passwd" name="passwd" placeholder="请输入密码"
                        onfocus="showPwdTip()" onblur="checkPwd()"></td>
                    </tr>
                    <tr style="height: 5px">
                       <td colspan="2"><span id="pwdTip"></span></td>
                    </tr>
                </table>
                <input id="submit_part" type="submit" value="立即注册">
            </form>
        </div>
    </div>
</body>
</html>

JavaScript-LMLPHP