如何将我的javascript与我的网页合并?

时间:2014-07-17 02:49:42

标签: javascript jquery html css audio

这是我的script.js:

    var audio = new Audio('http://shrek.unideb.hu/~osnure/z/Gallows/Orchestra%20of%20Wolves/Gallows%20-%20In%20The%20Belly%20Of%20A%20Shark.mp3');
var timer, showCurrent=true;

$('#play').click(function(){
  if (audio.paused){
    audio.play();
    $('#play').html('ll');
    timer=setInterval(function(){update();},100);
  }else{
    audio.pause();
    $('#play').html('►');
    clearInterval(timer);
  }
});

$('#speaker').click(function(){
  if (audio.muted){
    audio.muted=false;
  }else{
    audio.muted=true;
  }
});

$('#total').click(function(e) {
  var x = $(this).offset();
  x=e.clientX - x.left;
  x=x/210;
  audio.currentTime=audio.duration*x;
  update();
});

$('#time').click(function(e) {
  if(showCurrent){
    showCurrent=false;
  }else{
    showCurrent=true;
  }
  update();
});

function update(){
  var d=0;
  var ct=0;
  d=audio.duration;
  ct=audio.currentTime;
  if(showCurrent){
    var min=Math.floor(ct/60);
    //if(min<10){min='0'+min}
    var sec=Math.floor(ct%60);
    if(sec<10){sec='0'+sec}
    $('#time').html(min+':'+sec);
  }else{
    var min=Math.floor((d-ct)/60);
    //if(min<10){min='0'+min}
    var sec=Math.floor((d-ct)%60);
    if(sec<10){sec='0'+sec}
    $('#time').html('-'+min+':'+sec);
  }
  $('#progress').css('width',ct/d*100+'%');
}

和我的index.html:

<html>
<head>
    <script>

    </script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>  
<body>
<div class="center">
  <span id="album"><img src="http://media.smashingmagazine.com/images/music-cd-covers/gallows_belly_of_shark.jpg" /></span>
  <span id="content">
    <div class="row">DAN MUMFORD - IN THE BELLY OF A SHARK</div>
    <div class="row" id="lift">
      <span id="play">&#9658;</span>
      <span id="total">
        <span id="progress"></span>
      </span>
      <span id="time">01:24</span>
    </div>
    <div class="row"><img id="speaker" src="http://accurate-voting.org/wp-content/uploads/2010/03/200px-Speaker_Icon_gray-sm.png" /></div>
  </span>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

我到处寻找,我找不到告诉我如何将Javascript插入网页的资源。任何帮助将不胜感激。我不是一个前端开发人员。

2 个答案:

答案 0 :(得分:0)

在正文标记的末尾添加以下内容:

<script src="pathToMy/javascriptFile/script.js"></script>

除非您的index.html和您的script.js位于同一目录中,否则您当前的脚本标记将无效。

答案 1 :(得分:0)

简单地做到外部。并确保将其放在页面的末尾以获得最佳性能。