色卡进度条
Posted 所爱隔山隔海
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了色卡进度条相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding: 0;
}
.xw{
width: 100px;
height: 80px;
border: 1px solid black;
float: left;
text-align: center;
line-height: 80px;
}
.xw:hover{
cursor: pointer;
}
.xw1{
background-color:blue;
}
.xw2{
background-color:greenyellow;
}
.xw3{
background-color:red;
}
.xw4{
background-color:yellow;
}
#nr1{
width: 400px;
height: 400px;
border: 1px solid red;
background-color: blue;
}
#jd{
width:500px;
height: 20px;
border: 1px solid black;
}
#nei{
width:0px;
height: 20px;
background-color: blue;
}
</style>
</head>
<body>
<div id="nr">
<div class=‘xw xw1‘ onclick="gb(‘blue‘)">国内新闻</div>
<div class=‘xw xw2‘ onclick="gb(‘greenyellow‘)">国际新闻</div>
<div class=‘xw xw3‘ onclick="gb(‘red‘)">体育新闻</div>
<div class=‘xw xw4‘ onclick="gb(‘yellow‘)">娱乐新闻</div>
</div>
<div id="nr1"></div>
<br /><br /><br /><br />
<div id="jd">
<div id="nei">
</div>
</div>
<br /><br /><br /><br />
<br /><br /><br /><br />
</body>
</html>
<script type="text/javascript">
window.onload=function(){//页面加载完成才执行里面的代码
jdt();
}
function gb(a) {
var b=document.getElementById("nr1");
b.style.backgroundColor=a;
}
function jdt() {
var c=document.getElementById("nei");
c.style.transition="3s";
c.style.width="500px";
}
</script>
以上是关于色卡进度条的主要内容，如果未能解决你的问题，请参考以下文章
当片段视图加载是异步任务的一部分时，如何在片段加载之前显示进度条？
自定义对话框片段内的进度条 - 如何从 AsyncTask 传递进度？
在recyclerview片段Reandroid中屏幕旋转后进度条不显示