01.练习1.自定义属性
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
list-style: none;
padding: 0;
margin: 0;
}
li{
width: 71px;
height: 76px;
background: url(1.jpg);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
var aLi = document.getElementsByTagName('li');
for(var i = 0;i<aLi.length;i++){
aLi[i].onOff = true;
aLi[i].onclick = function(){
if(this.onOff){
this.style.background = 'url(2.jpg) no-repeat'
}else{
this.style.background = 'url(1.jpg) no-repeat'
}
this.onOff = !this.onOff;
alert(this.onOff);
}
}
</script>
</body>
</html>
02.练习2-点击按钮切换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body{
background: #202329;
}
ul{
list-style: none;
margin: 0;
padding: 0;
}
p{
margin: 0;
}
#box1 img,#box img,#box2 img{
width: 390px;
height: 480px;
}
#box1,#box,#box2{
width: 390px;
height: 480px;
border: 10px solid #f3f3f3;
position: relative;
background: #f3f3f3 url(练习2/loader_ico.gif) no-repeat center center;
}
.bg{
width: 100%;
height: 30px;
background: #000;
opacity: 0.5;
position: absolute;
}
.top{
top: 0;
}
.bottom{
bottom: 0;
}
.text{
width: 100%;
line-height: 30px;
text-align: center;
color: #fff;
position: absolute;
}
/* 点击按钮列表 */
.list{
width: 50px;
position: absolute;
right: -70px;
top:-10px;
}
.list li{
width: 50px;
height: 50px;
background: #fff;
margin-bottom: 5px;
}
.yellow{
background: #ffa500 !important;
}
#box1{
position: absolute;
left: 500px;
top: 8px;
}
#box2{
position: absolute;
left: 8px;
top: 550px;
}
</style>
</head>
<body>
<div id="box">
<img src="" alt="">
<p class="bg top"></p>
<p class="bg bottom"></p>
<p class="text top">图片文字正在加载..</p>
<p class="text bottom">图片数量正在计算..</p>
<ul class="list"></ul>
</div>
<div id="box1">
<img src="" alt="">
<p class="bg top"></p>
<p class="bg bottom"></p>
<p class="text top">图片文字正在加载..</p>
<p class="text bottom">图片数量正在计算..</p>
<ul class="list"></ul>
</div>
<div id="box2">
<img src="" alt="">
<p class="bg top"></p>
<p class="bg bottom"></p>
<p class="text top">图片文字正在加载..</p>
<p class="text bottom">图片数量正在计算..</p>
<ul class="list"></ul>
</div>
<script>
var oBox = document.getElementById('box');
var oBox1 = document.getElementById('box1');
var oBox2 = document.getElementById('box2');
var arrImg1 = [
'练习2/1.png',
'练习2/2.png',
'练习2/3.png',
'练习2/4.png'
];
var arrText1 = ['雄鹰','精灵','美女','面具'];
var arrImg2 = [
'img/1.jpg',
'img/2.jpg',
'img/3.jpg',
'img/4.jpg'
];
var arrText2 = ['雄鹰1','精灵1','美女1','面具1'];
var arrImg3 = [
'img/pic1.jpg',
'img/pic2.jpg',
'img/pic3.jpg',
'img/pic4.jpg',
'img/pic5.jpg'
];
var arrText3 = ['雄鹰1','精灵1','美女1','面具1','面具2'];
change(oBox,arrImg1,arrText1);
change(oBox1,arrImg2,arrText2);
change(oBox2,arrImg3,arrText3);
function change(obj,arrImg,arrText){
var oImg = obj.getElementsByTagName('img')[0];
var oText = obj.getElementsByTagName('p')[2];
var oNum = obj.getElementsByTagName('p')[3];
var oUl = obj.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
var oLi = null;
var num = 0;
function setObj(){
obj.timer=setInterval(function(){
num++;
if(num>= arrImg.length){
num = 0;
}
oLi.className = "";
tab();
},1000);
}
setObj();
obj.onmouseover = function(){
clearInterval(this.timer);
}
obj.onmouseout = function(){
setObj();
}
//把li做好
for(var i = 0;i<arrImg.length;i++){
oUl.innerHTML += '<li></li>';
}
// 页面初始化
function tab(){
oImg.src = arrImg[num];
oText.innerHTML = arrText[num];
oNum.innerHTML = num+1+'/'+arrImg.length;
//确定激活的li
aLi[num].className = 'yellow';
oLi = aLi[num];
}
tab();
//给li加点击
for(var i = 0;i < aLi.length;i++){
//自定义属性,索引
aLi[i].index = i;
aLi[i].onclick = function(){
num=this.index;
oLi.className = "";
// clearClass();
tab();
}
}
//第一种同步方式,将所有li的className清空
// function clearClass(){
// for(var i = 0;i<aLi.length;i++){
// aLi[i].className = '';
// }
// }
}
</script>
</body>
</html>
03.函数传参
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
function test(){
var sum = 0;
for(var i = 0; i<arguments.length;i++){
sum += arguments[i];
}
console.log(sum);
}
test(200,1561,1561,1231);
test(200,1561,1231);
</script>
</body>
</html>
04.类型转换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
var a = '10';
console.log(Number(a)+10);
console.log(a-10);
// 纯
// NaN:not a number转换错误的提示
// Number能够将纯数值字符串进行转换成数值
// parsexxx取数值
parseInt(a);
parseFloat(a);
// isNaN()遇到数字就返回false
</script>
</body>
</html>
05作业.练习3-模拟购物车
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>
<button type="button">-</button>
<span>0</span>
<button type="button">+</button>
单价：<strong>1</strong>元
小计：<i>0</i>元
</p>
<p>
<button type="button">-</button>
<span>0</span>
<button type="button">+</button>
单价：<strong>2</strong>元
小计：<i>0</i>元
</p>
<p>
<button type="button">-</button>
<span>0</span>
<button type="button">+</button>
单价：<strong>3</strong>元
小计：<i>0</i>元
</p>
<p>
<button type="button">-</button>
<span>0</span>
<button type="button">+</button>
单价：<strong>4</strong>元
小计：<i>0</i>元
</p>
<p>
<button type="button">-</button>
<span>0</span>
<button type="button">+</button>
单价：<strong>5</strong>元
小计：<i>0</i>元
</p>
<hr>
共购买了<span id="jian">0</span>件商品，单价最贵的是：<span id="gui">0</span>元，合计：<span id="heji">0</span>元。
<script type="text/javascript">
var aP = document.getElementsByTagName('p');
for(var i = 0;i<aP.length;i++){
tab(aP[i]);
}
var a=0;
var index = 0;
var oHeji =document.getElementById('heji');
var aI= document.getElementsByTagName('i');
var aDan=document.getElementsByTagName('strong');
var oGui =document.getElementById('gui');
for(var i =0;i<aDan.length-1;i++){
if(Number(aDan[i].innerHTML)>Number(aDan[i+1].innerHTML)){
index=Number(aDan[i].innerHTML);
}else if(Number(aDan[i].innerHTML)<Number(aDan[i+1].innerHTML)){
index=Number(aDan[i+1].innerHTML);
}
}
oGui.innerHTML=index;
function tab(obj){
var oBtn1= obj.getElementsByTagName('button')[0];
var oBtn2= obj.getElementsByTagName('button')[1];
var oSpan= obj.getElementsByTagName('span')[0];
var oI= obj.getElementsByTagName('i')[0];
var oStrong= obj.getElementsByTagName('strong')[0];
var oJian =document.getElementById('jian');
oBtn2.onclick = function(){
oSpan.innerHTML = Number(oSpan.innerHTML)+1;
oI.innerHTML = oSpan.innerHTML*oStrong.innerHTML;
oJian.innerHTML=Number(oJian.innerHTML)+1;
zongji();
}
oBtn1.onclick = function(){
if(oSpan.innerHTML == '0'){
return;
}
oSpan.innerHTML = Number(oSpan.innerHTML)-1;
oI.innerHTML = oSpan.innerHTML*oStrong.innerHTML;
oJian.innerHTML=Number(oJian.innerHTML)-1;
zongji();
}
}
function zongji(){
a=Number(oHeji.innerHTML);
for(var i =0;i<aP.length;i++){
oHeji.innerHTML=Number(oHeji.innerHTML)+Number(aI[i].innerHTML);
}
oHeji.innerHTML=Number(oHeji.innerHTML)-a;
}
</script>
</body>
</html>
06.模拟QQ成员列表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
ul,h4{
list-style: none;
margin: 0;
padding: 0;
}
#list{
width: 240px;
}
#list h4{
line-height: 30px;
background: #0067c3;
text-indent: 2em;
color: #fff;
cursor: pointer;
}
#list ul li{
height: 26px;
text-indent: 2em;
border: 1px solid #d5d5d5;
cursor: pointer;
}
#list ul li:hover{
background: #C8ECE3;
}
#list ul{
display: none;
}
</style>
</head>
<body>
<ul id="list">
<li>
<h4>我的好友</h4>
<ul>
<li>王一一</li>
<li>李文化</li>
<li>高发展</li>
</ul>
</li>
<li>
<h4>我的同事</h4>
<ul>
<li>煌腾达</li>
<li>六和谐</li>
<li>形如写</li>
<li>沈从文</li>
<li>张曼玉</li>
</ul>
</li>
<li>
<h4>我的同学</h4>
<ul>
<li>郭敬明</li>
<li>医闹正</li>
<li>姜政</li>
<li>大男</li>
<li>李哲</li>
</ul>
</li>
</ul>
<script type="text/javascript">
var oList = document.getElementById('list');
var aH4 = oList.getElementsByTagName('h4');
var aUl = oList.getElementsByTagName('ul');
for(var i = 0;i<aH4.length;i++){
aH4[i].index = i;
aH4[i].onOff = true;
aH4[i].onclick = function(){
if(this.onOff){
aUl[this.index].style.display='block';
}else{
aUl[this.index].style.display='none';
}
this.onOff=!this.onOff;
}
}
</script>
</body>
</html>
07.作业练习5-反选小实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
list-style: none;
}
</style>
</head>
<body>
<ul>
<li><input type="checkbox" name="basketball"/>篮球</li>
<li><input type="checkbox" name="basketball"/>篮球</li>
<li><input type="checkbox" name="basketball"/>篮球</li>
<li><input type="checkbox" name="basketball"/>篮球</li>
<li><input type="checkbox" name="basketball"/>篮球</li>
<li><input type="checkbox" name="basketball"/>篮球</li>
<li><input type="checkbox" name="basketball"/>篮球</li>
<br>
<li><input id="onOff" type="checkbox" name="basketball"/>全选</li>
<li><button type="button">全选</button></li>
</ul>
<script type="text/javascript">
var aInp=document.getElementsByTagName('input');
var oBtn = document.getElementsByTagName('button')[0];
var onOff = document.getElementById('onOff');
oBtn.onOff= true;
onOff.onOff= true;
oBtn.onclick = function(){
// 遍历每一个li,改变每个li的checked
if(oBtn.onOff){
for(var i =0;i < aInp.length;i++){
aInp[i].checked = true;
oBtn.onOff =false;
}
}else{
for(var i =0;i < aInp.length;i++){
aInp[i].checked = false;
oBtn.onOff =true;
}
}
}
onOff.onclick = function(){
if(onOff.onOff){
for(var i =0;i < aInp.length;i++){
aInp[i].checked = true;
onOff.onOff =false;
}
}else{
for(var i =0;i < aInp.length;i++){
aInp[i].checked = false;
onOff.onOff =true;
}
}
}
</script>
</body>
</html>
08.函数返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function test(){
return 1;
}
console.log(test());
</script>
</body>
</html>
09.获取元素样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="box"></div>
<!--
if(条件){
路径不能作为条件，颜色不能作为条件
}
-->
<script type="text/javascript">
var oBox = document.getElementById('box');
// 样式是可写的,不可读
// 只能读取行间样式
// console.log(oBox.style.width);
// // 获取样式的函数
// console.log(getComputedStyle(oBox)['width']);
function getStyle(obj,attr){
return getComputedStyle(obj)[attr];
}
console.log(getStyle(oBox,'width'));
</script>
</body>
</html>
10.定时器基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>1</title>
</head>
<body>
<script type="text/javascript">
// 循环没有时间概念,瞬间完成
// 定时器:在一定时间内,发生某些事
// 1.setInterval() -- 勤劳,不阻止它,他就一直工作
// clearInterval()
var i = 0;
var timer = setInterval(function () {
if(i == 10){
clearInterval(timer);
}
document.title=i;
i++;
},1000);
</script>
</body>
</html>
11.练习6-定时切换页面背景
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;
}
</style>
</head>
<body>
<button type="button">走你</button>
<script type="text/javascript">
var oBtn = document.getElementsByTagName('button')[0];
var timer = null;
var arrImg =[
'img/1.jpg',
'img/2.jpg',
'img/3.jpg',
'img/4.jpg'
];
var num = 0;
oBtn.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
document.body.style.background = 'url('+arrImg[num%4]+')';
num++;
},1000);
}
</script>
</body>
</html>
12.第二个定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0;
background: #7B7B7B;
}
</style>
</head>
<body>
<img src="img/jujingyi.jpg" style="position: fixed;left: 0;bottom: 0;display: none;" >
<script type="text/javascript">
// setInterval()勤劳,不阻止一直工作,clearInterval()
// setTimeout()懒惰,只工作一次,clearTimeout()
var oImg = document.getElementsByTagName('img')[0];
oImg.timer1 = setTimeout(function(){
oImg.style.display = 'block';
oImg.timer2 = setTimeout(function(){
oImg.style.display = 'none';
},2000);
},2000);
</script>
</body>
</html>
