<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>滑块效果slider</title>
<style>
.line{
margin:50px;
position:relative;
height:6px;
line-height:6px;
width:202px;
border:1px solid #ccc;
background-color:#FFFF66;
}
.btn{
position:absolute;
height:10px;
line-height:1px;
overflow:hidden;
width:6px;
margin-left:-3px;
top:-2px;
background-color:#666;
}
</style>
<script>
var m_MaxCount=200;
window.onload = function(){
var b = document.getElementById("btn"),
l = document.getElementById("line"),
s = document.getElementById("show"),
bl = false;
function exe(e){
var e = e||event,
bx = e.clientX-l.offsetLeft-2; //据说测试有2像素的误差,所以去掉2像素。
if(bx<0){
bx = 0;
}else if(bx>m_MaxCount){
bx = m_MaxCount;
}
b.style.left = bx + "px";
pr = Math.round(bx/l.clientWidth*100);
s.innerHTML = pr + "%" + " | " + (Math.round(pr/100*20)+5) + "分钟";
}
l.onclick = function(e){
if(!bl){exe(e)}
}
b.onmousedown = function(){
bl = true;
}
document.onmousemove = function(e){
if(bl){exe(e)}
}
document.onmouseup = function(){
bl = false;
}
}window.onerror = function(e){
alert(e);
}function chanagepos(){
var npos= document.getElementById("txtpos").value;
var b = document.getElementById("btn");
b.style.left = npos + "px";
}function addpos(){
var npos= document.getElementById("txtpos").value;
var b = document.getElementById("btn");
var x= b.style.left;
if( x != ""){
x = x.substr(0,x.lastIndexOf("px"));
x = parseInt(x,10)+ parseInt(npos,10);
}else{
x= npos;
}
alert(x);
b.style.left = x + "px";
}
</script>
</head><body>
<div class="line" id="line">
<div class="btn" id="btn"></div>
</div>
<div id="show"></div>
<input type="text" id="txtpos" value="5" style="width:30;"/>
<button id="setvalue" onclick="addpos()">setpos</button>
</body>
</html>
如题,上面的代码怎么写到一个js文件里,然后在HTML里调用这个js文件.
这样看起来就更加清晰一些,
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>滑块效果slider</title>
<style>
.line{
margin:50px;
position:relative;
height:6px;
line-height:6px;
width:202px;
border:1px solid #ccc;
background-color:#FFFF66;
}
.btn{
position:absolute;
height:10px;
line-height:1px;
overflow:hidden;
width:6px;
margin-left:-3px;
top:-2px;
background-color:#666;
}
</style>
<script>
var m_MaxCount=200;
window.onload = function(){
var b = document.getElementById("btn"),
l = document.getElementById("line"),
s = document.getElementById("show"),
bl = false;
function exe(e){
var e = e||event,
bx = e.clientX-l.offsetLeft-2; //据说测试有2像素的误差,所以去掉2像素。
if(bx<0){
bx = 0;
}else if(bx>m_MaxCount){
bx = m_MaxCount;
}
b.style.left = bx + "px";
pr = Math.round(bx/l.clientWidth*100);
s.innerHTML = pr + "%" + " | " + (Math.round(pr/100*20)+5) + "分钟";
}
l.onclick = function(e){
if(!bl){exe(e)}
}
b.onmousedown = function(){
bl = true;
}
document.onmousemove = function(e){
if(bl){exe(e)}
}
document.onmouseup = function(){
bl = false;
}
}window.onerror = function(e){
alert(e);
}function chanagepos(){
var npos= document.getElementById("txtpos").value;
var b = document.getElementById("btn");
b.style.left = npos + "px";
}function addpos(){
var npos= document.getElementById("txtpos").value;
var b = document.getElementById("btn");
var x= b.style.left;
if( x != ""){
x = x.substr(0,x.lastIndexOf("px"));
x = parseInt(x,10)+ parseInt(npos,10);
}else{
x= npos;
}
alert(x);
b.style.left = x + "px";
}
</script>
</head><body>
<div class="line" id="line">
<div class="btn" id="btn"></div>
</div>
<div id="show"></div>
<input type="text" id="txtpos" value="5" style="width:30;"/>
<button id="setvalue" onclick="addpos()">setpos</button>
</body>
</html>
如题,上面的代码怎么写到一个js文件里,然后在HTML里调用这个js文件.
这样看起来就更加清晰一些,
<script type="text/javascript" src="http://xxx.xxx.com/路径/your.js"></script>
调用.
<html>
<head>
<title></title>
<script src="你的文件路径" type="text/javascript"></script>
</head>
<body>
</body>
</html>
新建一个记事本文件,把js 代码拷贝到记事本,然后修改扩展名为 .js
然后在head标签中引用这个js文件
<head>
<script src="你的文件路径" type="text/javascript"></script>
</head>
造成那个拖动条的click and onmousemove 无效了。不过现在解决了。