JavaScript进阶
JavaScript函数传参
<!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>
<script>
window.onload = function(){
var input = document.getElementById("value");
alert(input.innerHTML);
var oDiv = document.getElementById("div1");
var oBtn = document.getElementById("btn");
function fnChange(sColor, sSize){
oDiv.style.color = sColor;
oDiv.style.fontSize = sSize;
}
// 如果函数没有返回值 那么返回undefined
oBtn.onclick = function(){fnChange('red', '30px');}
}
function fnAdd(iNum01, iNum02){
var result = iNum01 + iNum02;
document.getElementById("demo").innerHTML=result;
return; // 只写一个return 作用是在这一句函数结束运行
}
var oDiv = document.getElementById("div1");
var oBtn = document.getElementById("btn");
function fnChange(sColor, sSize){
oDiv.style.color = sColor;
oDiv.style.fontSize = sSize;
}
// 如果函数没有返回值 那么返回undefined
// oBtn.onclick = function(){fnChange('red', '30px');}
oBtn.onclick = "fnChange('red', '30px')";
</script>
</head>
<body>
<div id="value" >计算10+12</div>
<p id="demo">结果</p>
<input type="button" onclick="fnAdd(10,12)" value="点击计算">
<input type="button" id="btn" value="change css">
<div id="div1">这是一个div</div>
</body>
</html>JavaScript数组及操作方法
对象的实例创建
var alist = new Array（1，2，3）;
直接创建
var alist = [1, 2, 3, 'asd']
操作数组中数据的属性与方法
属性 length
方法
push() 后面增加
pop() 后面删除
reverse() 数组反转
indexOf() 获取某个成员在数组中第一次出现的索引值
splice() 在数组中增加或者删除成员
join() 将数组拼接成字符串
<!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>
<script>
// 创建数组的第一种方法 面向对象
var aList01 = new Array(1, 2, 3);
// 创建数组方法2 直接量的方式
var aList02 = ['a', 'b', 'c', 'd'];
// 数组的方法与属性
// 获取数组成员的个数 -- 属性
var iLen = aList02.length;
alert(iLen);
// 操作数组的某个成员
alert(aList02[2]);
// 从数组后面增加成员 push()
aList02.push("e");
alert(aList02);
// 从数组后删除成员 pop()
aList02.pop();
alert(aList02);
// 将数组反转 reverse()
aList02.reverse();
alert(aList02);
// 获取某个成员在数组中第一次出现的索引值 indexOf()
var aList3 = ['a', 'b', 'c', 'd', 'c', 'd'];
var iPos = aList3.indexOf("c");
var iPos2 = aList3.indexOf("e")
alert(iPos);
alert(iPos2); // 数组中不存在该值时 就返回-1
// 在数组中增加或删除成员 splice()
aList3.splice(2, 1, 7, 8, 9); // 从第2个元素开始 删除1个元素 增加7 8 9
alert(aList3);
// join()将数组成员通过一个分隔 join()
var sTr = aList3.join("-");
var sTr2 = aList3.join("");
alert(sTr);
alert(sTr2);
// 多维度数组
var aList = [[1,2,3], ['a', 'b', 'c', 'd']];
alert(aList[0][1]);
</script>
</head>
<body>
</body>
</html>JavaScript循环语句
<!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>
<script>
var aList = ['a', 'b', 'c', 'd', 'e'];
var iLen = aList.length;
// i++ 相当于 i+=1
for(var i=0;i<iLen;i++){
alert(aList[i])
}
</script>
</head>
<body>
</body>
</html>数组去重练习
<!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>
<script>
var aList = ['a', 'b', 'c', 'd', 'e', 'f', 'b', 'a', 'd', 'f'];
var aList2 = [];
for(var i=0;i<aList.length;i++){
if(aList.indexOf(aList[i])==i){
aList2.push(aList[i]);
}
};
alert(aList2);
</script>
</head>
<body>
</body>
</html>字符串以及操作方法
parseInt() 字符串转数字
parseFloat() 字符串转浮点数
split() 字符串切片
indexOf() 查找字符串是否含有某字符
substring()截取字符创用法 substring(start, end)
split() 分隔字符串为数组
<!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>
<script>
window.onload = function(){
var iNum01 = 12;
var sNum01 = '12';
var sNum02 = '12.45';
alert(iNum01 + 10); // 加法运算 22
alert(sNum01 + 10); // 字符串拼接 '1210' 如果有一边是字符串就做字符串拼接
// parseInt 将字符串转化为数值型数据
alert(parseInt(sNum01) + 10);
// parseFloat 将字符串转化为浮点数
alert(parseFloat(sNum02) + 10);
var sTr = '2018-05-07';
// split 拆分字符串为数组 -- 列表
var aList = sTr.split("-");
alert(aList);
var aList2 = sTr.split("");
alert(aList2);
// indexOf 获取某小段字符串在大段字符串里面的索引值
var sTr2 = 'abcdefg123456';
var iPos = sTr2.indexOf('e');
var iPos2 = sTr2.indexOf('-1');
alert(iPos);
alert(iPos2);
// substring 截取字符串
var sTr3 = sTr2.substring(3, 6);
alert(sTr3);
// 字符串反转
var sTr4 = sTr2.split("").reverse().join("");
alert(sTr4);
}
</script>
</head>
<body>
</body>
</html>定时器
定时调用函数
做动画
setTimeout(funcname, /s)
var xxx = setInterval(funcname, /s)
clearInterval(xxx)
<!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>
<style>
.box{
width: 200px;
height: 500px;
background:gold;
position: fixed;
left: 0px;
top: 100px;
}
</style>
<script>
window.onload = function(){
var oDiv = document.getElementById("box")
var iLeft = 0;
setInterval(fnMove, 30)
var oTimer = setInterval(fnMove, 30)
function fnMove(){
iLeft += 3;
oDiv.style.left = iLeft + 'px';
if(iLeft>600){
clearInterval(oTimer);
}
}
// fnMove();
}
</script>
</head>
<body>
<div class="box" id="box">xxx</div>
</body>
</html>