在Google网站中嵌入JavaScript代码会导致错误

时间:2013-06-21 06:35:55

标签: javascript html google-sites

我正在尝试在Google网站中嵌入一个简单的代码:source from here

代码:

<!doctype HTML>
<html>  
   <head>  
   <title>Feedtank| html 5 canvas test</title>

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <meta http-equiv="Content-Language" content="EN" />
    <meta name="Author" content="Feedtank LLC" />
    <meta name="Publisher" content="Feedtank LLC" />
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>



   <script type="text/javascript" src="anim.js" ></script>  

  <style type="text/css">  

   canvas { 
     border: 1px solid gray; 
     box-shadow: 3px 3px 7px #777; 
   }

   body
     {
         background-color: #DDDDDD;
         font-family: Helvetica, Verdana, Arial, serif;
         color:#ACACA
     }

    h6{
        color:#AA8888;
        font-size:10px;
        font-family: georgia;
        text-decoration: underline;
    }

    h2{
        font-size:10px;
        margin: 0px;
        padding-bottom:20px;
        padding-left: 3px;
    }

    h4{
        color:white;
        font-size:60px;
        text-shadow: 1px 1px 1px #888888, 1px 1px 1px #EEE;
        margin: 0px;

    }




    div#title_holder{
        width:640px;
        text-align: left;
        margin: 0px;
        padding: 0px;
    }
    div#settings_holder{
        width:600px;
        border: 1px  dotted #AA8888;
        border-radius:2px;
        margin: 0px;
        padding:20px;
        overflow: auto;

    }
    input#message{
        font-size:22px;
        color: #555555;
        size: 30;
        font-family: Helvetica, Verdana, Arial, serif;
        border: 3px solid #AA8888;;
    }
    button{
        font-size:12px;
        padding:4px;
        font-family: Georgia, Verdana, Arial, serif;

    }
    li{
        list-style-type:none;padding:10px 0px 0px 3px; 
        color: #AA8888;
        font-size:14px;


    }
    ul{
    text-align: left;
    }
    h6#urlText{
        margin: 4px;
    }

    p#Options{
        color:#AA8888;
        font-size:16px;
        text-decoration: none;
        margin: 2px;
        font-family: georgia;       
    }
    div#footer{
        font-family: georgia;   
        font-size:12px;
        font-weight: bold;
        color:#888888;
    }
    a{
    color:#AA8888
    }
    p#shareURL{

        font-family: georgia;   
        font-size:12px;
        font-weight: bold;
        color:#888888;
    }

  </style>  

  </head>  

  <body>

    <div id="wrapper" style="width:640px; margin-left: auto ;margin-right: auto ;">

    <br>
    <br>
    <div id="title_holder">
    <h4>HTML5</h4>
    <h2>CANVAS MINIMAL PARTICLE ANIMATION DEMO </h2>
    </div>


    <canvas id="born_canvas" width="640" height="480">Missing the canvas </canvas>
    <div id="hidden_canvas" >
        <canvas id="born_canvas_hidden" width="100" height="100" style="display:none"></canvas>
    </div>

    <br>


    <p id="Options">OPTIONS</p>
    <div id="settings_holder">
    <div style="float:left; width:600px margin:5px;padding-top:3px;padding-bottom:0px;" >
        <input type="text"  id="message" value="Hello" maxchars="50">
        <button  value="Change message" title="change Message" onmousedown="javascript:changeMessage();"  >Change Message</button><br>
        <br>
        <p id="shareURL" style="display:inline">share url:</p>

        <h6 id="urlText">http://www.feedtank.com/labs/html_canvas/?msg=Hello</h6>


    <ul style="padding: 5px;">
        <li><input type="radio" name="radio1"  id="radio_Low" onmousedown="javascript:setMinNumCircles()"   checked="true"> 300 SPRITES</li>
        <li ><input type="radio" name="radio1" id="radio_High" onmousedown="javascript:setHighNumCircles()"> 1500 SPRITES (slow framerate)</li>
        <li ><input type="checkbox" name="gravity" id="bGravity" onmousedown="javascript:setGravity()" > GRAVITY</li>
        <li ><input type="checkbox" name="gravity" id="bGravity" onmousedown="javascript:setFade()" checked="true" > FADE</li>
    </ul>

    </div>



    </div>
    <br>
    <br>
    <div id="footer">
        Feb 4th, 2010 | Created By <a href="http://www.feedtank.com">Feedtank</a> 
    </div>

  </body>  

  </html>

但是当我尝试在W3SCHOOL here中运行代码时,会导致错误:

enter image description here

那我做错了什么?

1 个答案:

答案 0 :(得分:1)

它显示错误,因为您的anim.js路径为false

<script type="text/javascript" src="anim.js" ></script>  

和图像也不可用,所以请将所有支持文件正确放入项目文件夹然后运行,不要在w3schools中试用