📄 9-8.htm
字号:
<html>
<head>
<title>§9.8 模仿进度条效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
<!--
#bar, #barbackground{
position:absolute;
left:0;
top:0;
background-color:black;
}
#barbackground{
background-color:#CCCCCC;
}
-->
</style>
<script language="JavaScript">
/*
Dynamic Progress Bar- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/
//1) Set the duration for the progress bar to complete loading (in seconds)
var duration=5
//2) Set post action to carry out inside function below:
function postaction(){
//Example action could be to navigate to a URL, like following:
//window.location="http://www.coolbi.com"
}
///Done Editing/////////////
var clipright=0
var widthIE=0
function initializebar()
{
if (document.all)
{
baranchor.style.visibility="visible"
widthIE=bar.style.pixelWidth
startIE=setInterval("increaseIE()",50)
}
}
function increaseIE()
{
bar.style.clip="rect(0 "+clipright+" auto 0)"
window.status="Loading..."
if (clipright<widthIE)
clipright=clipright+(widthIE/(duration*20))
else
{
window.status=''
clearInterval(startIE)
postaction()
}
}
window.onload=initializebar
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<script language="JavaScript">
if (document.all)
{
document.write('<div id="baranchor" style="position:relative;width:200px;height:20px;visibility:hidden;">')
document.write('<div id="barbackground" style="width:200px;height:20px;z-index:9"></div>')
document.write('<div id="bar" style="width:200px;height:20px;z-index:10"></div>')
document.write('</div>')
}
</script>
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -