01.数组的操作方法
var arr = [1,2,3,4,'哈哈哈']
alert(arr.join('-')) // 输出 1-2-3-4-哈哈哈
//数组push()
//在数组最后追加数据
alert(arr.push('呵呵呵')) //这里返回数组的长度
// 正确输出
// 添加数组注意： 都是在添加完元素之后，再打印数据
arr.push('哈哈哈')
alert(arr)
// pop() 删除数组的最后一个元素， 返回值：你删除的那条数据
alert(arr.pop())
// splice() 在数组中的某个位置增加或删除成员
var aList = [1,2,3,4]
aList.splice(2,1,7,8,9,4) //
var arr = [1,2,3,4,'哈哈哈']
// 第一个参数： 从第几位开始。第二个参数：删除多少个。后面参数代表你要添加的内容
arr.splice(2,2,3,7,8,9) // 输出 1,2,3,7,8,9,哈哈哈
// reverse()数组反转
var arr = [1,2,3,4,'哈哈哈']
arr.reverse() //输出 哈哈哈,4,3,2,1
// indexOf() 返回该数据在数组中，第一次出现的索引值, 如果后面有数据，那就不管了
alert(arr.indexOf(2))
02.多维数组
var = [1,2,3,4, ''哈哈哈]
var arrs = [[1,2][3,4]] //輸出 1,2,3,4
//多維數組輸出單個元素
alert(arrs[1][0])
03.for 循环
循环作用：重复执行某些程序。便利数据
// for(初始值;循环次数; 增量)
for(var i = 0;i<5; i++){
alert('hello')
// i = 0 0<5 执行加1
// i = 1 1<5 执行加1
// i = 2 2<5 执行加1
// i = 3 3<5 执行加1
// i = 4 4<5 执行加1
// i = 5 5<5 不执行
}
案例一：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id="list">
<!--<li>钢铁侠3</li>
<li>蜘蛛侠3</li>
<li>前任3</li>
<li>我不是程序员</li>
<li>葫芦娃</li>-->
</ul>
</body>
<script type="text/javascript">
var alist1 = document.getElementById('list')
var movie =['钢铁侠3','蜘蛛侠3','前任3','我不是程序员','葫芦娃']
for(var i = 0; i < movie.length; i++){
alist1.innerHTML += '<li>' + movie[i] + '</li>'
}
</script>
</html>
04.数组去重
数组去重，把重复数据删掉
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script type="text/javascript">
var alist1= [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1]
var alist2 = []
for (var i = 0; i < alist1.length; i ++){
// 判断： 如果我当前的这条数据的第一次出现所以只 ==i
// 就把这条数据添加进那个新的数组中
if (alist1.indexOf(alist1[i]) == i){
alist2.push(alist1[i])
}
}
alert(alist2)
</script>
</html>
javascript 用单引号，html用双引号，避免用JavaScript拼接html时出现错误。
05-JavaScript对象
对象有花括号分隔。在括号内部，对象的属性以名称和值的形式（name:value）来定义。属性由逗号分隔：
var person = {firname:'John', lastname:'Doe', id:5566};
06-入口函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
// 入口函数。 作用: 等整个页面加载完毕之后的事件
// 入口js要卸载body上面，要加上入口函数
// 如果代码在body下面，不需要加入入口函数
window.onload = function(){
//js寻找页面元素，从上面寻找的
var oBox = document.getElementById('box')
oBox.onclick = function(){
// this 代表当前事件源
this.style.color = 'red'
}
}
</script>
</head>
<body>
<div id="box">
文字文字
</div>
</body>
<script type="text/javascript">
for( var i =0; i < 3; i ++){
console.log(i)
}
</script>
</html>
07-变量作用域
var tv = '好点十' // 全局变量： 所有的函数都能用
function wang(){
// var tv = '你好'
tv = '坏电视'
alert(tv)
}
function my(){
alert(tv)
}
wang()
my()
08-定时器基础
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" value="开启单次定时器" id="btn1" />
<input type="button" value="开启多次定时器" id="btn2" />
<input type="button" value="关闭单次定时器" id="btn3" />
<input type="button" value="关闭多次定时器" id="btn4" />
</body>
<!--定时器作用：多少毫秒之后，要执行什么程序-->
<script type="text/javascript">
var oBtn1 = document.getElementById('btn1')
var oBtn2 = document.getElementById('btn2')
var oBtn3 = document.getElementById('btn3')
var oBtn4 = document.getElementById('btn4')
//关闭定时器要点：
// 1.在全局声明一个空的变量
// 2.把此变量以修改的方式,赋值给定时器
// 3.后面关闭定时器,就能选中此定时器
var dan = null; //在全局声明一个空的变量
var duo = null;
//开启单次定时器 。只执行一次
oBtn1.onclick = function(){
//把全局变量以修改的方式，赋值给定时器
dan = setTimeout(function(){
//2000毫秒之后，执行什么程序，就在这里写
alert('炸了')
},2000)
}
//开启多次定时器。重复执行的，永远不会停
oBtn2.onclick = function(){
duo = setInterval(function(){
alert('炸了')
},2000)
}
//关闭单次定时器
oBtn3.onclick = function(){
//这样就能选中对应的定时器
clearTimeout(dan)
}
//关闭多次定时器
oBtn4.onclick = function(){
//这样就能选中对应的定时器
clearInterval(duo)
}
</script>
</html>
09-跑步动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
background:#c7c7c7;
}
img{
width:250px;
position:absolute;
left:0;
top:200px;
}
</style>
</head>
<body>
<input type="button" value="走你" id="go" />
<input type="button" value="停下" id="stop" />
<img src="a.jpg" id="pic">
</body>
<script type="text/javascript">
var oGo = document.getElementById('go')
var oStop = document.getElementById('stop')
var oPic = document.getElementById('pic')
var num = 0
var run = null
oGo.onclick = function(){
clearInterval(run) //解决排队机制问题。先关闭定时器，再开启定时器，避免用户重复点击，造成的动画排队问题
run = setInterval(function(){
num+=4 //++ 代表每次加1 +=6 每次加6
oPic.style.left = num + 'px'
},80)//关于时间问题：不要低于80毫秒，低于会容易出问题
}
oStop.onclick = function(){
clearInterval(run)
}
</script>
</html>
756
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
