在html文件中的Javascript

时间：2015-04-16 15:52:49

标签： javascript html

所以我有一个.html文件，显示一个网页，我想要标签，以便能够转到我的另一个.html文件。如何在我的页面上建立链接转到我的另一个文件？ 另一个问题，在我想要链接的文件中，我有一个javascript脚本，我想提供输出。 （它是Rock paper Scissors的高级版本，我希望它能说是否赢了。）我能用什么来获得输出。 return（bla bla bla）没有做任何事情。

<!DOCTYPE html>
<html>

  <head>
    <title>Home Page</title>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <link src="link.html">
    <style type="text/css">
.nav a {
  color: #5a5a5a;
  font-size: 11px;
  font-weight: bold;
  padding: 14px 10px;
  text-transform: uppercase;
}

.nav li {
  display: inline;
}

.jumbotron {
  background-image:url('http://upload.wikimedia.org/wikipedia/commons/e/e4/Canada_goose_flight_cropped_and_NR.jpg');
  height: 500px;
  background-repeat: no-repeat;
  background-size: cover;
}

.jumbotron .container {
  position: relative;
  top:100px;
}

.jumbotron h1 {
  color: #fff;
  font-size: 48px;  
  font-family: Shift, sans-serif;
  font-weight: bold;
}

.jumbotron p {
  font-size: 20px;
  color: #fff;
}

.learn-more {
  background-color: #f7f7f7;
}

.learn-more h3 {
  font-family: Shift, sans-serif;
  font-size: 18px;
  font-weight: bold;
}

.learn-more a {
  color: #00b0ff;
}
.neighorhood-guides {

    border-bottom: 1px solid #dbdbdb;
}
.neighborhood-guides h2 {
    color:#393c3d;
    font-size: 24px;
}
.neighborhood-guides p {
    font-size: 15px;
    margin-bottom: 13px;
}
</style>

  </head>

  <body>
    <div class="nav">
      <div class="container">
        <ul class= "pull-left">
          <li><a href="#">Name</a></li>
          <li><a href="#">Browse</a></li>
        </ul>
        <ul class= "pull-right">
          <li><a href="#">Sign Up</a></li>
          <li><a href="#">Log In</a></li>
          <li><a href="#">Help</a></li>
        </ul>
      </div>
    </div>

    <div class="jumbotron">
      <div class="container">

        <h1>Your Claculations Fast and Easy Than Ever Before!</h1>
        <p>Choose between 4 different calculators!</p>
        <a href="#">Learn More</a>
      </div>
    </div>

    <div class="neighborhood-guides">
        <div class="container">
            <h2>Calculators</h2>
            <p>We have four calculaotors that you can choose from:</p>
            <div class="row">
            <div class="col-md-4">
                <div class="thumbnail">
                    <a src="#"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Trigonometry_triangle.svg/288px-Trigonometry_triangle.svg.png"></a>
                </div>
                <div class="thumbnail">
                    <a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Trigonometry_triangle.svg/288px-Trigonometry_triangle.svg.png"></a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Trigonometry_triangle.svg/288px-Trigonometry_triangle.svg.png"></a>
                </div>
                <div class="thumbnail">
                    <a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Trigonometry_triangle.svg/288px-Trigonometry_triangle.svg.png"></a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="thumbnail">
                    <a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Trigonometry_triangle.svg/288px-Trigonometry_triangle.svg.png"></a>
                    <div class="thumbnail">
                    <a href="#"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Trigonometry_triangle.svg/288px-Trigonometry_triangle.svg.png"></a>
                </div>
                </div>
            </div>
        </div>
        </div>
    </div>

    <div class="learn-more">
      <div class="container">
        <div class= "row">
          <div class="col-md-4">
            <h3>Codecademy</h3>
            <p>Learn to code at <a href="codecademy.com">codecademy.com</a></p>
          </div>
          <div class="col-md-4">
            <h3>Other Sources</h3>
            <p><a href="#">Find Other Homework-Helpers here</a></p>
          </div>
          <div class="col-md-4">
            <h3>Contact us</h3>
            <p>Contact us at example@example.com</p>
          </div>
        </div>
      </div>
    </div>
    <a href="link.html">lol</a>
  </body>
</html>

我要链接的页面：

<!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">

    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <title>Rock Paper Scissor Lizard Spock</title>

        <style type="text/css">

        </style>

  </head>

  <body>
