09-JavaScript
2018-12-16 本文已影响8人
努力爬行中的蜗牛
JavaScript介绍
JavaScript是运行在浏览器端的脚本语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript（Adobe公司，需要插件）等。
前端三大块
1、HTML：页面结构
2、CSS：页面表现，元素大小、颜色、位置、隐藏或显示、部分动画效果。
3、JavaScript：页面行为，部分动画效果，页面与用户的交互，页面功能。
JavaScript嵌入页面的方式
1、行间事件（主要用于事件）
2、页面script标签嵌入
3、外部引入
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<!-- 第二种嵌入js方式：内嵌js -->
<script type="text/javascript">
alert("hello world too")
</script>
<!-- 第三种嵌入js方式：外部引入 -->
<script type="text/javascript" src="js/hello.js"></script>
</head>
<body>
<!-- 第一种嵌入js的方式：行间事件 -->
<input type="button" name="" value="点击" onclick="alert('hello world')">
</body>
</html>
变量
JavaScript是一种弱类型语言，JavaScript的变量类型由它的值来决定。定义变量需要关键字‘var'
变量类型
5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null，在页面上获取不到对象，返回的值就是null
1种符合类型：object
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
/*
多行注释
*/
// 单行注释
// var iNum = 12;
// var sTr = 'abc';
// 同时定义多个变量可以用","隔开，共用一个'var'关键字
var iNum = 12, sTr = 'abc';
alert(iNum);
alert(sTr);
</script>
</head>
<body>
</body>
</html>
js语句和注释
js语句以；结尾；
注释分为单行注释和多行注释
变量、函数、属性、函数参数命名规则
1、区分大小写
2、第一个字符必须是字母、下划线（_)或者美元符号($)
3、其他字符可以是字母、下划线、美元符或数字
匈牙利命名风格
对象o Object 比如：oDiv
数组a Array 比如：altems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：blsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailcheck
获取元素方法一
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量。
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function() {
// document.getElementById('div1').style.color = 'red';
// document.getElementById('div1').style.fontSize = '30px';
// 用变量简化代码
var oDiv = document.getElementById('div1');
oDiv.style.color = 'red';
oDiv.style.fontSize = '30px';
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
操作元素属性
获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
操作属性的方法
1、"."操作
2、"[]" 操作
属性写法
1、html的属性和js里面的属性写法一样
2、“class”属性写成“className”
3、“style”属性里面的属性，有横杠的改成驼峰式，比如：“font-size"，改成“style.fontSize”
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
var oA = document.getElementById('link');
var oDiv2 = document.getElementById('div2');
// 读取属性
var sId = oDiv.id;
alert(sId);
// 写属性
oDiv.style.color = "red";
oA.href = "http://www.baidu.com";
oA.title = "这是百度地址";
// 操作class属性需要写成className
oDiv2.className = "box2";
}
</script>
<style type="text/css">
.box {
font-size: 20px;
color: gold;
}
.box2 {
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<div id="div1">这是一个div元素</div>
<a href="#" id="link">这是一个链接</a>
<div class="box" id="div2">这是第二个div</div>
</body>
</html>
中括号【】操作属性
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
var sMytyle = 'fontSize';
var sValue = '30px';
// 属性用变量来代替的话，需要用中括号【】来操作
oDiv.style[sMytyle] = sValue;
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
innerHTML
innerHTML可以读取或者写入标签包裹的内容。
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
// 读取元素里面的内容
var sTr = oDiv.innerHTML;
alert(sTr);
// 写元素的内容
//oDiv.innerHTML = "修改的文字";
oDiv.innerHTML = "<a href='http://itcast.cn'>传智播客</a>";
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
函数
函数就是重复执行的代码块。
函数的定义与执行
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
function fnAlert()
{
alert('hello world');
}
// 函数定义
function fnChange()
{
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
}
</script>
</head>
<body>
<!-- 函数调用 -->
<div id="div1" onclick="fnAlert()">这是一个div元素</div>
<input type="button" name="" value="改变div" onclick="fnChange()">
</body>
</html>
提取行间事件
在html行间调用的事件可以提取到JavaScript中调用，从而做到结构与行为分离。
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn01');
// 将事件属性和一个函数关联，函数不能写小括号，写了会马上执行
oBtn.onclick = fnChange;
// 函数定义
function fnChange()
{
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
}
}
</script>
</head>
<body>
<!-- 函数调用 -->
<div id="div1">这是一个div元素</div>
<input type="button" name="" value="改变div" id="btn01">
</body>
</html>
匿名函数
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn01');
// 匿名函数
oBtn.onclick = function()
{
var oDiv = document.getElementById('div1');
oDiv.style.color = "red";
oDiv.style.fontSize = "30px";
}
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
<input type="button" name="" value="改变div" id="btn01">
</body>
</html>
网页换肤demo
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<link rel="stylesheet" type="text/css" href="css/skin02.css" id="link01">
<script type="text/javascript">
window.onload = function() {
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
var oLink = document.getElementById('link01');
// 匿名函数
oBtn01.onclick = function()
{
oLink.href = "css/skin01.css";
}
oBtn02.onclick = function()
{
oLink.href = "css/skin02.css";
}
}
</script>
</head>
<body>
<input type="button" name="" value="皮肤1" id="btn01">
<input type="button" name="" value="皮肤2" id="btn02">
</body>
</html>
变量与函数的预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<link rel="stylesheet" type="text/css" href="css/skin02.css" id="link01">
<script type="text/javascript">
// 预解析会把变量的声明提前
alert(iNum); // 弹出undefined
// 预解析会让函数的声明和定义提前
myalert();
var iNum = 12;
function myalert() {
alert("hello world");
}
</script>
</head>
<body>
</body>
</html>
函数传参
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
function fnMyalert(a) {
alert(a);
}
fnMyalert('hello world');
function fnChangeStyle(mystyle, val) {
var oDiv = document.getElementById('div1');
oDiv.style[mystyle] = val;
}
fnChangeStyle('color', 'red');
}
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
函数‘return’关键字
函数中‘return’关键字作用：
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
function fnAdd(a, b) {
var c = a + b;
return c;
}
var isResult = fnAdd(2, 5);
alert(isResult);
</script>
</head>
<body>
<div id="div1">这是一个div元素</div>
</body>
</html>
加法运算
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var oInput01 = document.getElementById('input01');
var oInput02 = document.getElementById('input02');
var oBtn= document.getElementById('btn');
oBtn.onclick = function() {
var iVal01 = parseInt(oInput01.value);
var iVal02 = parseInt(oInput02.value);
alert(iVal01 + iVal02);
}
}
</script>
</head>
<body>
<input type="text" name="" id="input01"> +
<input type="text" name="" id="input02">
<input type="button" name="" value="相加" id="btn">
</body>
</html>
条件语句
通过条件来控制程序的走向，就需要用到条件语句。
运算符
1、算符运算符：+（加）、-（减）、*（乘）、/（除）、%（求余）
2、赋值运算符：=、+=、-=、*=、/=、%=
3、条件运算符：==、===、>、>=、<、<=、!=、&&（而且）、||（或者）、!(否)
求余数
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var iNum01 = 11;
var iNum02 = 2;
alert(iNum01%iNum02);
}
</script>
</head>
<body>
</body>
</html>
赋值运算
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var iNum01 = 12;
iNum01 += 2;
iNum01 -= 5;
iNum01 *= 2;
iNum01 /= 2;
iNum01 %= 2;
iNum01++;
}
</script>
</head>
<body>
</body>
</html>
if else
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
var iNum01 = 2;
var sNum01 = '2';
// 两个等号会进行类型转换再比较
if (iNum01===sNum01) {
alert('相等');
} else {
alert('不相等');
}
if (!4>3) {
alert('大于');
} else {
alert('不大于');
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn01');
var oDiv = document.getElementById('box01');
// oDiv.style.display 是读取的标签里写的display属性值，如果没有写，这个值为空
oBtn.onclick = function() {
if (oDiv.style.display === 'block' || oDiv.style.display === '') {
oDiv.style.display = 'none';
} else {
oDiv.style.display = 'block';
}
}
}
</script>
<style type="text/css">
.box {
width: 300px;
height: 400px;
background-color: gold;
}
</style>
</head>
<body>
<input type="button" name="" value="切换" id="btn01">
<div class="box" id="box01"></div>
</body>
</html>
多重条件判断语句
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var iWeek = 5;
var oBody = document.getElementById('body01');
if (iWeek===1) {
oBody.style.backgroundColor = 'gold';
} else if (iWeek===2) {
oBody.style.backgroundColor = 'green';
} else if (iWeek===3) {
oBody.style.backgroundColor = 'pink';
} else if (iWeek===4) {
oBody.style.backgroundColor = 'yellowgreen';
} else if (iWeek===5) {
oBody.style.backgroundColor = 'lightblue';
} else {
oBody.style.backgroundColor = 'lightgreen';
}
}
</script>
</head>
<body id=body01>
</body>
</html>
switch语句
多重if else语句可以换成性能更高的switch语句。
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var iWeek = 3;
var oBody = document.getElementById('body01');
switch (iWeek) {
case 1:
oBody.style.backgroundColor = 'gold';
break;
case 2:
oBody.style.backgroundColor = 'green';
break;
case 3:
oBody.style.backgroundColor = 'pink';
break;
case 4:
oBody.style.backgroundColor = 'yellowgreen';
break;
case 5:
oBody.style.backgroundColor = 'lightblue';
break;
default:
oBody.style.backgroundColor = 'lightgreen';
}
}
</script>
</head>
<body id=body01>
</body>
</html>
数组及操作方法
数组就是一组数据的集合，JavaScript中，数组里面的数据可以是不同类型的。
定义数组的方法
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
// 数组的定义方法1：通过类实例化来创建数组，效率不高
var aList01 = new Array(1, 2, 3);
// 通过直接量的方式创建数组
var aList02 = [1, 2, 3];
}
</script>
</head>
<body>
</body>
</html>
操作数据中数据的方法
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
// 数组的定义方法1：通过类实例化来创建数组，效率不高
var aList01 = new Array(1, 2, 3);
// 通过直接量的方式创建数组
var aList02 = [1, 2, 3];
// 1、通过length来获取数组成员的个数
alert(aList02.length);
// 2、用下标来操作数组的某个数据
alert(aList02[0]);
// 3/join()将数组成员通过一个分隔符合并成字符串
alert(aList02.join('-'));
// 4、通过push方法在数组后面增加成员，通过pop方法删除成员
aList02.push('b');
alert(aList02);
aList02.pop();
alert(aList02);
// 5、unshift()和shift()从数组前面增加成员或删除成员
aList02.unshift(4);
alert(aList02);
aList02.shift();
alert(aList02);
// 6、reverse()将数组反转
aList02.reverse();
alert(aList02);
// 7、indexOf()返回数组中元素第一次出现的索引值
alert(aList02.indexOf(1));
// 8、splice()在数组中增加或删除成员
// 从第二个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
aList02.splice(2,1,7,8,9);
alert(aList02);
}
</script>
</head>
<body>
</body>
</html>
多维数组
多维数组指的是数组的成员也是数组的数组。
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var aList = [[1, 2, 3, 4],['a','b','c'],[6, 7, 8]];
alert(aList.length);
alert(aList[0].length);
alert(aList[0][1]);
}
</script>
</head>
<body>
</body>
</html>
循环语句
程序中进行有规律的重复性操作，需要用到循环语句。
for循环
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var aList = [[1, 2, 3, 4],['a','b','c'],[6, 7, 8]];
alert(aList.length);
alert(aList[0].length);
alert(aList[0][1]);
}
</script>
</head>
<body>
</body>
</html>
for循环实例
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var oUl = document.getElementById('list');
var aList = ['美人鱼', '疯狂动物城', '魔兽', '美国队长3', '湄公河行动'];
var aLen = aList.length;
var sTr = '';
for (var i = 0; i < aLen; i++) {
sTr += '<li>' + aList[i] + '</li>';
}
oUl.innerHTML = sTr;
}
</script>
<style type="text/css">
.list {
list-style: none;
margin: 50px auto 0;
padding: 0;
width: 300px;
height: 305px;
}
.list li {
height: 60px;
line-height: 60px;
font-size: 16px;
border-bottom: 1px dotted #000;
}
</style>
</head>
<body>
<ul class="list" id="list">
</ul>
</body>
</html>
while循环
var i = 0;
while (i < 8) {
...
i++;
}
数组去重
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
var aList = [2,3,4,5,6,7,8,3,4,5,2,7,8,9,3,4,5,6,3,4,8,9];
var aList2 = [];
var aLen = aList.length;
for (var i = 0; i < aLen; i++) {
if (aList.indexOf(aList[i]) == i) {
aList2.push(aList[i]);
}
}
alert(aList2);
</script>
</head>
<body>
</body>
</html>
获取元素方法二
可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。
<!DOCTYPE html>
<html>
<head>
<title>通过标签获取元素</title>
<script type="text/javascript">
window.onload = function() {
// 通过标签名称获取li元素，生成一个选择集，赋值给aLi
var aLi = document.getElementsByTagName('li');
alert(aLi.length);
var iLen = aLi.length;
// for (var i = 0; i < iLen; i++) {
// var li = aLi[i];
// li.style.backgroundColor = "green";
// }
var oUl = document.getElementById('list1');
var aLi2 = oUl.getElementsByTagName('li');
var iLen2 = aLi2.length;
for (var i = 0; i < iLen2; i++) {
if(i%2 == 0) {
aLi2[i].style.backgroundColor = 'gold';
} else {
aLi2[i].style.backgroundColor = 'green';
}
}
}
</script>
</head>
<body>
<ul id="list1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<ul id="list2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
</html>
JavaScript组成
1、ECMAscript JavaScript的语法（变量、函数、循环语句等语法）
2、DOM文档对象模型，操作html和css的方法
3、BOM浏览器对象模型，操作浏览器的一些方法
字符串处理方法
1、字符串合并操作：“+”
2、parseInt()将数字字符串转换为整数
3、parseFloat()将数字字符串转化为小数
4、split()把一个字符串分割成字符串组成的数组
5、charAt()获取字符串中的某一个字符
6、indexOf()查找字符串是否含有某个字符
7、substring()截取字符串 用法：substring(start,end) （不包括end）
8、toUpperCase()字符串转大写
9、toLowerCase()字符串转小写
10、字符串反转
<!DOCTYPE html>
<html>
<head>
<title>字符串处理方法</title>
<script type="text/javascript">
var iNum01 = 12;
var sNum02 = '24';
var sTr = 'abc';
// 1、数字和字符串相加 等同于字符串拼接
// alert(iNum01 + sNum02);
// alert(sNum02 + sTr);
// 2、将数字字符串转换为整数
var sTr02 = '12.35';
// alert(parseInt(sTr02)); // 弹出12
// 3、将数字字符串转化为小数
// alert(parseFloat(sTr02));
// 4、把一个字符串分割成字符串组成的数组
var sTr03 = '2017-4-22';
var aRr = sTr03.split('-');
// alert(aRr); // 弹出['2017','4','22']
var aRr2 = sTr03.split('');
// alert(aRr2);
// 5、获取字符串中的某一个字符
var sTr04 = '#div';
var sTr05 = sTr04.charAt(0);
// alert(sTr05);
// 6、查找字符串是否含有某个字符
var sTr06 = 'abcdef microsoft asldjfl';
var iNum03 = sTr06.indexOf('microsoft'); // 没有就返回-1
// alert(iNum03);
// 7、截取字符串
var sTr07 = 'abcdef123456edfg';
var sTr08 = sTr07.substring(6,12);
// alert(sTr08);
var sTr09 = sTr04.substring(1); // 第二个参数不写表示到末尾
// alert(sTr09);
// 8、字符串转大写
var sTr10 = 'abcdef';
var sTr11 = sTr10.toUpperCase();
// alert(sTr11);
// 9、字符串转小写
var sTr12 = sTr11.toLowerCase();
// alert(sTr12);
// 10、字符串反转
var sTr13 = '1234kjfkjkdjfkghkhieidkjfk';
var sTr14 = sTr13.split('').reverse().join('');
alert(sTr14);
</script>
</head>
<body>
</body>
</html>
定时器
定时器在JavaScript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流
<!DOCTYPE html>
<html>
<head>
<title>定时器</title>
<script type="text/javascript">
function myalert() {
alert('hello world');
}
// 1、只执行一次的定时器:第一个参数是函数名或者是匿名函数，第二个参数是时间，单位是ms(毫秒)
var timer01 = setTimeout(myalert,2000);
// 2、关闭只执行一次的定时器
clearTimeout(timer01);
// 3、反复执行的定时器
var timer02 = setInterval(myalert,1000);
// 4、关闭反复执行的定时器
clearInterval(timer02);
// 匿名函数的写法
var timer03 = setInterval(function(){alert('hello python')},1000)
</script>
</head>
<body>
</body>
</html>
运动动画demo
<!DOCTYPE html>
<html>
<head>
<title>定时器动画</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
background-color: gold;
position: absolute;
left: 0;
top: 100px;
}
</style>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
var iLeft = 0;
function moving() {
iLeft += 10;
oDiv.style.left = iLeft + 'px';
if (iLeft >= 1000) {
clearInterval(timer);
}
}
var timer = setInterval(moving, 100);
}
</script>
</head>
<body>
<div id='div1' class="box"></div>
</body>
</html>
无缝滚动demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.list_con{
width:1000px;
height:200px;
border:1px solid #000;
margin:10px auto 0;
background-color:#f0f0f0;
position:relative;
overflow:hidden;
}
.list_con ul{
list-style:none;
width:2000px;
height:200px;
position:absolute;
left:0;
top:0;
}
.list_con li{
width:180px;
height:180px;
float:left;
margin:10px;
}
.btns_con{
width:1000px;
height:30px;
margin:50px auto 0;
position:relative;
}
.left,.right{
width:30px;
height:30px;
background-color:gold;
position:absolute;
left:-40px;
top:124px;
font-size:30px;
line-height:30px;
color:#000;
font-family: 'Arial';
text-align:center;
cursor:pointer;
border-radius:15px;
opacity:0.5;
}
.right{
left:1010px;
top:124px;
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('slide');
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
// 通过标签获取元素，获取的是选择集，加上下标才能获取到元素
var oUl = oDiv.getElementsByTagName('ul')[0];
var iLeft = 0;
var iSpeed = -2;
var iNowspeed = 0;
// 将ul里面的内容复制一份，整个ul里面就包含了10个li
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
function moving() {
iLeft += iSpeed;
oUl.style.left = iLeft + 'px';
// 当ul向左滚动到第5个li时，瞬间将整个ul拉回到初始位置
if (iLeft < -1000) {
iLeft = 0;
}
// 当ul在起始位置往右滚动时候，瞬间将整个ul拉回到往左的第5个li的位置
if (iLeft > 0) {
iLeft = -1000;
}
}
var timer = setInterval(moving, 30);
oBtn01.onclick = function() {
iSpeed = -2;
}
oBtn02.onclick = function() {
iSpeed = 2;
}
// 当鼠标移入的时候
oDiv.onmouseover = function() {
iNowspeed = iSpeed;
iSpeed = 0;
}
// 当鼠标移出的时候
oDiv.onmouseout = function() {
iSpeed = iNowspeed;
}
}
</script>
</head>
<body>
<div class="btns_con">
<div class="left" id="btn01"><</div>
<div class="right" id="btn02">></div>
</div>
<div class="list_con" id="slide">
<ul>
<li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
</ul>
</div>
</body>
</html>
变量作用域
变量作用域指的是变量的作用范围，JavaScript中的变量分为全局变量和局部变量。
1、全局变量：在函数之外定义的变量，为整个页面共用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
//函数外部定义的是全局变量，函数内部和外部都可以访问
var iNum01 = 12;
// 重复定义，后面的会覆盖前面的值
//var iNum01 = 14;
function myalert(){
//var iNum01 = 24;
// 函数内部定义的是局部变量，函数内部可以访问，外部不能访问
var iNum02 = 36;
alert(iNum01);
iNum01 += 10;
}
function myalert02(){
alert(iNum01);
}
myalert(); // 弹出 12
myalert02(); // 弹出 22
//alert(iNum02); 出错！
</script>
</head>
<body>
</body>
</html>
时钟demo
<!DOCTYPE html>
<html>
<head>
<title>时钟</title>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
function fnTimego() {
var sNow = new Date();
// 获取年份
var iYear = sNow.getFullYear();
// 月份是从0-11 0表示1月 11表示12月
var iMonth = sNow.getMonth() + 1;
// 星期是从0-6
var iDate = sNow.getDate();
var iWeek = sNow.getDay();
var iHour = sNow.getHours();
var iMinute = sNow.getMinutes();
var iSecond = sNow.getSeconds();
var sTr = '当前时间是：' + iYear + '年' + fnTodou(iMonth) + '月' + fnTodou(iDate) + '日' + ' ' + fnToWeek(iWeek) + ' ' + fnTodou(iHour) + ':' + fnTodou(iMinute) + ':' + fnTodou(iSecond);
oDiv.innerHTML = sTr;
}
// 刚开始调用一次解决刚开始1s空白的问题
fnTimego();
setInterval(fnTimego, 1000);
function fnToWeek(n) {
if (n == 0) {
return '星期日';
} else if (n == 1) {
return '星期一';
} else if (n == 2) {
return '星期二';
} else if (n == 3) {
return '星期三';
} else if (n == 4) {
return '星期四';
} else if (n == 5) {
return '星期五';
} else if (n == 6) {
return '星期六';
}
}
function fnTodou(n) {
if (n < 10) {
return '0' + n;
} else {
return n;
}
}
}
</script>
<style type="text/css">
div {
text-align: center;
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
倒计时demo
<!DOCTYPE html>
<html>
<head>
<title>倒计时</title>
<script type="text/javascript">
window.onload = function() {
var oDiv = document.getElementById('div1');
function fnTimeleft() {
var sNow = new Date();
// 未来时间2018.12.31 23：59：59
var sFuture = new Date(2018,11,31,23,59,59);
// 计算还有多少秒
var sLeft = parseInt((sFuture - sNow) / 1000);
// 计算还剩多少天
var iDays = parseInt(sLeft/86400);
// 计算还剩多少小时
var iHours = parseInt((sLeft % 86400) / 3600);
// 计算还剩多少分钟
var iMinutes = parseInt(((sLeft % 86400) % 3600) / 60);
// 计算还剩多少秒
var iSeconds = sLeft % 60;
var sTr = '距离2019年还剩：' + fnTodou(iDays) + '天' + fnTodou(iHours) + '时' + fnTodou(iMinutes) + '分' + fnTodou(iSeconds) + '秒';
oDiv.innerHTML = sTr;
}
fnTimeleft();
setInterval(fnTimeleft, 1000);
function fnTodou(n) {
if (n < 10) {
return '0' + n;
} else {
return n;
}
}
}
</script>
<style type="text/css">
div {
text-align: center;
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
封闭函数
封闭函数时JavaScript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
<!DOCTYPE html>
<html>
<head>
<title>封闭函数</title>
<script type="text/javascript">
// 封闭函数 可以防止命名冲突的问题
(function() {
alert('hello world!');
})();
// 封闭函数的其他写法 加！或者~
!function() {
alert('hello world!');
}();
~function() {
alert('hello world!');
}();
var iNum01 = 12;
function myalert() {
alert(iNum01);
}
// 在封闭函数前面加一个“；”，可以避免js压缩时出错
(function() {
var iNum01 = 24;
function myalert() {
alert("hello python");
}
myalert();
})();
alert(iNum01);
myalert();
</script>
</head>
<body>
</body>
</html>
常用内置对象
1、document
document.getElementById // 通过id获取元素
document.getElementByTagName // 通过标签名获取元素
document.referrer // 获取上一个跳转页面的地址（需要服务器环境）
2、location
window.location.href // 获取或者重定url地址
window.location.search // 获取地址参数部分
window.location.hash // 获取页面锚点或者哈希值
<!DOCTYPE html>
<html>
<head>
<title>location属性</title>
<script type="text/javascript">
window.onload = function() {
// 存储上一个页面的地址：
// var sUrl = document.referrer;
var oBtn = document.getElementById('btn01');
oBtn.onclick = function() {
// var sUrl = document.referrer;
window.location.href = 'http://www.baidu.com';
}
var oBody = document.getElementById('body');
var sData = window.location.search;
var sHash = window.location.hash;
alert(sHash);
if (sData != '') {
var aRr = sData.split('=');
var iNum = aRr[1];
if (iNum == 1) {
oBody.style.backgroundColor = 'gold';
} else if (iNum == 2) {
oBody.style.backgroundColor = 'green';
} else if (iNum == 3) {
oBody.style.backgroundColor = 'pink';
}
}
}
</script>
</head>
<body id="body">
<input type="button" name="" value="跳转" id="btn01">
</body>
</html>
3、Math
Math.random 获取0-1随机数
Math.floor 向下取整
Math.ceil 向上取整
<!DOCTYPE html>
<html>
<head>
<title>math</title>
<script type="text/javascript">
var iPi = Math.PI;
alert(iPi);
var arr = []
for (var i = 0; i < 20; i++) {
// 返回0-1之间的随机数 不包括1
var iNum = Math.random();
arr.push(iNum);
}
console.log(arr)
// 向下取整 去掉小数部分
alert(Math.floor(5.6));
// 向上取整 去掉小数 部分
alert(Math.ceil(5.6));
// 10 - 20之间的随机数
var iN01 = 10;
var iN02 = 20;
var arr2 = [];
for (var i = 0; i < 30; i++) {
var iNum02 = Math.floor((iN02-iN01)*Math.random()) + iN01;
arr2.push(iNum02);
}
console.log(arr2);
</script>
</head>
<body>
</body>
</html>
调试程序的方法
1、alert()
2、console.log()
3、document.title()
<!DOCTYPE html>
<html>
<head>
<title>js</title>
<script type="text/javascript">
window.onload = function() {
var oBody = document.getElementById('body01');
var iNum01 = 12;
//alert会阻止程序的运行
alert(iNum01);
oBody.style.backgroundColor = 'gold';
var iNum02 = 24;
console.log(iNum02);
document.title = iNum02;
}
</script>
</head>
<body id="body01">
</body>
</html>
