一问一答，通过按钮切换显示的htm页面 - JavaScript论坛

楼主

已结贴√ 问题点数：20 回复次数：2

一问一答，通过按钮切换显示的htm页面

如图，问答题

图片附件: 游客没有浏览图片的权限，请登录或注册

分别是一问一答这种类型，数量不等的问题
【想要实现一个页面特效】

在一个htm页面里面，有三个按钮，分别是A按钮“下一个问题”、B按钮“显示/隐藏答案”
每次网页仅弹出一个问题，但不显示答案，点击htm上的B按钮就自动弹出相应答案，如果再点一下B按钮则自动隐藏答案。
如果按下A按钮，则自动随机切换到下个问题，如此反复。

请问htm代码要怎么写？自己太菜了，完全不会，请求高人指点

搜索更多相关主题的帖子: 答案　页面　按钮　切换　 htm　

第 2 楼

得分:20

回复楼主 maku1987

程序代码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<script src="https://cdn. </script>
<title>随机测试案例</title> 
</head>
<body>
    
    <button  onclick="foo2()" >随便问问</button>
    <button  onclick="foo3()" >查看答案</button>
    <button  onclick="foo4()" >隐藏答案</button><br><br>
    <div id=q2 style="display:none;"></div><br>
    <div id=a2 style="display:none;"></div>
    <script>
        idx=0;
        function foo2()
        {
           document.getElementById("a2").style="display:none;";
           idx=Math.floor(Math.random()*6);
           lst=["1+1=?","2*8=?","36-89=?","789/2=?","45*89=?","36+987=?"];
           lsta=[2,16,-53,394.5,4005,1023];
           document.getElementById("q2").style="display:block;";
           document.getElementById("q2").innerHTML=lst[idx];
        }
        function foo3()
        {
           document.getElementById("a2").style="display:block;";
           document.getElementById("a2").innerHTML=lsta[idx];
        }
        function foo4()
        {
           document.getElementById("a2").style="display:none;";
        }
    </script>
</body>
</html>

DO IT YOURSELF !

第 3 楼

得分:0

回复楼主 maku1987

或者，修改了一下，由原来的3个按钮变成2个按钮其中一个公用

程序代码：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<script src="https://cdn. </script>
<title>随机测试案例</title> 
</head>
<body>
    
    <button  onclick="foo2()" >随便问问</button>
    <button id="t3" onclick="foo3()" >查看答案</button>
    <br><br>
    <div id=q2 style="display:none;"></div><br>
    <div id=a2 style="display:none;"></div>
    <script>
        function foo2()
        {
           document.getElementById("a2").style="display:none;";
           document.getElementById("t3").innerHTML="查看答案";
           idx=Math.floor(Math.random()*6);
           lst=["1+1=?","2*8=?","36-89=?","789/2=?","45*89=?","36+987=?"];
           lsta=[2,16,-53,394.5,4005,1023];
           document.getElementById("q2").style="display:block;";
           document.getElementById("q2").innerHTML=lst[idx];
        }
        function foo3()
        {
           if(document.getElementById("q2").style["display"]==="none")
           {
              alert("没有问题呢,怎么回答?");
              return;
           }
           text=event.target.innerHTML;
           if (text==="隐藏答案")
           {
              document.getElementById("a2").style="display:none;";
              event.target.innerHTML="查看答案";
           }
           else
           {
              document.getElementById("a2").style="display:block;";
              document.getElementById("a2").innerHTML=lsta[idx];
              event.target.innerHTML="隐藏答案";
           }
        }
        function foo4()
        {
           document.getElementById("a2").style="display:none;";
        }
    </script>
</body>
</html>

DO IT YOURSELF !