简体   繁体   English

如何将我的JavaScript合并到网页中?

[英]How can I incorporate my javascript with my webpage?

Here is my script.js: 这是我的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+'%');
}

and my index.html: 和我的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>

I've looked everywhere, and I can't find a resource that tells me how to insert the Javascript into the webpage. 我到处都看过了,找不到任何资源可以告诉我如何将Javascript插入网页。 Any help would be greatly appreciated. 任何帮助将不胜感激。 I'm not much of a front-end developer. 我不是一个前端开发人员。

Add the following at the end of your body tag: 在body标签末尾添加以下内容:

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

Unless your index.html and your script.js are in the same directory, your current script tag will not work. 除非您的index.html和script.js位于同一目录中,否则您当前的脚本标记将不起作用。

只需在外部执行,并确保将其放在页面的末尾即可获得最佳性能。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM