第13次作业-----进度条

最新推荐文章于 2022-09-12 16:52:04 发布

酷扬

最新推荐文章于 2022-09-12 16:52:04 发布

阅读量169

点赞数

本文链接：https://blog.csdn.net/aa8869138/article/details/68489959

版权

html 同时被 3 个专栏收录

39 篇文章 0 订阅

订阅专栏

css

26 篇文章 0 订阅

订阅专栏

html css

25 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">

<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
}
.all{
width: 420px;
height: 30px;
margin:100px auto;
border: 1px solid #ccc;
position:relative;

}
.move{
width: 20px;
height: 30px;
background-color: red;
position: absolute;
left:0px;

}

.right{
width: 0px;
height: 30px;
background-color: #000;


}
.left{
width: 400px;
height: 30px;

}
</style>
</head>
<body>
<div class="all">
<div class="move"></div>
<div class="right"> </div>
<div class="left"></div>
</div>
<script type="text/javascript">
function $div(i){
return document.getElementsByTagName("div")[i];
}
var x,y
$div(0).οnmοusedοwn= function (){
x=y;
$div(0).οnmοusemοve=function (event){
var event=event || window.event;


x = event.clientX-this.offsetLeft;

if(x>=400){
x=400;
}
console.log(x);
$div(1).style.left=x+"px";
$div(2).style.width=x+"px";
$div(3).style.width=400-x+"px";
y=x;

}
document.οnmοuseup= new Function("$div(0).οnmοusemοve=null") ;
}

</script>
</body>
</html>