Javascript 创建一个页面，要求用户在打开主页之前回答数学公式_Javascript_Html_Css

Javascript 创建一个页面，要求用户在打开主页之前回答数学公式

javascript html css

Javascript 创建一个页面，要求用户在打开主页之前回答数学公式,javascript,html,css,Javascript,Html,Css,因此，我试图使我的index.html成为一个在允许用户访问home.html之前向用户提问的页面。（事实上，用户只需打开site\u name.com/home，我稍后会处理这个问题，哈哈。现在请耐心等待）以下是我的游戏计划：当用户打开页面时，一个随机算术问题将粘贴到一个div中。算术问题将是两个单位正整数和一个二进制运算+，-或*。答案需要以某种方式存储为全局变量（这是我一直坚持的事情之一）。为此，我构造了以下函数 var randquest = function ()

因此，我试图使我的

index.html

成为一个在允许用户访问

home.html

之前向用户提问的页面。（事实上，用户只需打开

site\u name.com/home

，我稍后会处理这个问题，哈哈。现在请耐心等待）

以下是我的游戏计划：

当用户打开页面时，一个随机算术问题将粘贴到一个div中。算术问题将是两个单位正整数和一个二进制运算

，

或

。答案需要以某种方式存储为全局变量（这是我一直坚持的事情之一）。为此，我构造了以下函数

    var randquest = function ()
    {
        var ops = ["+", "-", "*"];
        var num1 = Math.floor(Math.rand() * 10);
        var num2 = Math.floor(Math.rand() * 10);
        var thisOp = ops[Math.floor(Math.rand() * 10) % 3];

        var myDiv = document.getElementById("questiondiv");
        var myNewNode = document.createElement('div class="outerdiv" id="questiondiv"')
        var myContent = document.createTextNode("<p><b>Question:</b> " + num1 + " " + thisOp + " " + num2 + "</p>");
        var myNewNode.appendChild(myContent);
        var myDiv.appendChild(myNewNode);

        answer = new String();
        switch (thisOp)
        {
            case "+"
            {
                answer = (num1 + num2).toString();
            }
            case "-"
            {
                answer = (num1 - num2).toString();
            }
            case "*"
            {
                answer = (num1 * num2).toString();
            }
        }
    }

但要让它起作用，我不知何故需要答案成为一个全局变量，我不知何故需要在打开

home.html

的

else

语句中有一个过程。我该怎么做？我遇到了路障

如果你想看的话，这是到目前为止的整个页面：

<html>
<head>
    <title>
        Sentinel page 
    </title>
    <style type="text/css">
        body
        {

        }
        .innerdiv
        {
            z-index: -1;
            position: absolute;
            top: 0px;
            left: 0px;
            width: 700px;
        }
        .outerdiv
        {
            width: 700px;
            border: 2px solid #FFF;
            padding: 10px;
            margin: 5px;
            text-color: blue;
        }
        .outerdiv:nth-of-type(2n+0)
        {
            background: grey;
        }
        .outerdiv:nth-of-type(2n+1)
        {
            background: #FFFFCC;
        }
        #headerdiv
        {
            text-align: center;
        }
        #maindiv
        {

        }
        #footerdiv
        {

        }
        p
        {
            color: blue;
        }
        h1
        {
            color: red;
            text-shadow: 2px 2px white;
        }

    </style>
    <script>
        var randquest = function ()
        {
            var ops = ["+", "-", "*"];
            var num1 = Math.floor(Math.rand() * 10);
            var num2 = Math.floor(Math.rand() * 10);
            var thisOp = ops[Math.floor(Math.rand() * 10) % 3];

            var myDiv = document.getElementById("questiondiv");
            var myNewNode = document.createElement('div class="outerdiv" id="questiondiv"')
            var myContent = document.createTextNode("<p><b>Question:</b> " + num1 + " " + thisOp + " " + num2 + "</p>");
            var myNewNode.appendChild(myContent);
            var myDiv.appendChild(myNewNode);

            answer = new String();
            switch (thisOp)
            {
                case "+"
                {
                    answer = (num1 + num2).toString();
                }
                case "-"
                {
                    answer = (num1 - num2).toString();
                }
                case "*"
                {
                    answer = (num1 * num2).toString();
                }
            }
        }
        var checker = function()
        {
            var ipt = document.getElementById("ans").value;
            if (ipt != answer)
            {
                alert("Wrong answer. Entrance not granted.");
                return;
            }
            else
            {
                // Open up home.html
            }
        }


    </script>
