博客列表 >JS引入方式和JS数组处理函数——2019年1月16日

JS引入方式和JS数组处理函数——2019年1月16日

离歌浅唱醉人心丶的博客
离歌浅唱醉人心丶的博客原创
2019年01月19日 02:11:31938浏览

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]

运行实例 »

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



声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议