【DOM】调查问卷与性格测试示例

最新推荐文章于 2022-07-13 14:21:40 发布

我一直在流浪

最新推荐文章于 2022-07-13 14:21:40 发布

阅读量4.1k

点赞数

分类专栏：【基础学习-JavaWeb/前端】

本文链接：https://blog.csdn.net/qq_42764468/article/details/100182674

版权

【基础学习-JavaWeb/前端】专栏收录该内容

105 篇文章

订阅专栏

本文详细介绍了一款在线问卷调查及性格测试的实现方案，利用HTML、CSS与JavaScript技术，展示了如何通过动态显示隐藏元素来优化用户体验，以及如何通过解析用户选择来反馈性格测试结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- - 调查问卷
  - 性格测试

调查问卷

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #contentid{
            display: none;
        }
    </style>

    <script type="text/javascript">
        function showContent(node){
            var divNode = document.getElementById("contentid");
            if(node.value=='yes'){
                divNode.style.display="block";
            }else{
                divNode.style.display="none";
            }
        }
    </script>
</head>
<body>
你要参与问卷调查吗？
<input type="radio" name="wenjuan" value="yes" onclick="showContent(this)">是
<input type="radio" name="wenjuan" valuse="no" checked="checked" onclick="showContent(this)">否
<br>
<div id="contentid">
    问卷调查内容：
    <br>
    您的姓名：<input type="text"><br>
    您的年龄：<input type="text">
</div>
</body>
</html>

在这里插入图片描述

性格测试

<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .close{
            display: none;
        }
        .open{
            display: block;
        }
    </style>

    <script type="text/javascript">

        function showResult(){
            var flag =false;
            var val;
            //获取所有的水果节点
            var fruitNodes = document.getElementsByName("fruit");
            //遍历水果
            for(var i=0;i<fruitNodes.length;i++){
                //判断哪些水果被选中
                if(fruitNodes[i].checked){
                    flag=true;
                    val=parseInt(fruitNodes[i].value);
                    break;
                }
            }
            if(!flag){
                document.getElementById("spanid").innerHTML="没有任何答案".fontcolor("red");
                return;
            }
            if(val>=1&&val<=3){
                document.getElementById("div1").className="open";
                document.getElementById("div2").className="close";

            }else{
                document.getElementById("div1").className="close";
                document.getElementById("div2").className="open";

            }


        }
    </script>
</head>
<body>
欢迎您参加性格测试：
<br>
第一题：<br>
您喜欢的水果是什么？<br>
<div id="div0">
    <input type="radio" name="fruit" value="1">苹果
    <br>
    <input type="radio" name="fruit" value="2">香蕉
    <br>
    <input type="radio" name="fruit" value="3">西瓜
    <br>
    <input type="radio" name="fruit" value="4">桃子
    <br>
    <input type="radio" name="fruit" value="5">葡萄
    <br>
    <input type="radio" name="fruit" value="6">火龙果
</div>
<input type="button" value="查看测试结果" onclick="showResult();">
<span id="spanid">
</span>
<div id="div1" class="close">1-3分：性格内向</div>
<div id="div2" class="close">4-6分：性格外向</div>
</body>
</html>