Question

我的代码是建立一个正在运行的我的投资组合的网站，但键入的Java脚本代码未运行/未执行，其余代码运行正常。它只有一个文件，因此，如果有人希望调试此代码，请继续，将此代码复制并粘贴到您的文件中，然后运行并查看并尝试调试我在文件中键入问题的错误

整个CSS，HTML和javascript位于一个文件中

<html> 
<head> 
<title>Rounak Vyas</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style type="text/css"> 
    body {
        background-color: #000
    }
    #console {
        font-family: courier, monospace;
        color: #fff;
        width:750px;
        margin-left:auto;
        margin-right:auto;
        margin-top:100px;
        font-size:15px;
    }
    a {
        color: #0bc;
        text-decoration: none;
    }

    #k {
        color: #0f0;
        animation: k 1s linear infinite;
    }

    @keyframes k{
        0%{opacity: 0;}
        50%{opacity: .5;}
        100%{opacity: 1;}
    }

    #a {
        color: #0f0;
    }
    #c {
        color: #0bc;
    }
    #b {
        color: #ff0096;
    }
    #container {
      position: relative;
    }
    #container canvas, #overlay {
        position: absolute;
    }
    canvas {
        border: 1px solid black;
    }
</style> 
</head> 
<body> 


<div id="container">
        <canvas id="c"></canvas>

            <div class="w3-card; w3-display-topmiddle" id="console">
                <span id="a">hello@world</span>
                :
                <span id="b">~</span>
                <span id="c">$</span>
                cd Rounak Vyas/About Me
                <br>
                <span id="a">hello@world</span>
                /
                <span id="a">Rounak Vyas</span>
                /
                <span id="a">About Me</span>
                :
                <span id="b">~</span>
                <span id="c">$</span>
                cat rounakvyas.txt
                <br>
                <br>
                <br>
                Hi, I'm <span id="k">Rounak Vyas</span>.<!-- laglaglaglaglaglaglaglaglaglaglaglag -->
                <p>I am a junior studying Information Technology at SRM Institute of Science and Technology, Chennai, India. </p><!-- qowifjqwoeijfoqweijfqweoifjqweofijqweoqwoijefoqwijefoijfqiwoefjj --><br>
                <p>I'm a software developer with interests in Artificial Intelligence, Web Development and building command line utility tools. I like turning exciting ideas into beautiful products.</p><!--- oqwipjefqwioefjwioqfjoiqwjfeioqwjefoi ----><br>
                <p>I love playing table tennis, hiking, bouldering, exploring different genres of music and watching obscure movies.</p><!-- owlsqweoifjqwoefijqwoeifjqwoefijwef -->
                <br><br>Want to get in touch with me? <a href="mailto:itsron143@gmail.com">Email me</a> or <a href="https://twitter.com/itsron143" target="_blank">hmu on Twitter</a><br>
                <br><p>You can check out my <a href="/rounakvyas.pdf" target="_blank">Resume</a>.</p>
                <br><p>Also check out my <a href="https://github.com/itsron717" target="_blank">GitHub</a> and <a href="http://linkedin.com/in/itsron143" target="_blank">LinkedIn</a> profiles.</p><br>Cheers!

    </div>


</div>

