乐之之

知而行乐，乐而行之，天道酬勤，学无止境。
JS基础（下）

一、事件处理

  JS 事件（event）是当用户与网页进行交互时发生的事情，例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。

  一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onload 等。下表中列举了一些 JavaScript 中常用的事件。

1、事件绑定

  事件只有与 HTML 元素绑定之后才能被触发，为 HTML 元素绑定事件处理程序的方法由很多，最简单的就是通过 HTML事件属性来直接绑定事件处理程序，例如 onclick、onmouseover、onmouseout 等属性。

  以 onclick 属性为例，通过该属性我们可以为指定的 HTML 元素定义鼠标点击事件（即在该元素上单击鼠标左键时触发的事件），示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button type="button" onclick="myBtn()">按钮</button>
    <script type="text/javascript">
        function myBtn(){
            alert("Hello World!");
        }
    </script>
</body>
</html>

  也可以直接使用 JavaScript 中提供的内置函数来为指定元素绑定事件处理程序，如下例所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button type="button" id="myBtn">按钮</button>
    <script>
        function sayHello() {
            alert('Hello World!');
        }
        document.getElementById("myBtn").onclick = sayHello;
    </script>
</body>
</html>

2、事件示例

  一般情况下，事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件，另外还有一些其它事件。下面通过几个示例来简单介绍一些比较常用的事件。

  • onmouseover事件

     

  • onmouseover 事件就是指当用户鼠标指针移动到元素上时触发的事件，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <button type="button" onmouseover="alert('鼠标已经移动到了该按钮上');">请将鼠标移动至此处</button><br>
    <a href="#" onmouseover="myEvent()">请将鼠标移动至此处</a>
    <script>
        function myEvent() {
            alert('鼠标已经移动到了该链接上');
        }
    </script>
</body>
</html>
  • onmouseout事件
  • onmouseout 事件会在鼠标从元素上离开时触发，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <div style="width: 350px; height: 200px; border:1px solid black" id="myBox"></div>
    <script>
        function myEvent() {
            alert('您的鼠标已经离开指定元素');
        }
        document.getElementById("myBox").onmouseout = myEvent;
    </script>
</body>
</html>
  • onkeydown事件
  • onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <input type="text" onkeydown="myEvent()">
    <script>
        function myEvent() {
            alert("您按下了键盘上的某个按钮");
        }
    </script>
</body>
</html>
  • onkeyup事件
  • onkeyup 事件是指当用户按下键盘上的某个按键并将其释放（即按下并松开某个按键）时触发的事件，示例代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <input type="text" onkeyup="myEvent()">
    <script>
        function myEvent() {
            alert("您按下了键盘上的某个按钮，并将其释放了");
        }
    </script>
</body>
</html>

二、作用域

  在 JavaScript 中，您可以在任意位置声明变量，但不同的位置会影响变量的可用范围，这个范围称为作用域。作用域可以大致分为两种类型，分别是全局作用域和局部作用域。下面就来分别介绍一下。

1、全局作用域

  全局作用域是指变量可以在当前脚本的任意位置访问，拥有全局作用域的变量也被称为“全局变量”，一般情况下拥有以下特征的变量具有全局作用域：

  • 最外层的函数和在最外层函数外面定义的变量拥有全局作用域；

  • 所有未定义直接赋值的变量拥有全局作用域；

  • 所有 window 对象的属性拥有全局作用域，例如 window.name、window.location、window.top 等。

示例代码如下：

var str = "Hello World!";
function myFun(){
    document.write(str);    // 输出：Hello World!
}
myFun();
document.write(str);        // 输出：Hello World!

2、局部作用域

  在函数内部声明的变量具有局部作用域，拥有局部作用域的变量也被称为“局部变量”，局部变量只能在其作用域中（函数内部）使用。示例代码如下：

function myFun(){
    var str = "Hello World!";
    document.write(str);    // 输出：Hello World!
}
document.write(str);        // 报错：str is not defined

  在函数内定义的局部变量只有在函数被调用时才会生成，当函数执行完毕后会被立即销毁。