<script>
var userChoice = prompt("Do you choose Rock, Paper, Scissors, Lizard or Spock?");
var computerChoice = Math.floor(Math.random() * 5);

if (computerChoice == 0){
    computerChoice = "Rock";
}else if (computerChoice == 1){
    computerChoice = "Paper";
}else if(computerChoice == 2){
    computerChoice = "Scissors";
}else if(computerChoice == 3){
    computerChoice = "Lizard";
}else if(computerChoice == 4){
    computerChoice = "Spock";
}

console.log(computerChoice);
console.log(userChoice);

var compare = function(choice1 , choice2) {
if (choice1 == choice2) {
        return ("It's a tie!");
    }

if (choice1 == "Rock") {
    if (choice2 == "Paper"){
        return("Paper covers Rock!");
    }else if (choice2 == "Scissors"){
        return("Rock crushes Scissors!");
    }else if (choice2 == "Lizard"){
        return("Rock crushes Lizard!");
    }else if (choice2 == "Spock"){
        return ("Spock vaporizes Rock!");
    } else {
        return("Not Valid Answer")

    }
}

if (choice1 == "Paper"){
    if (choice2 == "Rock"){
        return("Paper covers Rock!");
    }else if (choice2 == "Scissors"){
        return("Scissors cuts Paper!");
    }else if (choice2 == "Lizard"){
        return("Lizard eats Paper!");
    }else if (choice2 == "Spock"){
        return ("Paper disproves Spock!");
    } else {
        return("Not Valid Answer")
    }
}

if (choice1 == "Scissors") {
        if (choice2 == "Paper"){
            return("Scissors cuts Paper!");
        }else if (choice2 == "Rock"){
            return("Rock crushes Scissors!");
        }else if (choice2 == "Lizard"){
            return("Scissors decapitates Lizard!");
        }else if (choice2 == "Spock"){
            return ("Spock smashes Scissors!");
        } else {
            return("Not Valid Answer")
        }
    }
    if (choice1 == "Lizard") {
        if (choice2 == "Paper"){
            return("Lizard eats Paper!");
        }else if (choice2 == "Scissors"){
            return("Scissors decapitate Lizard!");
        }else if (choice2 == "Rock"){
            return("Rock crushes Lizard!");
        }else if (choice2 == "Spock"){
            return ("Lizard poisons Spock!");
        } else {
            return("Not Valid Answer")

        }
    }

    if (choice1 == "Spock") {
        if (choice2 == "Paper"){
            return("Paper disproves Spock!");
        }else if (choice2 == "Scissors"){
            return("Spock smashes Scissors!");
        }else if (choice2 == "Lizard"){
            return("Lizard poisons Spock!");
        }else if (choice2 == "Rock"){
            return ("Spock vaporizes Rock!");
        } else {
            return("Not Valid Answer")

        }
    }
};
compare(computerChoice, userChoice);
</script>
  </body>

</html>

所以在第二页中，我如何让return函数起作用？

2 个答案:

答案 0 :(得分：1)

这些是相对简单或介绍性的问题，所以我将稍微解释一下。

我假设您希望标签根据发布的问题的内容直接链接到同一网站上的另一个文件。通过这种假设，使用文件的相对或完全限定路径进行链接相当简单。假设您的其他页面是＆＃34; page1.html＆＃34;和＆＃34; page2.html＆＃34;：

<a href="/page1.html">Tab</a>
<a href="/page2.html">Tab2</a>

这些是根相对路径，由前面的正斜杠表示。如果这些文件位于子目录中，但与链接到它们的页面相同，或链接到它们的页面的子目录，则可以执行文档相关链接：

<a href="page1.html">Tab</a>
<a href="subdirectory/page2.html">Tab 2</a>

这些链接从当前页面所在的文件夹开始，在该文件夹中查找该文件，或者在Tab2的情况下查看该文件的其他文件夹。

查看以下示例/说明：http://www.mediacollege.com/internet/html/hyperlinks.html

超链接元素的说明：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

关于超链接的另一个小教程：http://html.net/tutorials/html/lesson8.php

至于Javascript的输出，我会做一些改变。

  1. 将脚本移到头部。始终最好在头部定义脚本。您希望在调用函数之前定义它们。
  2. 您可以将提示和首选定义为函数本身。
  3. 你可以在一个函数中实际完成所有这些，但在下面的例子中，我将比较分开。
  4. 对于最基本的输出，将脚本放在正文中并调用document.write输出返回值。

    5. 我所指的代码示例：

    <!DOCTYPE html>
