案例1：导航条
Css部分:
*{
list-style: none;
margin:0;
padding:0;
color:white;
}
.nav{
width:1000px;
margin:0 auto;
background:red;
}
ul li a{
text-decoration: none;
}
ul{
overflow: hidden;
}
ul li{
float:left;
width:100px;
text-align: center;
line-height:40px;
}
Body部分：
首页
公司介绍
人员招聘
Js部分：
var li=document.getElementsByTagName('li');
console.log(li);
for(var i=0;i
li[i].onmouseover=function(){
this.style.background='cyan';
this.firstElementChild.style.color='purple';
}
li[i].onmouseout=function(){
this.style.background='red';
this.firstElementChild.style.color='white';
}
}
案例2:
*{
margin:0;
padding:0;
}
#d1,#d2,#d3{
float:left;
}
#d1,#d3,#d2{
height:100px;
line-height:100px;
}
#d1,#d3{
background:yellow;
}
#d2{
background:red;
}
Body部分
LEFT
<<
RIGHT
Js部分
var d1=document.getElementById('d1');
var d2=document.getElementById('d2');
d2.onclick=function(){
if(d2.innerHTML=='<<'){
d1.style.display='none';
d2.innerHTML='>>';
}else{
d1.style.display='block';
d2.innerHTML='<<';
}
}
案例3：
Css部分
*{
padding;0;
margin:0;
list-style: none;
}
table tr td{
width:90px;
text-align: center;
line-height:30px;
border:1px solid black;
}
Body部分：
商品名称
单价
数量
小计
iphone7
￥5999
+
1
-
￥5999
iphone7
￥5999
+
1
-
￥5999
iphone7
￥5999
+
1
-
￥5999
小计
￥17997
Js部分：
//实参
function calc(btn){
var span=btn.parentElement.querySelector('span');
var n=span.innerHTML;
if(btn.innerHTML=='+'){
n++;
}else if(n>1){
n--;
}else{
n=1;
}
span.innerHTML=n;
var dj=btn.parentElement.previousElementSibling.innerHTML.slice(1);
var subtotal=dj*n; btn.parentElement.nextElementSibling.innerHTML='￥'+subtotal.toFixed(2);
var m1=document.getElementsByClassName('m1');
for(var i=0,zong=0;i
zong+=parseFloat(m1[i].innerHTML.slice(1));
}
document.getElementsByClassName('mz')[0].innerHTML='￥'+zong.toFixed(2);
}
案例4：
Css部分：
*{
padding:0;
margin:0;
}
.b{
width:600px;
height:600px;
border:1px solid black;
border-radius:10px;
margin:0 auto;
}
.top{
overflow: hidden;
margin-top:5px;
}
.top img{
float:left;
width:144px;
height:144px;
padding-left:5px;
}
.bottom{
margin:0 auto;
width:500px;
margin-top:15px;
}
.bottom img{
width:500px;
height:400px;
}
Js部分：
var img=document.querySelectorAll('.b>.top>a>img');
var imgs=document.querySelector('.b>.bottom>img');
for(var i=0;i
img[i].onclick=function(){
imgs.src=this.src;
}
}
案例5：
Body部分
咏鹅
鹅，鹅，鹅
曲项向天歌
白毛浮绿水
红掌拨清波
JS部分
//获取div和body
var div=document.getElementsByClassName('color')[0];
var body=document.body;
//当鼠标经过div时div中标签的颜色变为红色，body背景颜色变为蓝色
div.onmouseover=function(){
this.style.color='red';
body.style.background='blue';
}
//当鼠标经过div时div中标签的颜色变为绿色，body背景颜色变为黄色
div.onmouseout=function(){
this.style.color='green';
body.style.background='yellow';
}
案例6：
Css部分：
*{
padding:0;
margin:0;
list-style: none;
}
.jr{
overflow: hidden;
margin:0 auto;
width:240px;
margin-top:20px;
}
.jr div{
width:50px;
height:70px;
background:black;
float:left;
margin-right:10px;
margin-bottom:10px;
}
.jr div p{
text-align: center;
color:#fff;
padding-top:20px;
font-weight:800;
}
.text{
width:240px;
margin:0 auto;
}
.jr div span{
display: none;
}
Body部分：
1月
JAM
1月1日:元旦节
2月
FEB
2月2日:世界湿地日,2月14日:情人节
3月
MAR
3月3日:全国爱耳日,3月5日:青年志愿者服务日,3月8日:妇女节
4月
APR
4月1日:愚人节,4月5日:清明节,4月22日:世界地球日
5月
MAY
5月1日:劳动节,5月4日:中国青年节
6月
JUN
6月1日:儿童节,6月5日:世界环境日
7月
JUL
7月1日:建党节,7月7日:中国人民抗日战争纪念日
8月
AVG
8月1日:建军节,8月12:国际青年节
9月
SET
9月8日:国际扫盲日,9月10日:教师节
10月
OCT
10月1日:国庆节、国际音乐日、国际老年人日
11月
NOV
11月8日:中国记者节,11月9日:消防宣传日
12月
DEC
12月3日:世界残疾人日,12月4日:全国法制宣传日
JS部分：
var div=document.querySelectorAll('.jr>div');
var p=document.querySelectorAll('.jr>div>p');
var span=document.querySelectorAll('.jr>div>span');
var p1=document.getElementsByClassName('p1')[0];
for(var i=0;i
div[i].onmouseover=function(){
this.style.background='pink';
this.firstElementChild.style.color='red';
p1.innerHTML=this.lastElementChild.innerHTML;
}
div[i].onmouseout=function(){
this.style.background='black';
this.firstElementChild.style.color='white';
p1.innerHTML=null;
}
}
网友评论