三、JS定时器

  JavaScript 定时器，有时也称为“计时器”，用来在经过指定的时间后执行某些任务，类似于我们生活中的闹钟。

  在 JavaScript 中，我们可以利用定时器来延迟执行某些代码，或者以固定的时间间隔重复执行某些代码。

  JavaScript 中提供了两种方式来设置定时器，分别是 setTimeout() 和 setInterval()，它们之间的区别如下：

方法 说明
setTimeout() 在指定的时间后（单位为毫秒），执行某些代码，代码只会执行一次
setInterval() 按照指定的周期（单位为毫秒）来重复执行某些代码，定时器不会自动停止，除非调用 clearInterval() 函数来手动停止或着关闭浏览器窗口

1、setTimeout()

  JS setTimeout() 函数用来在指定时间后执行某些代码，代码仅执行一次。

  JS setTimeout() 函数的语法格式如下：

setTimeout(function[, delay, arg1, arg2, ...]);
setTimeout(function[, delay]);
setTimeout(code[, delay]);

参数说明如下：

  • function：一个函数（通常使用匿名函数），其中定义了定时器中要执行的代码；

  • code：字符串类型的代码，这些代码会在定时器到期后被编译执行，出于安全考虑不建议使用；

  • delay：可选参数，定时器在执行的其中代码之前，要等待的时间，单位为毫秒（1秒 = 1000毫秒），如果省略此参数，则表示立即执行；

  • arg1、arg2、...、argN：要传递给函数的参数。

代码示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <script type="text/javascript">
        var myFun = function (str = 'JavaScript'){
            document.write(str + "<br>");
        };
        setTimeout(myFun, 500, 'Hello');
        setTimeout(myFun, 1000);
        setTimeout(function(){
            document.write("定时器<br>");
        }, 1500)
    </script>
</body>
</html>

  运行上面的代码，会间隔 500 毫秒，依次输出下面的内容：

Hello
JavaScript
定时器

2、setlnterval()

  • 简单理解就是一个while循环定时器。

  JS setInterval() 函数可以定义一个能够重复执行的定时器，每次执行需要等待指定的时间间隔。

  JS setInterval() 函数的语法格式如下：

setInterval(function, delay, [arg1, arg2, ...]);
setInterval(code, delay);

参数说明如下：

  • function：一个函数（通常使用匿名函数），其中定义了定时器中要执行的代码；

  • code：字符串类型的代码，这些代码会在定时器到期后被编译执行，出于安全考虑不建议使用；

  • delay：可选参数，定时器在执行的其中代码之前，要等待的时间，单位为毫秒（1秒 = 1000毫秒），如果省略此参数，则表示立即执行；

  • arg1、arg2、...、argN：要传递给函数的参数。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <p id="one"></p>
    <p id="two"></p>
    <script type="text/javascript">
        var num = 1;
        var myFun = function (){
            document.getElementById('one').innerHTML += num + "&nbsp;";
            num ++;
        };
        setInterval(myFun, 500);
        setInterval(function(){
            var d = new Date();
            document.getElementById('two').innerHTML = d.toLocaleTimeString();
        }, 1000);
    </script>
</body>
</html>

  运行结果如下：

1 2 3 4 5 6 7 8 9
下午4:01:13

3、js取消定时器

  当使用 setTimeout() 或 setInterval() 设置定时器时，这两个方法都会产生一个定时器的唯一 ID，ID 为一个正整数值，也被称为“定时器标识符”，通过这个 ID，我们可以清除 ID 所对应的定时器。

  我们可以借助 clearTimeout() 或 clearInterval() 函数来分别清除由 setTimeout() 或 setInterval() 函数创建的定时器。调用 clearTimeout() 或 clearInterval() 函数需要提供定时器的唯一 ID 作为参数，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
