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]
运行实例 »
点击 "运行实例" 按钮查看在线实例