Blogger Information
Blog 11
fans 0
comment 0
visits 6652
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
JS引入方式和JS数组处理函数——2019年1月16日
离歌浅唱醉人心丶的博客
Original
939 people have browsed it

JS三种引入HTML的方式:

方法1. 直接在元素的事件方法属性上写js代码

方法2. 将js写入script标签中

方法3. 将js脚本写到外部的js文件中

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js脚本的引入方式</title>
</head>
<body>
<!-- 方法1.直接在元素的事件方法属性上写js代码 -->
<!-- onclick是click事件对应的方法-->
<h3 id="tips" onclick="alert('JavaScript')">JavaScript</h3>


<!-- 在表单中,事件方法属性可以直接使用表单元素的name属性访问同一个form标签内的元素 -->
<form action="" method="post">
    <input type="text" name="site" placeholder="php中文网">
    <button type="button" onclick="alert(site.placeholder)">显示站点</button>
</form>

<form action="">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button type="button" onclick="check(username,password)">验证</button>

</form>
<!-- 方法2.将js写入script标签中-->
<script>
    function check(username,password) {
        // 单行注释
        /**
         * 多行注释
         */
        if (username.value.length === 0 || password.value.length === 0) {
            alert('请输入用户名或密码');
        } else {
            alert('验证通过');
        }
    }
</script>

<!-- 方法3.将js脚本写到外部的js文件中 -->

<style>
    #ball {
        width: 80px;
        height: 80px;
        background-color: #748dee;
        border-radius: 50%;
        box-shadow: 2px 2px 2px #888;
        /* 小球相于对原始位置发生位移 */
        position: relative;
    }
</style>
<div id="ball"></div>
<script src="static/js/js01.js"></script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例



static/js/js01.js:

实例

// 获取小球
var ball = document.getElementById('ball');

// 设置动画函数
function running(){
    var count = 0;  // 设置计数器并初始化
    // 设置定时器方法,每隔100毫秒间歇调用
    var timer = setInterval(function (){
        // 当运行次数小于100时,自动递增左和上的坐标值
        if (count < 100) {
            ball.style.left = ball.style.top = count + 'px';
            count++;
        } else {    // 否则就清除定时器终止运动
            clearInterval(timer);
        }
    }, 100);
}

// 给小球添加点击事件, 并指定事件对应的方法函数
// ball.onclick = running;


// 事件也可以这样添加, 设置事件监听器, 这样写的优点是可以同时设置多个事件方法

ball.addEventListener('click', running, false);

运行实例 »

点击 "运行实例" 按钮查看在线实例



JS数组的常用函数 slice() splice()

实例

//js数组的常用函数(slice()和splice())
var arr = [1,2,3,4,5,6];
console.log( arr.slice(1,4) );  // [2,3,4]
console.log( arr.slice(1,-2) );  // [2,3,4],尾部从-1开始

// 增加和删除元素,返回删除的元素数组
// splice(开始索引, 要删除的数量(0表示不删除), 要添加的元素(多个逗号分开))
var arr = [1,2,3,4,5,6,7,8];
arr.splice(2,0,'a'); // 从第三个位置添加一个元素,非删除操作,返回空数组
console.log(arr);  // [1, 2, "a", 3, 4, 5, 6, 7, 8]
arr.splice(4,2);  // 从第5个位置删除2个,返回 [4, 5]
console.log(arr); // [1, 2, "a", 3, 6, 7, 8]

// 更新,实际上分二步完成:
//第一步.删除:是先删除指定元素, 
//第二步.添加: 再添加新元素到这个位置上
arr.splice(2,1,'php');  // ['a']
console.log(arr); // [1, 2, "php", 3, 6, 7, 8]

运行实例 »

点击 "运行实例" 按钮查看在线实例



Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post