js控制的动态音乐页面
自学半个多月前端，尝试第一次独立完成一个简单的页面布局，虽然看起来很low，但是好好加油就可以哒，本页面主要是想实现js控制动态展示效果，但是由于目前能力有限，所以不是很完美，如果感兴趣，欢迎提出见解。
下面将效果图与源码全部附上--------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0px;
padding: 0px;
background-color: rgba(90,150,204,0.1);
}
.box{
width: 1200px;
height: 900px;
margin: 50px auto;
background-color: thistle;
border: 2px solid lightslategrey;
}
.hd .curr{
background-color: skyblue;
}
.hd{
height: 70px;
}
.hd span{
width: 196px;
display: inline-block;
text-align: center;
line-height: 70px;
cursor: pointer;
font-size: 18px;
}
.bd{
height: 700px;
}
.bd .bd1{
margin: 20px 0;
color: darkcyan;
}
.bd .bd2{
width: 250px;
height: 600px;
background-color: cornsilk;
margin: 50px 0 ;
float: left;
}
#btu1{
width: 120px;
height: 30px;
margin: 20px 60px;
background-color: #cccccc;
color: darkcyan;
cursor: pointer;
}
.bd2 .bd21{
background-color: thistle;
}
.bd2 .bd21 ul{
list-style: none;
font-size: 15px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
.bd .bd3{
width: 680px;
height:600px;
float: left;
margin: 50px 20px;
background-color: cornsilk;
}
.bd .bd31{
width: 680px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 20px;
color: darkcyan;
margin: 10px auto;
}
.bd .bd32 ul{
list-style: none;
}
.bd .bd32 ul li{
display: inline-block;
margin: 0 30px;
}
.bd33 {
margin: 10px 116px;
}
#p1{
font-size: 15px;
text-align: center;
line-height: 30px;
color: darkcyan;
}
table{
width: 600px;
border-collapse: collapse;
margin: 0 auto;
cursor: pointer;
}
th{
background-color:lightsteelblue ;
font-size: 15px ;
color: darkcyan;
}
th, td{
border: 1px dotted teal;
padding: 4px;
text-align: center;
border-left:none ;
}
.bd .bd4{
width: 228px;
height: 600px;
float: left;
margin: 50px 0;
}
.bd41 .bda{
background-color: darkseagreen;
}
.bd4 .bd41 span{
display: inline-block;
width: 110px;
height: 50px;
line-height: 50px;
text-align: center;
cursor: pointer;
}
.bd .bd42 ul{
list-style: none;
font-size: 15px;
line-height: 30px;
text-align: center;
cursor: pointer;
margin: 10px 0;
}
.ft1{
width: 1200px;
height: 50px;
margin: 20px auto;
}
.ft1 p{
text-align: center;
font-size: 20px;
line-height: 50px;
}
</style>
</head>
<body>
<div class="box" id="box">
<!--头部开始-->
<div class="hd">
<span class="curr">今日小心情</span>
<span>秘密花园</span>
<span>回忆录</span>
<span>海风吹对</span>
<span>一袋星光</span>
<span>备忘录</span>
</div>
<!--中间部分开始-->
<div class="bd">
<div class="bd1"><hr></div>
<div class="bd2">
<input type="button" value="点击" id="btu1">
<div class="bd21">
<ul>
<li>与你环环相扣</li>
<li>千千阙歌</li>
<li>世间美好与</li>
<li>全部都是你</li>
<li>即刻出发</li>
<li>阴天</li>
<li>黑夜问白天</li>
<li>这一生关于你的风景</li>
<li>你要的全拿走</li>
<li>爱转角</li>
<li>至此流年隔天涯</li>
<li>与你环环相扣</li>
<li>千千阙歌</li>
<li>世间美好与</li>
<li>全部都是你</li>
<li>即刻出发</li>
</ul>
</div>
</div>
<div class="bd3">
<div class="bd31">
<p>花田半亩心</p>
</div>
<div class="bd32">
<ul id="ima">
<li><a href="image/8.jpg" title="收集希望与春光" width="200px" height="200px">
<img src="image/8.jpg" width="100px" alt="1"></a>
</li>
<li><a href="image/1.jpg" title="推开世界的门" width="200px" height="200px">
<img src="image/1.jpg" width="100px" alt="1"></a>
</li>
<li><a href="image/6.jpg" title="气候会变" width="200px" height="200px">
<img src="image/6.jpg" width="100px" alt="1"></a>
</li>
<li><a href="image/9.jpg" title="遥望天体" width="200px" height="200px">
<img src="image/9.jpg" width="100px" alt="1"></a>
</li>
</ul>
<div class="bd33">
<img id="ims" src="image/11.jpg" alt="" width="450px" height="250px">
<p id="p1">聆听心语，感悟生活</p>
</div>
</div>
<div class="bd34">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll">
</th>
<th>曲风</th>
<th>歌手</th>
<th>相关歌曲</th>
<th>简介</th>
</tr>
</thead>
<tbody id="tb1">
<tr>
<td>
<input type="checkbox">
</td>
<td>我和你</td>
<td>刘欢</td>
<td>北京欢迎你</td>
<td>中国歌手</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>和你一样</td>
<td>李宇春</td>
<td>你最勇敢</td>
<td>中国女歌手</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>流星雨</td>
<td>张翰</td>
<td>爱的华尔兹</td>
<td>流星花园</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="bd4">
<div class="bd41">
<span class="bda">飙升榜</span>
<span>新歌榜</span>
</div>
<div class="bd42">
<ul>
<li class="current">
<ul>
<li>好想爱这个世界</li>
<li>达拉崩吧</li>
<li>微微</li>
<li>相思</li>
<li>雪花落下</li>
<li>阴天</li>
<li>不懂事</li>
<li>平凡天使</li>
<li><img src="image/12.jpg" width="110px" height="110px"> </li>
<li>新世界</li>
<li>爱转角</li>
<li>有可能的夜晚</li>
<li>大艺术家</li>
<li>不要怕</li>
<li>当遇见你</li>
</ul>
</li>
<!--<li>
<ul>
<li>与你环环相扣</li>
<li>千千阙歌</li>
<li>世间美好与</li>
<li>全部都是你</li>
<li>即刻出发</li>
<li>阴天</li>
<li>黑夜问白天</li>
<li>这一生关于你的风景</li>
<li>你要的全拿走</li>
<li>爱转角</li>
<li>至此流年隔天涯</li>
<li>与你环环相扣</li>
<li>千千阙歌</li>
<li>世间美好与</li>
<li>全部都是你</li>
<li>即刻出发</li>
</ul>
</li>-->
</ul>
</div>
</div>
</div>
<div class="ft">
<div class="ft1">
<p>2020.4.8------MAKE</p>
</div>
</div>
</div>
<script src="common.js"></script>
<script>
//获取最外面的div
var box=my$("box");
//获取里面的第一个div
var hd=box.getElementsByTagName("div")[0];
//获取里面的第二个div
var bd=box.getElementsByTagName("div")[1];//---------
//获取bd里面的第二个div
var bd2=bd.getElementsByTagName("div")[1];//---------按钮
//获取bd里面的第三个div
var bd3=bd.getElementsByTagName("div")[2];//===================bd3
var bd4=bd.getElementsByTagName("div")[3];
//获取bd2里面的第一个div
var bd21=bd2.getElementsByTagName("div")[0];//----------ul列表
//获取bd3里面的第二个div
var bd32=bd3.getElementsByTagName("div")[1];
var bd34=bd3.getElementsByTagName("div")[2];
var bd41=bd4.getElementsByTagName("div")[0];
var bd42=bd4.getElementsByTagName("div")[1];
//获取所有的span标签
var spans=hd.getElementsByTagName("span");
//获取bd21里面的所有li标签
var list=bd21.getElementsByTagName("li");
//获取bd32里面的imgbq
var aObjs=my$("ima").getElementsByTagName("a");
//设置导航栏
for(var i=0;i<spans.length;i++){
spans[i].οnclick=function () {
//将所有的span类样式全部移除
for(var j=0;j<spans.length;j++){
spans[j].removeAttribute("class");
}
//当前被点击的span应用样式
this.className="curr";
}
}
var spans1=bd41.getElementsByTagName("span");
for(var i=0;i<spans1.length;i++){
spans1[i].οnclick=function () {
for(var j=0;j<spans1.length;j++){
spans1[j].removeAttribute("class");
}
this.className="bda";
}
}
//设置bd里面的ul列表显示
for(var i=0;i<list.length;i++){
list[i].οnmοuseοver=function () {
this.style.backgroundColor="darkseagreen";
}
list[i].οnmοuseοut=function () {
this.style.backgroundColor="";
}
}
//相册
for(var i=0;i<aObjs.length;i++){
aObjs[i].οnclick=function () {
my$("ims").src=this.href;
my$("p1").innerText=this.title;
return false;
}
}
//点击thread里面的复选框，然后控制其子复选框都选中或者选不中；
var cObj=my$("j_cbAll");
var cObj1=my$("tb1").getElementsByTagName("input");
cObj.οnclick=function () {
for (var i=0;i<cObj1.length;i++){
cObj1[i].checked=this.checked;
}
}
//点击tbody里面的复选框，控制第一个复选框的状态
for(var i=0;i<cObj1.length;i++){
cObj1[i].οnclick=function () {
var flag=true;
for(var j=0;j<cObj1.length;j++){
if(!cObj1[j].checked){
flag=false;
break;
}
}
cObj.checked=flag;
}
}
</script>
</body>
</html>如果有不对的地方，麻烦留言告知，谢谢！
1693
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