</head>
<body>
    <div class="innerdiv">

    </div>
    <div class="outerdiv" id="headerdiv">
        <h1>my_site</h1>
    </div>
    <div class="outerdiv" id="introdiv">
        <p>Welcome to my site. Before you can enter the main page, I need to make sure you're human. So please answer the question below.</p>

    </div>
    <div class="outerdiv" id="questiondiv">
        <!-- Div to house the arithmetic quesiton -->
    </div>
    <div class="outerdiv" id="answerdiv">
        <p><b>Answer:</b></p> <input type="text" id="ans"> <input type="button" value="Submit" onclick="checker">
    </div>
    <div class="outerdiv" id="footerdiv">
        <p>Last modified: 03/31/2014</p>
    </div>
</body>
</html>


哨兵页
身体
{
}
.innerdiv
{
z指数：-1；
位置：绝对位置；
顶部：0px；
左：0px；
宽度：700px；
}
欧特尔迪夫先生
{
宽度：700px；
边框：2倍实心#FFF；
填充：10px；
保证金：5px；
文字颜色：蓝色；
}
.outerdiv：类型的第n个（2n+0）
{
背景：灰色；
}
.outerdiv：第n种类型（2n+1）
{
背景：#FFFFCC；
}
#海德尔迪夫
{
文本对齐：居中；
}
#maindiv
{
}
#页脚div
{
}
P
{
颜色：蓝色；
}
h1
{
颜色：红色；
文本阴影：2px 2px白色；
}
var randquest=函数（）
{
变量运算=[“+”、“-”、“*”]；
var num1=Math.floor（Math.rand（）*10）；
var num2=Math.floor（Math.rand（）*10）；
var thisOp=ops[Math.floor（Math.rand（）*10）%3]；
var myDiv=document.getElementById（“questiondiv”）；
var myNewNode=document.createElement（'div class=“outerdiv”id=“questiondiv”'））
var myContent=document.createTextNode（“问题：“+num1+”“+thisOp+”“+num2+””）；
var myNewNode.appendChild（myContent）；
变量myDiv.appendChild（myNewNode）；
答案=新字符串（）；
开关（thisOp）
{
大小写“+”
{
答案=（num1+num2）.toString（）；
}
案例“-”
{
答案=（num1-num2）.toString（）；
}
案例“*”
{
答案=（num1*num2）.toString（）；
}
}
}
var checker=函数（）
{
var ipt=document.getElementById（“ans”）.value；
如果（ipt！=回答）
{
警惕（“回答错误。不允许进入”）；
返回；
}
其他的
{
//打开home.html
}
}
我的网站
欢迎来到我的网站。在你进入主页之前，我需要确认你是人类。所以请回答下面的问题
回答：
最后修改日期：2014年3月31日

只需全局声明变量

ipt

，即在函数定义之外

var ipt;

var checker = function() {
    // set ipt value here. 
}

如果您使用JavaScript，人们可能会使用开发人员工具找到使用自动化系统进入的答案。用户看不到答案并不意味着它不在HTML代码中。浏览器可以访问此答案，试图进入网站的机器人也可以访问此答案。如果在InternetExplorer中按F12键，您将获得开发人员工具，包括一个DOM Explorer，它将允许您使用原始HTML代码访问整个页面

在这种情况下，您应该使用类似PHP的东西。PHP比JavaScript更容易打印元素和文本，而且它是服务器端的，所以代码是在web服务器上执行的。以下是您应该如何设置它

当用户第一次访问该网站时，服务器将重定向到页面

captcha.php

。除了

index.php

（我假设是主页）之外的页面如果没有回答问题，也应该重定向到

captcha.php

。此页面包含由PHP生成的随机数学问题，

使用两个POST变量：问题的答案，以及每个问题的唯一验证码，该验证码已通过

标记位于

中。PHP可以在不使用JavaScript的情况下将此唯一的验证码会话代码放入

值

属性中。当问题得到回答时，浏览器应该转到页面查看答案（例如

captcha\u check.php

）

示例

captcha.php

页面：

<p>Math problem generated by PHP</p>
<form action="captcha_check.php" method="post">
    <input type="hidden" name="captcha-id" value="CAPTCHA code generated by PHP" />
    <input type="text" name="captcha-solution" />
    <input type="submit" value="Continue" />
</form>

PHP生成的数学问题

captcha\u check.php

页面应使用通过POST发送给它的验证码会话代码和解决方案进行检查，如果答案错误，则重定向到

captcha.php

页面，否则重定向到

index.php

页面。在重定向到

index.php

页面之前，如果答案正确，则

captcha\u check.php

页面应为会话存储cookie。这样，cookie被发送到HTTP头中的所有页面，因此每个页面都可以验证会话。如果你愿意，cookie可以永远留在计算机上，让用户

<p>Math problem generated by PHP</p>
<form action="captcha_check.php" method="post">
    <input type="hidden" name="captcha-id" value="CAPTCHA code generated by PHP" />
    <input type="text" name="captcha-solution" />
    <input type="submit" value="Continue" />
</form>