</head>
<body>
    <p>当前时间为：<span id="clock"></span></p>
    <button onclick="stopClock(this);">停止</button><hr>
    <button onclick="delayedAlert(this);">2秒后弹出一个提示框</button>
    <button onclick="clearAlert();">取消</button>
    <script type="text/javascript">
        var intervalID;
        function showTime() {
            var d = new Date();
            document.getElementById("clock").innerHTML = d.toLocaleTimeString();
        }
        function stopClock(e) {
            clearInterval(intervalID);
            e.setAttribute('disabled', true)
        }
        intervalID = setInterval(showTime, 1000);
        
        var timeoutID;
        var that;
        function delayedAlert(e) {
            that = e;
            timeoutID = setTimeout(showAlert, 2000);
            e.setAttribute('disabled', true)
        }
        function showAlert() {
            alert('这是一个提示框。');
            that.removeAttribute('disabled');
        }
        function clearAlert() {
            clearTimeout(timeoutID);
            that.removeAttribute('disabled');
        }
    </script>
</body>
</html>

四、表单验证

  表单是 Web 应用（网站）的重要组成部分，通过表单可以收集用户提交的信息，例如姓名、邮箱、电话等。由于用户在填写这些信息时，有可能出现一些错误，例如输入手机号时漏掉了一位、在输入的内容前后输入空格、邮箱的格式不正确等。为了节省带宽同时避免这些问题对服务器造成不必要的压力，我们可以使用 JavaScript 在提交数据之前对数据进行检查，确认无误后再发送到服务器。

  使用 JavaScript 来验证提交数据（客户端验证）比将数据提交到服务器再进行验证（服务器端验证）用户体验要更好，因为客户端验证发生在用户浏览器中，无需向服务器发送请求，所以速度更快，而服务器端验证，需要先将数据提交到服务器，然后服务器再将结果返回给浏览器，用户需要等待服务器响应结果才能知道哪里出了问题。

表单验证通常由两个部分组成：

  • 必填字段验证：确保必填的字段都被填写；

  • 数据格式验证：确保所填内容的类型和格式是正确的、有效的。

1、必填字段验证

  必填字段验证在用户注册时比较常见，通过必填字段验证，能够确保表单中的必填字段都被填写，例如用户名、密码、邮箱等。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <style>
        .error{
            color: red;
        }
        label{
            display: inline-block;
            width: 70px;
            text-align: right;
        }
    </style>
</head>
<body>
    <form onsubmit="return validateForm()" action="" method="post">
        <fieldset>
            <legend>注册:</legend>
            <div class="row">
                <label>用户名：</label>
                <input type="text" name="name">
                <span class="error" id="nameErr"></span>
            </div>
            <div class="row">
                <label>密码：</label>
                <input type="password" name="pwd">
                <span class="error" id="pwdErr"></span>
            </div>
            <div class="row">
                <label>Email：</label>
                <input type="text" name="email">
                <span class="error" id="emailErr"></span>
            </div>
            <div class="row">
                <label>手机号：</label>
                <input type="text" name="mobile" maxlength="11">
                <span class="error" id="mobileErr"></span>
            </div>
            <div class="row">
                <label>验证码：</label>
                <input type="text" name="captcha" maxlength="4"><span id="captcha" onclick="getCaptcha()"></span>
                <span class="error" id="captchaErr"></span>
            </div>
            <div class="row">
                <input type="submit" value="注册">
            </div>
        </fieldset>
    </form>
    <script>
        var captcha = getCaptcha(); // 生成验证码
        // 清空 input 标签后的提示信息
        var tags = document.getElementsByTagName('input');
        for (var i = 0; i < tags.length; i++) {
            tags[i].onchange = function(){
                var idname = this.name + "Err";
                document.getElementById(idname).innerHTML = '';
            }
        }
        // 显示错误消息
        function printError(elemId, hintMsg) {
            document.getElementById(elemId).innerHTML = hintMsg;
        }
        // 验证表单数据
        function validateForm() {
            // 获取表单元素的值
            var name = document.querySelector("input[name='name']").value;
            var pwd = document.querySelector("input[name='pwd']").value;
            var email = document.querySelector("input[name='email']").value;
            var mobile = document.querySelector("input[name='mobile']").value;
            var captcha = document.querySelector("input[name='captcha']").value;
                  
            if(name == "" || name == null){
                printError("nameErr", "用户名不能为空");
                return false;
            }
            if(pwd == "" || pwd == null){
                printError("pwdErr", "密码不能为空");
                return false;
            }
            if(email == "" || email == null){
                printError("emailErr", "邮箱不能为空");
                return false;
            }
            if(mobile == "" || mobile == null){
                printError("mobileErr", "手机号不能为空");
                return false;
            }
            if(captcha == "" || captcha == null){
                printError("captchaErr", "验证码不能为空");
                return false;
            }
        }
        // 获取验证码
        function getCaptcha(){
            var cap = Math.floor(Math.random()*10000).toString();
            if(cap.length != 4) cap += "0";
            captcha = cap;
            document.getElementById("captcha").innerHTML = cap;
        }
    </script>
