web前端
js控制的动态音乐页面
自学半个多月前端，尝试第一次独立完成一个简单的页面布局，虽然看起来很low，但是好好加油就可以哒，本页面主要是想实现js控制动态展示效果，但是由于目前能力有限，所以不是很完美，如果感兴趣，欢迎提出见解。
下面将效果图与源码全部附上--------
Title
*{
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;
}
今日小心情
秘密花园
回忆录
海风吹对
一袋星光
备忘录
- 与你环环相扣
- 千千阙歌
- 世间美好与
- 全部都是你
- 即刻出发
- 阴天
- 黑夜问白天
- 这一生关于你的风景
- 你要的全拿走
- 爱转角
- 至此流年隔天涯
- 与你环环相扣
- 千千阙歌
- 世间美好与
- 全部都是你
- 即刻出发
花田半亩心
-
-
-
-
聆听心语，感悟生活
曲风
歌手
相关歌曲
简介
我和你
刘欢
北京欢迎你
中国歌手
和你一样
李宇春
你最勇敢
中国女歌手
流星雨
张翰
爱的华尔兹
流星花园
飙升榜
新歌榜
-
- 好想爱这个世界
- 达拉崩吧
- 微微
- 相思
- 雪花落下
- 阴天
- 不懂事
- 平凡天使
- 新世界
- 爱转角
- 有可能的夜晚
- 大艺术家
- 不要怕
- 当遇见你
<!---
- 与你环环相扣
- 千千阙歌
- 世间美好与
- 全部都是你
- 即刻出发
- 阴天
- 黑夜问白天
- 这一生关于你的风景
- 你要的全拿走
- 爱转角
- 至此流年隔天涯
- 与你环环相扣
- 千千阙歌
- 世间美好与
- 全部都是你
- 即刻出发
-->
2020.4.8------MAKE
//获取最外面的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;
}
}
如果有不对的地方，麻烦留言告知，谢谢！
作者：一袋星光
