索引
JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。
前端三大块
1、HTML：页面结构
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
1、行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
2、页面script标签嵌入
<script type="text/javascript"> alert('ok！'); </script>
3、外部引入
<script type="text/javascript" src="js/index.js"></script>
3.变量
JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'
var iNum = 123; var sTr = 'asd'; //同时定义多个变量可以用","隔开，公用一个‘var’关键字 var iNum = 45,sTr='qwe',sCount='68';
变量类型
5种基本数据类型：
1、number 数字类型
2、string 字符串类型
3、boolean 布尔类型 true 或 false
4、undefined undefined类型，变量声明未初始化，它的值就是undefined
5、null null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
1种复合类型：
object
javascript语句与注释
1、一条javascript语句应该以“;”结尾
<script type="text/javascript"> var iNum = 123; var sTr = 'abc123'; function fnAlert(){ alert(sTr); }; fnAlert(); </script>
2、javascript注释
<script type="text/javascript"> // 单行注释 var iNum = 123; /* 多行注释 1、... 2、... */ var sTr = 'abc123'; </script>
变量、函数、属性、函数参数命名规范
1、区分大小写
2、第一个字符必须是字母、下划线（_）或者美元符号（$）
3、其他字符可以是字母、下划线、美元符或数字
匈牙利命名风格：
对象o Object 比如：oDiv
数组a Array 比如：aItems
字符串s String 比如：sUserName
整数i Integer 比如：iItemCount
布尔值b Boolean 比如：bIsComplete
浮点数f Float 比如：fPrice
函数fn Function 比如：fnHandler
正则表达式re RegExp 比如：reEmailCheck
4.获取元素方法一
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>
上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：
第一种方法：将javascript放到页面最下边
.... <div id="div1">这是一个div元素</div> .... <script type="text/javascript"> var oDiv = document.getElementById('div1'); </script> </body>
第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行，就不会出错了。
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); } </script> .... <div id="div1">这是一个div元素</div>
5.操作元素属性
获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
操作属性的方法
1、“.” 操作
2、“[ ]”操作
属性写法
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
通过“.”操作属性：
<script type="text/javascript"> window.onload = function(){ var oInput = document.getElementById('input1'); var oA = document.getElementById('link1'); // 读取属性值 var sValue = oInput.value; var sType = oInput.type; var sName = oInput.name; var sLinks = oA.href; // 写(设置)属性 oA.style.color = 'red'; oA.style.fontSize = sValue; } </script> ...... <input type="text" name="setsize" id="input1" value="20px"> <a href="http://www.163.com" id="link1">网易</a>
通过“[ ]”操作属性：
<script type="text/javascript"> window.onload = function(){ var oInput1 = document.getElementById('input1'); var oInput2 = document.getElementById('input2'); var oA = document.getElementById('link1'); // 读取属性 var sVal1 = oInput1.value; var sVal2 = oInput2.value; // 写(设置)属性 // oA.style.val1 = val2; 没反应 oA.style[sVal1] = sVal2; } </script> ...... <input type="text" name="setattr" id="input1" value="fontSize"> <input type="text" name="setnum" id="input2" value="30px"> <a href="http://www.163.com" id="link1">网易</a>
innerHTML
innerHTML可以读取或者写入标签包裹的内容
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); //读取 var sTxt = oDiv.innerHTML; alert(sTxt); //写入 oDiv.innerHTML = '<a href="http://www.163.com">网易<a/>'; } </script> ...... <div id="div1">这是一个div元素</div>
6.函数
函数就是重复执行的代码片。
函数定义与执行
<script type="text/javascript">
// 函数定义
function fnAlert(){
alert('hello!');
}
// 函数执行
fnAlert();
</script>
变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。
<script type="text/javascript"> fnAlert(); // 弹出 hello！ alert(iNum); // 弹出 undefined function fnAlert(){ alert('hello!'); } var iNum = 123; </script>
提取行间事件
在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。
<!--行间事件调用函数 -->
<script type="text/javascript">
function fnAlert(){
alert('ok!');
}
</script>
......
<input type="button" name="" value="弹出" onclick="fnAlert()">
<!-- 提取行间事件 -->
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = fnAlert;
function fnAlert(){
alert('ok!');
}
}
</script>
......
<input type="button" name="" value="弹出" id="btn1">
匿名函数
定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用。
<script type="text/javascript"> window.onload = function(){ var oBtn = document.getElementById('btn1'); /* oBtn.onclick = myalert; function myalert(){ alert('ok!'); } */ // 直接将匿名函数赋值给绑定的事件 oBtn.onclick = function (){ alert('ok!'); } } </script>
例子：网页换肤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/skin01.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="皮肤一" id="btn01">
<input type="button" name="" value="皮肤二" id="btn02">
</body>
</html>
函数传参
<script type="text/javascript">
function fnAlert(a){
alert(a);
}
fnAlert(12345);
</script>
函数'return'关键字
函数中'return'关键字的作用：
1、返回函数执行的结果
2、结束函数的运行
3、阻止默认行为
<script type="text/javascript"> function fnAdd(iNum01,iNum02){ var iRs = iNum01 + iNum02; return iRs; alert('here!'); } var iCount = fnAdd(3,4); alert(iCount); //弹出7 </script>
7.条件语句
通过条件来控制程序的走向，就需要用到条件语句。
运算符
1、算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
2、赋值运算符：=、 +=、 -=、 *=、 /=、 %=
3、条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
if else
var iNum01 = 3; var iNum02 = 5; var sTr; if(iNum01>iNum02){ sTr = '大于'; } else { sTr = '小于'; } alert(sTr);
例子：制作单个按钮点击切换元素的显示和隐藏效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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{
200px;
height:400px;
background-color:gold;
}
</style>
</head>
<body>
<input type="button" name="" value="切换" id="btn01">
<div class="box" id="box01"></div>
</body>
</html>
多重if else语句
var iNow = 1; if(iNow==1) { ... ; } else if(iNow==2) { ... ; } else { ... ; }
switch语句
多重if else语句可以换成性能更高的switch语句
var iNow = 1; switch (iNow){ case 1: ...; break; case 2: ...; break; default: ...; }
例子：制作随着星期换背景的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var iWeek = 2;
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>
8.数组及操作方法
数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。
定义数组的方法
//对象的实例创建 var aList = new Array(1,2,3); //直接量创建 var aList2 = [1,2,3,'asd'];
操作数组中数据的方法
1、获取数组的长度：aList.length;
var aList = [1,2,3,4]; alert(aList.length); // 弹出4
2、用下标操作数组的某个数据：aList[0];
var aList = [1,2,3,4]; alert(aList[0]); // 弹出1
3、join() 将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4]; alert(aList.join('-')); // 弹出 1-2-3-4
4、push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4]; aList.push(5); alert(aList); //弹出1,2,3,4,5 aList.pop(); alert(aList); // 弹出1,2,3,4
5、unshift()和 shift() 从数组前面增加成员或删除成员
var aList = [1,2,3,4]; aList.unshift(5); alert(aList); //弹出5,1,2,3,4 aList.shift(); alert(aList); // 弹出1,2,3,4
6、reverse() 将数组反转
var aList = [1,2,3,4]; aList.reverse(); alert(aList); // 弹出4,3,2,1
7、indexOf() 返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4]; alert(aList.indexOf(1));
8、splice() 在数组中增加或删除成员
var aList = [1,2,3,4]; aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素 alert(aList); //弹出 1,2,7,8,9,4
多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']]; alert(aList[0][1]); //弹出2;
批量操作数组中的数据，需要用到循环语句
9.循环语句
程序中进行有规律的重复性操作，需要用到循环语句。
for循环
for(var i=0;i<len;i++) { ...... }
例子1：将数组中的数据分别用弹框弹出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
/* for(var i=0;i<5;i++)
{
alert('ok!');
}*/
var aList = ['a','b','c','d'];
var iLen = aList.length;
for(var i=0;i<iLen;i++)
{
alert(aList[i]);
}
</script>
</head>
<body>
</body>
</html>
例子2：将数组中的数据放入到页面中的列表中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oUl = document.getElementById('list');
var aList = ['美人鱼','疯狂动物城','魔兽','美国队长3','湄公河行动'];
var iLen = aList.length;
var sTr = '';
for(var i=0;i<iLen;i++)
{
sTr += '<li>'+ aList[i]+ '</li>';
}
oUl.innerHTML = sTr;
}
</script>
<style type="text/css">
.list{
list-style:none;
margin:50px auto 0;
padding:0;
300px;
height:305px;
}
.list li{
height:60px;
border-bottom:1px dotted #000;
line-height:60px;
font-size:16px;
}
</style>
</head>
<body>
<ul class="list" id="list">
<!-- <li>美人鱼</li>
<li>美人鱼</li>
<li>美人鱼</li>
<li>美人鱼</li>
<li>美人鱼</li> -->
</ul>
</body>
</html>
while循环
var i=0; while(i<8){ ...... i++; }
数组去重
var aList = [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<aList.length;i++) { if(aList.indexOf(aList[i])==i) { aList2.push(aList[i]); } } alert(aList2);
10.获取元素方法二
可以使用内置对象document上的getElementsByTagName方法来获取页面上的某一种标签，获取的是一个选择集，不是数组，但是可以用下标的方式操作选择集里面的标签元素。
<script type="text/javascript"> window.onload = function(){ var aLi = document.getElementsByTagName('li'); // aLi.style.backgroundColor = 'gold'; // 出错！不能同时设置多个li alert(aLi.length); aLi[0].style.backgroundColor = 'gold'; } </script> .... <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul>
例子：使用循环操作列表中的每个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通过标签获取元素</title>
<script type="text/javascript">
window.onload = function(){
// 通过标签名称获取li元素，生成一个选择集，赋值给aLi
var aLi = document.getElementsByTagName('li');
// 读取选择集内元素的个数
//alert(aLi.length); // 弹出13
var iLen = aLi.length;
//给一个li设置背景色
//aLi[0].style.backgroundColor = 'gold';
// 不能给选择集设置样式属性
//aLi.style.backgroundColor = 'gold';
/*
同时给所有的li加背景色
for(var i=0;i<iLen;i++)
{
aLi[i].style.backgroundColor = 'gold';
}
*/
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';
}
}
}
</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>
11.Javascript组成
1、ECMAscript javascript的语法（变量、函数、循环语句等语法）
2、DOM 文档对象模型 操作html和css的方法
3、BOM 浏览器对象模型 操作浏览器的一些方法
12.字符串处理方法
1、字符串合并操作：“ + ”
var iNum01 = 12; var iNum02 = 24; var sNum03 = '12'; var sTr = 'abc'; alert(iNum01+iNum02); //弹出36 alert(iNum01+sNum03); //弹出1212 数字和字符串相加等同于字符串相加 alert(sNum03+sTr); // 弹出12abc
2、parseInt() 将数字字符串转化为整数
var sNum01 = '12'; var sNum02 = '24'; var sNum03 = '12.32'; alert(sNum01+sNum02); //弹出1224 alert(parseInt(sNum01)+parseInt(sNum02)) //弹出36 alert(sNum03) //弹出数字12 将字符串小数转化为数字整数
3、parseFloat() 将数字字符串转化为小数
var sNum03 = '12.32' alert(parseFloat(sNum03)); //弹出 12.32 将字符串小数转化为数字小数
4、split() 把一个字符串分隔成字符串组成的数组
var sTr = '2017-4-22'; var aRr = sTr.split("-"); var aRr2= sTr.split(""); alert(aRr); //弹出['2017','4','2'] alert(aRr2); //弹出['2','0','1','7','-','4','-','2','2']
5、charAt() 获取字符串中的某一个字符
var sId = "#div1"; var sTr = sId.charAt(0); alert(sTr); //弹出 #
6、indexOf() 查找字符串是否含有某字符
var sTr = "abcdefgh"; var iNum = sTr.indexOf("c"); alert(iNum); //弹出2
7、substring() 截取字符串 用法： substring(start,end)（不包括end）
var sTr = "abcdefghijkl"; var sTr2 = sTr.substring(3,5); var sTr3 = sTr.substring(1); alert(sTr2); //弹出 de alert(sTr3); //弹出 bcdefghijkl
8、toUpperCase() 字符串转大写
var sTr = "abcdef"; var sTr2 = sTr.toUpperCase(); alert(sTr2); //弹出ABCDEF
9、toLowerCase() 字符串转小写
var sTr = "ABCDEF"; var sTr2 = sTr.toLowerCase(); alert(sTr2); //弹出abcdef
10、字符串反转
var str = 'asdfj12jlsdkf098'; var str2 = str.split('').reverse().join(''); alert(str2);
13.类型转换
1、直接转换 parseInt() 与 parseFloat()
alert('12'+7); //弹出127
alert( parseInt('12') + 7 ); //弹出19
alert( parseInt(5.6)); // 弹出5
alert('5.6'+2.3); // 弹出5.62.3
alert(parseFloat('5.6')+2.3); // 弹出7.8999999999999995
alert(0.1+0.2); //弹出 0.3000000000000004
alert((0.1*100+0.2*100)/100); //弹出0.3
alert((parseFloat('5.6')*100+2.3*100)/100); //弹出7.9
2、隐式转换 “==” 和 “-”
if('3'==3) { alert('相等'); } // 弹出'相等' alert('10'-3); // 弹出7
3、NaN 和 isNaN
alert( parseInt('123abc') ); // 弹出123
alert( parseInt('abc123') ); // 弹出NaN
例子：制作一个计算器，可以计算加、减、乘、除，用户输入非数字或者置空可以提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<script type="text/javascript">
window.onload = function(){
var oInput01 = document.getElementById('input01');
var oInput02 = document.getElementById('input02');
var oFuhao = document.getElementById('fuhao');
var oBtn = document.getElementById('btn');
oBtn.onclick = function(){
var num01 = oInput01.value;
var num02 = oInput02.value;
var fuhao = oFuhao.value;
if(num01=="" || num02==""){
alert('输入框不能为空！');
return;
}
if(isNaN(num01) || isNaN(num02)){
alert('请输入数字！');
return;
}
switch(fuhao){
case '0':
alert((parseFloat(num01)*100+parseFloat(num02)*100)/100);
break;
case '1':
alert((parseFloat(num01)*100-parseFloat(num02)*100)/100);
break;
case '2':
alert(((parseFloat(num01)*100)*(parseFloat(num02)*100))/10000);
break;
case '3':
alert((parseFloat(num01)*100)/(parseFloat(num02)*100));
break;
}
}
}
</script>
</head>
<body>
<h1>计算器</h1>
<input type="text" name="" id="input01">
<select id="fuhao">
<option value="0">+</option>
<option value="1">-</option>
<option value="2">*</option>
<option value="3">/</option>
</select>
<input type="text" name="" id="input02">
<input type="button" name="" value="计算" id="btn">
</body>
</html>
14.定时器
定时器在javascript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流
定时器类型及语法
/* 定时器： setTimeout 只执行一次的定时器 clearTimeout 关闭只执行一次的定时器 setInterval 反复执行的定时器 clearInterval 关闭反复执行的定时器 */ var time1 = setTimeout(myalert,2000); var time2 = setInterval(myalert,2000); /* clearTimeout(time1); clearInterval(time2); */ function myalert(){ alert('ok!'); }
1、定时器制作移动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
var iLeft = 0;
var iSpeed = 3;
/*
var timer = setInterval(moving,30);
function moving(){
iLeft += 3;
oDiv.style.left = iLeft + 'px';
}
*/
var timer = setInterval(function(){
iLeft += iSpeed;
oDiv.style.left = iLeft + 'px';
if(iLeft>700)
{
iSpeed=-3;
}
if(iLeft<0)
{
iSpeed = 3;
}
},20);
}
</script>
<style type="text/css">
.box{
200px;
height:200px;
background-color:gold;
position:absolute;
left:0;
top:100px;
}
</style>
</head>
<body>
<div id="div1" class="box"></div>
</body>
</html>
2、定时器制作无缝滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.list_con{
1000px;
height:200px;
border:1px solid #000;
margin:10px auto 0;
background-color:#f0f0f0;
position:relative;
overflow:hidden;
}
.list_con ul{
list-style:none;
2000px;
height:200px;
position:absolute;
left:0;
top:0;
}
.list_con li{
180px;
height:180px;
float:left;
margin:10px;
}
.btns_con{
1000px;
height:30px;
margin:50px auto 0;
position:relative;
}
.left,.right{
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;
// 当ul向左滚动到第5个li时，瞬间将整个ul拉回到初始位置
if(iLeft<-1000)
{
iLeft=0;
}
//当ul在起始位置往右滚动时候，瞬间将整个ul拉回到往左的第5个li的位置
if(iLeft>0)
{
iLeft = -1000;
}
oUl.style.left = iLeft + 'px';
}
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>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
body,ul,li{margin:0;padding:0}
ul{list-style:none;}
.slide{
500px;
height:100px;
border:1px solid #ddd;
margin:20px auto 0;
position:relative;
overflow:hidden;
}
.slide ul{
position:absolute;
1000px;
height:100px;
left:0;
top:0;
}
.slide ul li{
90px;
height:90px;
margin:5px;
background-color:#ccc;
line-height:90px;
text-align: center;
font-size:30px;
float:left;
}
.btns{
500px;
height:50px;
margin:10px auto 0;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
var $ul = $('#slide ul');
var left = 0;
var deraction = 2;
$ul.html($ul.html()+$ul.html());
var timer = setInterval(move,30);
function move(){
left-=deraction;
if(left<-500){
left = 0;
}
if(left>0){
left=-500;
}
$ul.css({left:left});
}
$('#btn1').click(function(){
deraction = 2;
});
$('#btn2').click(function(){
deraction = -2;
})
$('#slide').mouseover(function(){
clearInterval(timer);
})
$('#slide').mouseout(function(){
timer = setInterval(move,30);
})
})
</script>
</head>
<body>
<div class="btns">
<input type="button" name="" value="向左" id="btn1">
<input type="button" name="" value="向右" id="btn2">
</div>
<div class="slide" id="slide">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</body>
</html>
3、定时器制作时钟
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); function timego(){ var now = new Date(); var year = now.getFullYear(); var month = now.getMonth()+1; var date = now.getDate(); var week = now.getDay(); var hour = now.getHours(); var minute = now.getMinutes(); var second = now.getSeconds(); var str = '当前时间是：'+ year + '年'+month+'月'+date+'日 '+toweek(week)+' '+todou(hour)+':'+todou(minute)+':'+todou(second); oDiv.innerHTML = str; } timego(); setInterval(timego,1000); } function toweek(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 { return '星期六'; } } function todou(n){ if(n<10) { return '0'+n; } else { return n; } } </script> ...... <div id="div1"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</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表示一月，11表示十二月
var iMonth = sNow.getMonth()+1;
var iDate = sNow.getDate();
// 星期是从0到6,0表示星期天
var iWeek = sNow.getDay();
var iHour = sNow.getHours();
var iMinute = sNow.getMinutes();
var iSecond = sNow.getSeconds();
var sTr = '当前时间是：'+ iYear + '年'+ iMonth + '月'+ iDate+'日 ' + fnToweek(iWeek) + ' ' +fnTodou(iHour) + ':' + fnTodou(iMinute) + ':' + fnTodou(iSecond);
oDiv.innerHTML = sTr;
}
// 刚开始调用一次，解决刚开始1秒钟空白的问题
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{
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>
4、定时器制作倒计时
<script type="text/javascript"> window.onload = function(){ var oDiv = document.getElementById('div1'); function timeleft(){ var now = new Date(); var future = new Date(2016,8,12,24,0,0); var lefts = parseInt((future-now)/1000); var day = parseInt(lefts/86400); var hour = parseInt(lefts%86400/3600); var min = parseInt(lefts%86400%3600/60); var sec = lefts%60; str = '距离2016年9月12日晚24点还剩下'+day+'天'+hour+'时'+min+'分'+sec+'秒'; oDiv.innerHTML = str; } timeleft(); setInterval(timeleft,1000); } </script> ...... <div id="div1"></div>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
function fnTimeleft(){
//实际开发中需要读取后台的时间，可以通过ajax来读取
var sNow = new Date();
// 未来时间：4月30日晚24点
var sFuture = new Date(2017,3,30,24,0,0);
//计算还有多少秒
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 = '距离5月1日还剩：'+ 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>
</head>
<style type="text/css">
div{
text-align:center;
font-size:30px;
color:pink;
}
</style>
<body>
<div id="div1"></div>
</body>
</html>
15.变量作用域
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。
1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
<script type="text/javascript">
//全局变量
var a = 12;
function myalert()
{
//局部变量
var b = 23;
alert(a);
alert(b);
}
myalert(); //弹出12和23
alert(a); //弹出12
alert(b); //出错
</script>
16.封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
一般定义的函数和执行函数：
function myalert(){ alert('hello!'); }; myalert();
封闭函数：
(function myalert(){ alert('hello!'); })();
还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function myalert(){ alert('hello!'); }()
封闭函数的好处
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全，比如：
var iNum01 = 12; function myalert(){ alert('hello!'); } (function(){ var iNum01 = 24; function myalert(){ alert('hello!world'); } alert(iNum01); myalert() })() alert(iNum01); myalert();
17.常用内置对象
1、document
document.getElementById //通过id获取元素 document.getElementsByTagName //通过标签名获取元素 document.referrer //获取上一个跳转页面的地址(需要服务器环境)
2、location
window.location.href //获取或者重定url地址 window.location.search //获取地址参数部分 window.location.hash //获取页面锚点或者叫哈希值
3、Math
Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整
例子：制作一定范围内的随机整数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var iPi = Math.PI;
var arr = [];
for (var i=0;i<100;i++)
{
// Math.random 只能返回从0到1之间的随机数，不包括0，也不包括1
var iNum = Math.random();
arr.push(iNum);
}
//alert(arr);
console.log(arr);
//向下取整，去掉小数部分
alert(Math.floor(5.6)); // 弹出5
//向上取整，去掉小数部分，整体加1
alert(Math.ceil(5.2))
// 10 - 20 之间的随机数
var iN01 = 10;
var iN02 = 20;
var arr2 = [];
for(var i=0;i<40;i++)
{
// 生成从10到20的随机数
var iNum02 = Math.floor((iN02-iN01+1)*Math.random()) + iN01;
arr2.push(iNum02);
}
console.log(arr2);
</script>
</head>
<body>
</body>
</html>