</body>
</html>

2、数据格式验证

  数据格式验证就是通过正则表达式来验证用户所填的数据，是否符合要求，以邮箱地址为例，正确的邮箱地址中要包含一个@和一个.，而且@不能是邮箱地址的第一个字符，.要出现在@之后。

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <style>
        .error{
            color: red;
        }
        label{
            display: inline-block;
            width: 70px;
            text-align: right;
        }
    </style>
</head>
<body>
    <form onsubmit="return validateForm()" action="" method="post">
        <fieldset>
            <legend>注册:</legend>
            <div class="row">
                <label>用户名：</label>
                <input type="text" name="name">
                <span class="error" id="nameErr"></span>
            </div>
            <div class="row">
                <label>密码：</label>
                <input type="password" name="pwd">
                <span class="error" id="pwdErr"></span>
            </div>
            <div class="row">
                <label>Email：</label>
                <input type="text" name="email">
                <span class="error" id="emailErr"></span>
            </div>
            <div class="row">
                <label>手机号：</label>
                <input type="text" name="mobile" maxlength="11">
                <span class="error" id="mobileErr"></span>
            </div>
            <div class="row">
                <label>验证码：</label>
                <input type="text" name="captcha" maxlength="4"><span id="captcha" onclick="getCaptcha()"></span>
                <span class="error" id="captchaErr"></span>
            </div>
            <div class="row">
                <input type="submit" value="注册">
            </div>
        </fieldset>
    </form>
    <script>
        var capCode = getCaptcha(); // 生成验证码
        console.log(capCode);
        // 清空 input 标签后的提示信息
        var tags = document.getElementsByTagName('input');
        for (var i = 0; i < tags.length; i++) {
            tags[i].onchange = function(){
                var idname = this.name + "Err";
                document.getElementById(idname).innerHTML = '';
            }
        }
        // 显示错误消息
        function printError(elemId, hintMsg) {
            document.getElementById(elemId).innerHTML = hintMsg;
        }
        // 验证表单数据
        function validateForm() {
            // 获取表单元素的值
            var name = document.querySelector("input[name='name']").value;
            var pwd = document.querySelector("input[name='pwd']").value;
            var email = document.querySelector("input[name='email']").value;
            var mobile = document.querySelector("input[name='mobile']").value;
            var captcha = document.querySelector("input[name='captcha']").value;
                  
            if(name == "" || name == null){
                printError("nameErr", "用户名不能为空");
                return false;
            }
            if(pwd == "" || pwd == null){
                printError("pwdErr", "密码不能为空");
                return false;
            }
            if(email == "" || email == null){
                printError("emailErr", "邮箱不能为空");
                return false;
            } else {
                var regex = /^\S+@\S+\.\S+$/;
                if(regex.test(email) === false) {
                    printError("emailErr", "请输入正确的邮箱地址");
                    return false;
                }
            }
            if(mobile == "" || mobile == null){
                printError("mobileErr", "手机号不能为空");
                return false;
            } else {
                var regex = /^[1]\d{10}$/;
                if(regex.test(mobile) === false) {
                    printError("mobileErr", "您输入的手机号码有误");
                    return false;
                }
            }
            if(captcha == "" || captcha == null){
                printError("captchaErr", "验证码不能为空");
                return false;
            } else {
                console.log(capCode);
                console.log(captcha);
                if(capCode != captcha){
                    printError("captchaErr", "验证码有误");
                    return false;
                }
            }
        }
        // 获取验证码
        function getCaptcha(){
            var cap = Math.floor(Math.random()*10000).toString();
            if(cap.length != 4) cap += "0";
            document.getElementById("captcha").innerHTML = cap;
            return capCode = cap;
        }
    </script>
