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