<script type="text/javascript"> 
    var Typer={
    text: null,
    accessCountimer:null,
    index:0, // current cursor position
    speed:2, // speed of the Typer
    file:" ", //file, must be setted
    accessCount:0, //times alt is pressed for Access Granted
    deniedCount:0, //times caps is pressed for Access Denied
    init: function(){// inizialize Hacker Typer
        accessCountimer=setInterval(function(){Typer.updLstChr();},500); // inizialize timer for blinking cursor
        $.get(Typer.file,function(data){// get the text file
            Typer.text=data;// save the textfile in Typer.text
            Typer.text = Typer.text.slice(0, Typer.text.length-1);
        });
    },

    content:function(){
        return $("#console").html();// get console content
    },

    write:function(str){// append to console content
        $("#console").append(str);
        return false;
    },

    makeAccess:function(){//create Access Granted popUp      FIXME: popup is on top of the page and doesn't show is the page is scrolled
        Typer.hidepop(); // hide all popups
        Typer.accessCount=0; //reset count
        var ddiv=$("<div id='gran'>").html(" "); // create new blank div and id "gran"
        ddiv.addClass("accessGranted"); // add class to the div
        ddiv.html("<h1>ACCESS GRANTED</h1>"); // set content of div
        $(document.body).prepend(ddiv); // prepend div to body
        return false;
    },
    makeDenied:function(){//create Access Denied popUp      FIXME: popup is on top of the page and doesn't show is the page is scrolled
        Typer.hidepop(); // hide all popups
        Typer.deniedCount=0; //reset count
        var ddiv=$("<div id='deni'>").html(" "); // create new blank div and id "deni"
        ddiv.addClass("accessDenied");// add class to the div
        ddiv.html("<h1>ACCESS DENIED</h1>");// set content of div
        $(document.body).prepend(ddiv);// prepend div to body
        return false;
    },

    hidepop:function(){// remove all existing popups
        $("#deni").remove();
        $("#gran").remove();
    },

    addText:function(key){//Main function to add the code
        if(key.keyCode==18){// key 18 = alt key
            Typer.accessCount++; //increase counter 
            if(Typer.accessCount>=3){// if it's presed 3 times
                Typer.makeAccess(); // make access popup
            }
        }else if(key.keyCode==20){// key 20 = caps lock
            Typer.deniedCount++; // increase counter
            if(Typer.deniedCount>=3){ // if it's pressed 3 times
                Typer.makeDenied(); // make denied popup
            }
        }else if(key.keyCode==27){ // key 27 = esc key
            Typer.hidepop(); // hide all popups
        }else if(Typer.text){ // otherway if text is loaded
            var cont=Typer.content(); // get the console content
            if(cont.substring(cont.length-1,cont.length)=="|") // if the last char is the blinking cursor
                $("#console").html($("#console").html().substring(0,cont.length-1)); // remove it before adding the text
            if(key.keyCode!=8){ // if key is not backspace
                Typer.index+=Typer.speed;   // add to the index the speed
            }else{
                if(Typer.index>0) // else if index is not less than 0 
                    Typer.index-=Typer.speed;// remove speed for deleting text
            }
            var text=Typer.text.substring(0,Typer.index)// parse the text for stripping html enities
            var rtn= new RegExp("\n", "g"); // newline regex

            $("#console").html(text.replace(rtn,"<br/>"));// replace newline chars with br, tabs with 4 space and blanks with an html blank
            window.scrollBy(0,50); // scroll to make sure bottom is always visible
        }
        if ( key.preventDefault && key.keyCode != 122 ) { // prevent F11(fullscreen) from being blocked
            key.preventDefault()
        };  
        if(key.keyCode != 122){ // otherway prevent keys default behavior
            key.returnValue = false;
        }
    },

    updLstChr:function(){ // blinking cursor
        var cont=this.content(); // get console 
        if(cont.substring(cont.length-1,cont.length)=="|") // if last char is the cursor
            $("#console").html($("#console").html().substring(0,cont.length-1)); // remove it
        else
            this.write("|"); // else write it
    }
}

function replaceUrls(text) {
    var http = text.indexOf("http://");
    var space = text.indexOf(".me ", http);
    if (space != -1) { 
        var url = text.slice(http, space-1);
        return text.replace(url, "<a href=\" "  + url + "\">" + url + "</a>");
    } else {
    return text
}
}
Typer.speed=3;
Typer.file="rounakvyas.txt";
Typer.init();

var timer = setInterval("t();", 30);
function t() {
    Typer.addText({"keyCode": 123748});
    if (Typer.index > Typer.text.length) {
        clearInterval(timer);
    }
}

</script>


<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-610661-7']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

<script type="text/javascript"> 
var c = document.getElementById("c");
var ctx = c.getContext("2d");

//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;


var chinese = "abcdefghijklmnopqrstuvwxyz1234567890~!@#$%^&*()_+={[}]:;'|\/.?><,";
//converting the string into an array of single characters
chinese = chinese.split(" ");

var font_size = 15;
var columns = c.width/font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for(var x = 0; x < columns; x++)
    drops[x] = 1; 

//drawing the characters
function draw()
{
    //Black BG for the canvas
    //translucent BG to show trail
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);

    ctx.fillStyle = "#050"; //green text
    ctx.font = font_size + "px arial";
    //looping over drops
    for(var i = 0; i < drops.length; i++)
    {
        //a random chinese character to print
        var text = chinese[Math.floor(Math.random()*chinese.length)];
        //x = i*font_size, y = value of drops[i]*font_size
        ctx.fillText(text, i*font_size, drops[i]*font_size);

        //sending the drop back to the top randomly after it has crossed the screen
        //adding a randomness to the reset to make the drops scattered on the Y axis
        if(drops[i]*font_size > c.height && Math.random() > 0.975)
            drops[i] = 0;

        //incrementing Y coordinate
        drops[i]++;
    }
}

setInterval(draw, 33);

</script>

</body> 
</html>

Answer 1

该脚本有效。

如果您以前没有调试前端代码的经验，建议您这样做：

https://developers.google.com/web/tools/chrome-devtools/javascript/

我必须包括来自cdn的jquery。

代码中断的位置： “ Typer”直接尝试检查无法使用的text属性的长度。我包括了这样的支票：

function t() {
  Typer.addText({
    "keyCode": 123748
  });
  if (Typer.text) {
    if (Typer.index > Typer.text.length) {
      clearInterval(timer);
    }
  }
}

但是，我不确定故事本身是否就此结束。

更好的办法是查看如何调试代码，然后询问似乎无法正常工作的特定问题。

键入的Javascript代码未执行

1 个答案: