| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1317 人关注过本帖
标题:一问一答,通过按钮切换显示的htm页面
只看楼主 加入收藏
maku1987
Rank: 1
等 级:新手上路
帖 子:1
专家分:0
注 册:2020-1-2
结帖率:0
收藏
已结贴  问题点数:20 回复次数:2 
一问一答,通过按钮切换显示的htm页面
如图,问答题
图片附件: 游客没有浏览图片的权限,请 登录注册


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

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

请问htm代码要怎么写?自己太菜了,完全不会,请求高人指点
搜索更多相关主题的帖子: 答案 页面 按钮 切换 htm 
2020-01-16 00:39
wp231957
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:神界
等 级:贵宾
威 望:423
帖 子:13688
专家分:53332
注 册:2012-10-18
收藏
得分: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 !
2020-01-20 14:21
wp231957
Rank: 20Rank: 20Rank: 20Rank: 20Rank: 20
来 自:神界
等 级:贵宾
威 望:423
帖 子:13688
专家分:53332
注 册:2012-10-18
收藏
得分: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 !
2020-01-20 15:14
快速回复:一问一答,通过按钮切换显示的htm页面
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.034171 second(s), 9 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved