函数
window.onload :当文档加载完成以后再执行相应的函数
docunment.write（） ：在文档的后面追加内容
js里的事件：区分
鼠标事件；键盘事件；表单事件；系统事件
重点掌握：onclick：单击事件、onmouseenter/onmouseover 鼠标移入事件、onmouseleave/onmouseout鼠标移除事件
函数的分类：
按照有无名称分为：有名函数和匿名函数
函数定义不能直接加（）执行，function fn() {alert(2);}();错误
函数表达式在后面可以加上（）执行，有名函数执行，用函数名加（）执行。
1 /* var a = function (){ 2 alert(1) 3 }*/ 4 5 var b = function fn() { 6 alert(2); 7 8 }; 9 // console.log(b); 10 // b(); 11 // fn()会报错 12 13 14 15 /* (function () { 16 alert(1) 17 })()*/ 18 19 /* var a = function () { 20 21 }*/ 22 23 /*(function () { 24 alert(1) 25 }())*/ 26 27 /*+function () { 28 alert(1) 29 }()*/ 30 31 /*-function () { 32 alert(1) 33 }()*/ 34 35 /* ~function () { 36 alert(1) 37 }()*/ 38 39 /* !function () { 40 alert(1) 41 }()*/ 42 43 44 // fn() 45 46 47 /* function fn(){ 48 alert(1) 49 }*/
函数的参数：形参(相当于在函数的内部定义了一个变量，必须要满足的变量命名规则)，实参(可以是任何数据类型，都可以是实参)
不定参数：arguments //类数组 （每一个函数里都存在arguments）
fn(10,2,123,456,78,456,789) function fn() { var x = 0; for(var i=0;i<arguments.length;i++){ x += arguments[i] } alert(x) }
作业购物车结算：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Author" content="FengYu">
<title>潭州教育</title>
<style>
* {
margin: 0;
padding: 0;
font-family: Microsoft YaHei, serif;
}
li {
list-style: none;
}
#box {
margin: 50px auto;
width: 997px;
height: 455px;
}
#box .head {
width: 1000px;
height: 50px;
}
#box .head li {
float: left;
width: 248px;
height: 48px;
border: 1px solid #c36;
border-right: 1px solid #900;
background: #CC3366;
text-align: center;
line-height: 50px;
color: white;
font-weight: bold;
font-size: 14px;
}
#content {
width: 998px;
border-left: 1px solid #CC3366;
border-right: 1px solid #CC3366;
overflow: hidden;
}
#content ul {
width: 1000px;
border-bottom: 1px solid #900;
overflow: hidden;
}
#content ul li {
float: left;
width: 248.75px;
height: 100px;
border-right: 1px solid #900;
text-align: center;
line-height: 100px;
position: relative;
}
#content ul li img {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
width: 90px;
}
#content ul li.num span {
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid #ddd;
line-height: 30px;
margin: 35px auto;
font-weight: bold;
}
#content ul li.num span.add, #content ul li.num span.sub {
background: #ddd;
cursor: pointer;
}
#content ul li.num span.txt {
width: 70px;
}
#foot {
margin: 10px auto;
width: 1000px;
height: 50px;
background: #c36;
}
#foot p {
width: 250px;
float: right;
text-align: center;
line-height: 50px;
color: white;
}
#foot p span {
color: #ff9;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div id="box">
<ul class='head'>
<li>商品</li>
<li>单价</li>
<li>数量</li>
<li style='border-right:1px solid #c36;'>小计</li>
</ul>
<div id="content">
<ul>
<li class='img'>
<img src="images/shop1.jpg">
</li>
<li class='danjia'>8</li>
<li class='num'>
<span class='sub'>-</span>
<span class='txt'>0</span>
<span class='add'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
<ul>
<li class='img'>
<img src="images/shop2.jpg">
</li>
<li class='danjia'>10</li>
<li class='num'>
<span class='sub'>-</span>
<span class='txt'>0</span>
<span class='add'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
<ul>
<li class='img'>
<img src="images/shop3.jpg">
</li>
<li class='danjia'>12.5</li>
<li class='num'>
<span class='sub'>-</span>
<span class='txt'>0</span>
<span class='add'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
<ul>
<li class='img'>
<img src="images/shop4.jpg">
</li>
<li class='danjia'>23</li>
<li class='num'>
<span class='sub'>-</span>
<span class='txt'>0</span>
<span class='add'>+</span>
</li>
<li class='xiaoji'>0</li>
</ul>
</div>
<div id="foot">
<p>合计费用￥ <span class='total'>0</span></p>
<p>已选中商品: <span class='numtot'>0</span> 个</p>
</div>
</div>
<script>
/*
* ++和-- 会强制进行类型转换
*
* */
var aAdd = document.getElementsByClassName('add'),
aTxt = document.getElementsByClassName('txt'),
aSub = document.getElementsByClassName('sub'),
aXj = document.getElementsByClassName('xiaoji'),
aDj = document.getElementsByClassName('danjia'),
oTotal = document.getElementsByClassName('total')[0],
oNumtot = document.getElementsByClassName('numtot')[0],
length = aAdd.length;
for(var i=0;i<length;i++){
aAdd[i].goudan = i;//获取当前加号的 序号
aSub[i].goudan = i;//获取当前减号的 序号
aAdd[i].onclick = function () {
var index = this.goudan; //当前点击的对象的序号存起来，便于跟数量的对象关联
var con = aTxt[index].innerHTML;
//con++;
aTxt[index].innerHTML = ++con;
change(index)
}
aSub[i].onclick = function () {
var goudan = this.goudan;
var con = aTxt[goudan].innerHTML;
con--;
//if(con<0)con=0;
(con<0)&&(con=0); //if只有真的时候的同功能的写法，性能优于if判断
aTxt[goudan].innerHTML = con;
change(goudan)
}
}
//把计算结果放到对应的标签里
function change(index) {
aXj[index].innerHTML = aDj[index].innerHTML * aTxt[index].innerHTML;
oNumtot.innerHTML = sum(true);
oTotal.innerHTML = sum(false)
}
//封装计算总数以及总价格的函数
function sum(bool){
var x = 0;
for(var i=0;i<length;i++)x += bool?aTxt[i].innerHTML-0:aXj[i].innerHTML*1;
return x;
}
</script>
</body>
</html>
浙公网安备 33010602011771号