</body>
</html>

五、动画实现

  JavaScript 动画主要是通过修改元素样式来实现的。

  JavaScript 动画具有以下特点：

  • JS动画控制能力更强，能在动画播放过程中对动画进行控制，例如开始、暂停、回放、终止、取消等；

  • JS动画的效果比 CSS 动画更丰富，比如曲线运动，冲击闪烁，视差滚动等效果，只有 JS 动画才能完成；

  • CSS 动画有兼容性问题，而 JavaScript 大多时候没有兼容性问题。

  JavaScript 主要通过代码修改 DOM 元素来实现动画的，并且可以配合定时器来实现循环播放，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box {
            width: 200px;
            height: 200px;
            margin-top: 10px;
            background: rgb(43, 221, 255);
            position: relative;
            left: -200px;
            top: 0;
        }
        #box span {
            width: 20px;
            background: rgb(255, 119, 157);
            position: absolute;
            left: 200px;
            top: 75px;
            color: #fff;
            text-align: center;
            cursor: pointer;
            padding: 5px 1px 5px 0;
            border-radius: 0 5px 5px 0;
        }
        #box span:hover {
            background: rgb(255, 84, 137);
        }
    </style>   
</head>
<body>
    <div id="box">
        <span id="share">分享</span>
    </div>
    <script>
        window.onload = function () {
            //动画
            var div = document.getElementById("box");
            var timer = null;
            div.onmouseover = function () {
                startMove(0);
            };
            div.onmouseout = function () {
                startMove(-200);
            };
            function startMove(targetPosition) {
                clearInterval(timer);
                var speed = 0;
                if (targetPosition < 0) {
                    speed = -10;
                } else {
                    speed = 10;
                }
                timer = setInterval(function () {
                    if (div.offsetLeft == targetPosition) {
                        clearInterval(timer);
                    } else {
                        div.style.left = div.offsetLeft + speed + 'px';
                    }
                }, 17);
            }
        };
    </script>
</body>
</html>

效果：

  • 鼠标放入分享标签上，分享标签向右弹出

  下面再通过一个示例来演示如何创建 JavaScript 动画，示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <style type="text/css">
        * {
            margin: 0 auto;
            padding: 0;
        }
        ul {
            list-style: none;
        }
        #view {
            position: relative;
            width: 320px;
            height: 120px;
            border: 10px solid #bc8f8f;
            overflow: hidden;
            margin-top: 5px;
        }
        #img_list {
            position: absolute;
            width: 960px;
        }
        #img_list li {
            float: left;
            width: 320px;
            height: 120px;
        }
    </style>
</head>
<body>
    <div id="view">
        <ul id="img_list">
            <li style="background-color: #87ceeb;"></li>
            <li style="background-color: #ff69b4;"></li>
            <li style="background-color: #98fb98;"></li>
        </ul>
    </div>
    <script type="text/javascript">
        var img_list = document.getElementById('img_list');
        setInterval(function() {
            for (var i = 0; i <= 100; i++) {
                (function(pos) {
                    setTimeout(function() {
                        img_list.style.left = - (pos / 100) * 320 + 'px';
                    }, (pos + 1) * 10)
                })(i)
            }
            var current = img_list.children[0];
            setTimeout(function() {
                img_list.appendChild(current);
                img_list.style.left = '0px';
            }, 1100);
        }, 2000);
    </script>
</body>
</html>

效果：

  • ul标签循环换li标签（颜色）。
  • 从而出现类似充电效果的动画。

 

posted on 2023-03-25 23:06  乐之之  阅读(20)  评论(0)  编辑  收藏  举报