收藏
批改状态：合格
老师批语：写得不错, 记住 了吗?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>JS数组及常用事件</title>
</head>
<body>
<h3>JS数组</h3>
<ul>
单维数组输出：
<li>
第一种：<span id="js-array-a"></span>
</li>
<li>
第二种：<span id="js-array-b"></span>
</li>
多维数组输出：
<li>
第一种：<span id="js-array-c"></span>
</li>
<li>
第二种：<span id="js-array-d"></span>
</li>
</ul>
<p>
数组查询：<span id="js-array-e"></span>
</p>
</body>
</html>
<script>
//创建单维数组
var $ = function(id) {
return document.getElementById(id);
}
var newInfo = new Array();
newInfo[0] = 'xiaohu';
newInfo[1] = '男';
var newUser = ['xiaomao', '女'];
//输出数组
$('js-array-a').innerHTML = newInfo[0];
$('js-array-b').innerHTML = newUser[0];
//创建多维数组
//var Shop = [newInfo, newUser];
var Shop = [
['xiaohu', '男'],
['xiaomao', '女']
];
//输出多维数组
$('js-array-c').innerHTML = Shop[0][0];
$('js-array-d').innerHTML = Shop[1][1];
//输出多维数组
for (var i = 0; i < Shop.length; i++) {
if (Array.isArray(Shop[i])) {
for (var j = 0; j < Shop[i].length; j++) {
alert(Shop[i][i]);
}
} else {
alert(Shop[i]);
}
}
//查找数组中的元素
var newShop = ['mao', 'zhu', 'dog'];
var res = newShop.indexOf('mao');
if (res != null) {
$('js-array-e').innerHTML = res;
} else {
$('js-array-e').innerHTML = '没有';
}
//给newShop数组尾部添加一个新元素push()
newShop.push('duck');
console.log(newShop);
//给newShop数组头部添加新元素unshift()
newShop.unshift('newmao');
console.log(newShop);
//删除newShop数组尾部的最后一个元素pop()
newShop.pop();
console.log(newShop);
//删除newShop数组头部的第一个元素shift()
newShop.shift();
console.log(newShop);
//排序--降序--注意，原数组变了，没有新数组
var xxx = [10, 3, 28, 15, 12, 90, 30];
var yyy = xxx;
var ooo = yyy;
console.log(yyy);
xxx.sort(function(a, b) {
return b - a
});
console.log(xxx);
//排序---升序
xxx.sort(function(a, b) {
return a - b
});
console.log(xxx);
console.log(ooo); //注意这里，它变了。
</script>点击 "运行实例" 按钮查看在线实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
#mouse-p-a {
width: 300px;
height: 100px;
background-color: black;
color: blanchedalmond;
font-size: 2em;
text-align: center;
line-height: 100px;
}
.mouse-p {
background-color: blueviolet;
}
</style>
<body>
<p>
<button onclick="javascript:alert('你点了1次！');">点1下试试</button>
<button ondblclick="javascript:alert('你点了2次！');">点2下试试</button>
<button onmousedown="bc_down()" onmouseup="bc_up()" id="button-b">按住别动</button>
<button onclick="bc_time()" id="button-c">定时器</button>
<button onclick="bc_time_a()" id="button-d">循环启动器</button>
<button onclick="bc_time_b()" id="button-e">循环关闭器</button>
</p>
<p>输入内容<input type="text" name="phone" id="phone" onblur="blur_a()" onfocus="focus_a()"></p>
<p>输入姓名<input type="text" name="username" id="username" onchange="change_b(this.value)"></p>
<p>输入作业<input type="text" name="work" id="work" oninput="input_b(this.value)"></p>
<p id="mouse-p-a" class="miao" onmouseover="p_over()" onmouseout="p_out()"></p>
</body>
</html>
<script>
//简化函数
var $ = function(id) {
return document.getElementById(id);
}
var ppp = $('mouse-p-a');
function bc_down() {
ppp.innerHTML = "鼠标按下";
}
function bc_up() {
ppp.innerHTML = "鼠标松开";
}
function p_over() {
ppp.className = "mouse-p";
//alert('jinru');
ppp.innerHTML = "鼠标进入";
}
function p_out() {
ppp.className = "";
ppp.innerHTML = "鼠标离开";
}
function blur_a() {
ppp.innerHTML = "输入框失去焦点";
}
function change_a(value) {
ppp.innerHTML = "你输入了" + value;
}
function focus_a() {
ppp.innerHTML = "准备输入...";
}
function change_b(value) {
ppp.innerHTML = "你输入了" + value;
}
function input_b(value) {
ppp.innerHTML = "你输入了" + value;
}
function bc_time() {
time = setTimeout(twoTime, 2000); //2秒后弹窗
}
function twoTime() {
alert('停2秒后弹出这个内容');
}
function bc_time_a() {
//注意这里的time_a 不要加var，不然就成了局部变量，后面查找不到。
time_a = setInterval(oneTime, 1000); //每1秒执行一次这个oneTime函数
}
function oneTime() {
ppp.innerHTML = "嗨起来:" + Math.ceil(Math.random() * 10000);
}
function bc_time_b() {
clearInterval(time_a);
ppp.innerHTML = "安静";
}
</script>点击 "运行实例" 按钮查看在线实例
总结：都是对象！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
