<!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文件.
这样看起来就更加清晰一些,

解决方案 »

  1.   

    把JS函数写到一个 .js文件中,放到指定路径上,然后,在网页文件中用
    <script type="text/javascript" src="http://xxx.xxx.com/路径/your.js"></script>
    调用.
      

  2.   

    把<script></script>之间的放在一个.js文件里,引用就可以了
    <html>
    <head>
        <title></title>
        <script src="你的文件路径" type="text/javascript"></script>
    </head>
    <body>
    </body>
    </html>
      

  3.   

    新建一个记事本文件,把js 代码拷贝到记事本,然后修改扩展名为 .js
      

  4.   

    如楼上所说。
    新建一个记事本文件,把js 代码拷贝到记事本,然后修改扩展名为 .js
    然后在head标签中引用这个js文件
    <head>
      <script src="你的文件路径" type="text/javascript"></script>
    </head>
      

  5.   

    可能我没有表达清楚,我的问题是:我将上面的javascrtip写到一个JS里面,然后我调用了两个.js的文件,
    造成那个拖动条的click and onmousemove 无效了。不过现在解决了。