オリジナルJavaScriptの進捗状況を実現します。
JavaScriptプログレスバーの具体的なコードを実現します。
進捗バーの紹介
JavaScriptを使ってプログレスバー機能を実現します。
原理:イベントをマウスで移動し、マウスの移動距離を取得します。
ステップ:
(1)html中divレイアウト
(2)css様式編纂
(3)JavaScript特効編
htmlコード
全体コード
進捗バーの紹介
JavaScriptを使ってプログレスバー機能を実現します。
原理:イベントをマウスで移動し、マウスの移動距離を取得します。
ステップ:
(1)html中divレイアウト
(2)css様式編纂
(3)JavaScript特効編
htmlコード
<body>
<!-- -->
<div id="box">
<!-- -->
<div id="progress">
<!-- -->
<div id="progress_head"></div>
<!-- -->
<span id="span"></span>
<div>
<!-- -->
<div id="percentage">0%</div>
</div>
</body>
cssスタイル
<style>
/* , */
body{
margin:0;
padding:0;
}
#box{
position:relative;
width:1000px;
height:30px;
margin:100px auto;
}
#progress{
position:relative;
width:900px;
height:30px;
background:#999999;
border-radius:8px;
margin:0 auto;
}
#progress_head{
width:0px;
height:100%;
border-top-left-radius:8px;
border-bottom-left-radius:8px;
background:#9933CC;
}
span{
position:absolute;
width:20px;
height:38px;
background:#9933CC;
top:-4px;
left:0px;
cursor:pointer;
}
#percentage{
position:absolute;
line-height:30px;
text-align:center;
right:-44px;
top:0;
}
</style>
JavaScriptコード
<script>
//js
var oProgress=document.getElementById('progress');
var oProgress_head=document.getElementById('progress_head');
var oSpan=document.getElementById('span');
var oPercentage=document.getElementById('percentage')
//
oSpan.onmousedown=function(event){
var event=event || window.event;
var x=event.clientX-oSpan.offsetLeft;
document.onmousemove=function(){
var event=event || window.event;
var wX=event.clientX-x;
if(wX<0)
{
wX=0;
}else if(wX>=oProgress.offsetWidth-20)
{
wX=oProgress.offsetWidth - 20;
}
oProgress_head.style.width=wX+'px';
oSpan.style.left=wX+'px';
oPercentage.innerHTML=parseInt(wX/(oProgress.offsetWidth-20)*100)+'%';
return false;
};
document.onmouseup=function(){
document.onmousemove=null;
};
};
</script>
効果図全体コード
<!DOCTYPE>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> </title>
<style>
/* , */
body{
margin:0;
padding:0;
}
#box{
position:relative;
width:1000px;
height:30px;
margin:100px auto;
}
#progress{
position:relative;
width:900px;
height:30px;
background:#999999;
border-radius:8px;
margin:0 auto;
}
#progress_head{
width:0px;
height:100%;
border-top-left-radius:8px;
border-bottom-left-radius:8px;
background:#9933CC;
}
span{
position:absolute;
width:20px;
height:38px;
background:#9933CC;
top:-4px;
left:0px;
cursor:pointer;
}
#percentage{
position:absolute;
line-height:30px;
text-align:center;
right:-44px;
top:0;
}
</style>
</head>
<body>
<!-- -->
<div id="box">
<!-- -->
<div id="progress">
<!-- -->
<div id="progress_head"></div>
<!-- -->
<span id="span"></span>
<div>
<!-- -->
<div id="percentage">0%</div>
</div>
</body>
</html>
<script>
//js
var oProgress=document.getElementById('progress');
var oProgress_head=document.getElementById('progress_head');
var oSpan=document.getElementById('span');
var oPercentage=document.getElementById('percentage')
//
oSpan.onmousedown=function(event){
var event=event || window.event;
var x=event.clientX-oSpan.offsetLeft;
document.onmousemove=function(){
var event=event || window.event;
var wX=event.clientX-x;
if(wX<0)
{
wX=0;
}else if(wX>=oProgress.offsetWidth-20)
{
wX=oProgress.offsetWidth - 20;
}
oProgress_head.style.width=wX+'px';
oSpan.style.left=wX+'px';
oPercentage.innerHTML=parseInt(wX/(oProgress.offsetWidth-20)*100)+'%';
return false;
};
document.onmouseup=function(){
document.onmousemove=null;
};
};
</script>
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。