同时运行javascript onload

时间:2014-07-24 22:06:21

标签: javascript html animation onload ascii-art

我想要同时运行两个javascripts,以创建分层动画。 两者基本上是相同的脚本,但具有不同的设置

我使用<body onload="animate(); ch();">加载每个函数。

分开,两个循环都可以正常工作。当我尝试同时运行两者时,文档中的第一个运行正常,但第二个不会运行。

我是jsfiddle的新手,但jsfiddle关于使用document.write,我不知道如何在jsfiddle中包含多个javascript。

这两个脚本都是循环,并且应该无限循环。 另外,这是每个应该是什么样子: http://nanocluster.umeche.maine.edu/scope/

更新:HTML来源:

http://nanocluster.umeche.maine.edu/scope/saw.html

有人可以指出我如何让​​两个脚本同时循环播放吗?

    <!DOCTYPE html><html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" href="http://www.hackmaine.org/favicon.ico">
<link rel="stylesheet" type="text/css" href="main.css">
<title>Epic Lulz</title>
<style> p.ex {color:rgb(0,0,0);}</style>
</head>
<body onload="animate(); ch();">
    <script type="text/javascript" src="animate.js"></script>
    <script type="text/javascript" src="ch.js"></script>
<div id="background">
<pre>
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
|         |         |         |         |         |         |         |         |         |         |
|         |         |         |         |         |         |         |         |         |         |
|         |         |         |         |         |         |         |         |         |         |
|         |         |         |         |         |         |         |         |         |         |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
|         |         |         |         |         |         |         |         |         |         |
|         |         |         |         |         |         |         |         |         |         |
|         |         |         |         |         |         |         |         |         |         |
|         |         |         |         |         |         |         |         |         |         |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
|         |         |         |         |         |         |         |         |         |         |
|         |         |         |         |         |         |         |         |         |         |
|         |         |         |         |         |         |         |         |         |         |
|         |         |         |         |         |         |         |         |         |         |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
|         |         |         |         |         |         |         |         |         |         |
|         |         |         |         |         |         |         |         |         |         |
|         |         |         |         |         |         |         |         |         |         |
|         |         |         |         |         |         |         |         |         |         |
+---------+---------+---------+---------+---------+---------+---------+---------+---------+---------+
_____________________________________________________________________________________________________
t1:288 ms  t2:480 ms    Display Mode: Normal: Peak Detect    Vectors: OFF       Grid = FULL
</pre>
</div>
<div class="container" style=" visibility: hidden; color: rgb(254, 0, 0);" id="cat1">
<pre>

  ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐   
  │        │    │        │    │        │    │        │    │        │    │        │    │        │
──┘        └────┘        └────┘        └────┘        └────┘        └────┘        └────┘


</pre></div>
<div class="container" style=" visibility: hidden; color: rgb(254, 0, 0);" id="cat2">
<pre>

┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐   
│        │    │        │    │        │    │        │    │        │    │        │    │        │
         └────┘        └────┘        └────┘        └────┘        └────┘        └────┘        └── 


</pre></div>
<div class="container" style="visibility: hidden; color: rgb(254, 0, 0);" id="cat3">
<pre>

  ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐   
  │        │    │        │    │        │    │        │    │        │    │        │    │        │
──┘        └────┘        └────┘        └────┘        └────┘        └────┘        └────┘


</pre></div>
<div class="container" style="visibility: hidden; color: rgb(254, 0, 0);" id="cat4">
<pre>

┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐   
│        │    │        │    │        │    │        │    │        │    │        │    │        │
         └────┘        └────┘        └────┘        └────┘        └────┘        └────┘        └── 


</pre></div>
<div class="container" style=" visibility: hidden; color: rgb(254, 0, 0);" id="cat5">
<pre>

  ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐    ┌────────┐   
  │        │    │        │    │        │    │        │    │        │    │        │    │        │
──┘        └────┘        └────┘        └────┘        └────┘        └────┘        └────┘


</pre></div>



    <div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat1">
    <pre>





&Lambda;   &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;                                              
 \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /                                                   
  V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    

</pre></div>


    <div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat2">
    <pre>





  &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;                                              
 / \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \                                                    
V   V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    \   

</pre></div>

    <div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat3">
<pre>





   &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;                                              
\ / \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \                                                    
 V   V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V       

</pre></div>

    <div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat4">
    <pre>





&Lambda;   &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;                                              
 \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /                                                   
  V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    

</pre></div>

    <div class="test" style="visibility: hidden; color: rgb(0, 0, 254);" id="cat5">
    <pre>





  &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;    &Lambda;                                              
 / \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \ /  \                                                    
V   V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    V    \   

</pre></div>

</body></html>

1 个答案:

答案 0 :(得分:0)

我假设您在浏览器中运行这些内容,并在第3段中给出了您的声明:“......文档中的第一个......”。

如果该假设是正确的,则无法使这些假设在浏览器中并行运行。