<html>

  <head>
    <link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">

    <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
    <title>Rock Paper Scissor Lizard Spock</title>

        <style type="text/css">

        </style>
<script type="text/javascript">
    function rockPaperScissorsSpock() {
        var userChoice = prompt("Do you choose Rock, Paper, Scissors, Lizard or Spock?");
        var computerChoice = Math.floor(Math.random() * 5);

        if (computerChoice == 0){
            computerChoice = "Rock";
        }else if (computerChoice == 1){
            computerChoice = "Paper";
        }else if(computerChoice == 2){
            computerChoice = "Scissors";
        }else if(computerChoice == 3){
            computerChoice = "Lizard";
        }else if(computerChoice == 4){
            computerChoice = "Spock";
        }
        return compare(computerChoice, userChoice);
    }

    var compare = function(choice1 , choice2) {
        if (choice1 == choice2) {
            return ("It's a tie!");
        }

        if (choice1 == "Rock") {
            if (choice2 == "Paper"){
                return("Paper covers Rock!");
            }else if (choice2 == "Scissors"){
                return("Rock crushes Scissors!");
            }else if (choice2 == "Lizard"){
                return("Rock crushes Lizard!");
            }else if (choice2 == "Spock"){
                return ("Spock vaporizes Rock!");
            } else {
                return("Not Valid Answer")

            }
        }

        if (choice1 == "Paper"){
            if (choice2 == "Rock"){
                return("Paper covers Rock!");
            }else if (choice2 == "Scissors"){
                return("Scissors cuts Paper!");
            }else if (choice2 == "Lizard"){
                return("Lizard eats Paper!");
            }else if (choice2 == "Spock"){
                return ("Paper disproves Spock!");
            } else {
                return("Not Valid Answer")
            }
        }

        if (choice1 == "Scissors") {
                if (choice2 == "Paper"){
                    return("Scissors cuts Paper!");
                }else if (choice2 == "Rock"){
                    return("Rock crushes Scissors!");
                }else if (choice2 == "Lizard"){
                    return("Scissors decapitates Lizard!");
                }else if (choice2 == "Spock"){
                    return ("Spock smashes Scissors!");
                } else {
                    return("Not Valid Answer")
                }
            }
            if (choice1 == "Lizard") {
                if (choice2 == "Paper"){
                    return("Lizard eats Paper!");
                }else if (choice2 == "Scissors"){
                    return("Scissors decapitate Lizard!");
                }else if (choice2 == "Rock"){
                    return("Rock crushes Lizard!");
                }else if (choice2 == "Spock"){
                    return ("Lizard poisons Spock!");
                } else {
                    return("Not Valid Answer")

                }
            }

            if (choice1 == "Spock") {
                if (choice2 == "Paper"){
                    return("Paper disproves Spock!");
                }else if (choice2 == "Scissors"){
                    return("Spock smashes Scissors!");
                }else if (choice2 == "Lizard"){
                    return("Lizard poisons Spock!");
                }else if (choice2 == "Rock"){
                    return ("Spock vaporizes Rock!");
                } else {
                    return("Not Valid Answer")

                }
            }
    };
</script>
  </head>

  <body>
<script type="text/javascript">
document.write(rockPaperScissorsSpock());
</script>
  </body>

</html>

    这些是相当基本的方法，我肯定会查看一些在线信息，包括Javascript和HTML的一些演练。

    MDN是一个很好的资源：https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

    作为旁注，我故意只对脚本做了一些小改动。 

    var compare = function(choice1 , choice2) { ... }

    是定义函数的一种非常有效的方法，特别是在命名空间或对象中，但您可以按照我的方式定义它

    function rockPaperScissorsSpock() { ... }

    虽然我从未使用过该网站，但似乎有很多主题可以在这里学习Javascript：http://html.net/tutorials/javascript/

    并且可以免费在线提供更完整或有效的演练。

答案 1 :(得分：0)

要链接到其他页面，只需使用

即可 
<a href="URL or relative path">Some Text</a>

在第二个文件中，您需要在调用函数时声明变量，因此您应该更改

var compare = function(choice1 , choice2) {

到

function compareChoices(choice1 , choice2) {

并更改

compare(computerChoice, userChoice);

到

var compare = compareChoices(computerChoice, userChoice);

compare那么应该是你返回的字符串

相关问题
最新问题