ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

考试答题系统模板html和css

2021-12-11 20:02:57  阅读:227  来源: 互联网

标签:3498db linear 答题 gradient image html background answer css



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            display: flex;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }

        .test {
            margin: 10px 30px;
        }

        .qustion {
            font-size: 18px;
            background: rgb(221, 234, 255);
            color: black;
            line-height: 40px;
            margin-top: 20px;
            border: 1px solid gray;
            white-space: pre-line;
        }

        .answer {
            text-indent: 2em;
            background: rgb(98, 172, 214);
            color: white;
            opacity: 0;
            transition: 1s ease-out;
            white-space: pre;
        }

        .answer_show {
            text-indent: 2em;
            background: rgb(98, 172, 214);
            color: white;
            opacity: 0;
            transition: 1s ease-out;
            opacity: 1;
            white-space: pre;
        }

        .btnTest {
            background: #3498db;
            background-image: -webkit-linear-gradient(top, #3498db, #2980b9);
            background-image: -moz-linear-gradient(top, #3498db, #2980b9);
            background-image: -ms-linear-gradient(top, #3498db, #2980b9);
            background-image: -o-linear-gradient(top, #3498db, #2980b9);
            background-image: linear-gradient(to bottom, #3498db, #2980b9);
            -webkit-border-radius: 28;
            -moz-border-radius: 28;
            border-radius: 28px;
            font-family: Arial;
            color: white;
            font-size: 20px;
            padding: 10px 20px 10px 20px;
            text-decoration: none;
            position: absolute;
            top: 20px;
            left: 50%;
        }

        .btnTest:hover {
            background: #3cb0fd;
            background-image: -webkit-linear-gradient(top, #3cb0fd, #3498db);
            background-image: -moz-linear-gradient(top, #3cb0fd, #3498db);
            background-image: -ms-linear-gradient(top, #3cb0fd, #3498db);
            background-image: -o-linear-gradient(top, #3cb0fd, #3498db);
            background-image: linear-gradient(to bottom, #3cb0fd, #3498db);
            text-decoration: none;
        }
    </style>

</head>

<body>
    <h1>H5-2122 早考题</h1>
    <h4>12月10号</h4>
    <div class="test">
        <p class="qustion">1.使用for循环 求出35,25的最大公约数</p>
        <p class="answer">
            var a=35,b=25;
            var min=a>b ? b : a;
            for(;min>=1;min--){
            if(a%min===0 && b%min===0){
            console.log(min+"就是最大公约数")   
            break; }
            }
            
        </p>
    </div>
    <div class="test">
        <p class="qustion"> 2、求100以内的所有质数 </p>
        <p class="answer">
            var i=2;
            while(i<=100){ var j=2; var bool=true; 
                while(j < i ){ 
                    if(i%j===0){ 
                        bool=false; break; } 
                        j++; 
                    } 
                    if(bool){
                console.log(i+"这个数是素数") 
            } i++;
         } 
            
            </p> </div> <div class="test">
                <p class="qustion">3.做出*号组成的等腰三角形</p>
                <p class="answer">
                    var i=0;
                    while(i<10){
                        var j=0;
                        var k=10;
                        if(i===0)document.write(" ensp; ")
                        while(k>i/1.1){
                            document.write("ensp;")
                            k--;
                        }
                        while(j<=i){
                            document.write("*");
                            document.write("ensp;")
                            j++;
                        }
                        document.write(" < br >");
                        i++;
                    }

                 </p>
    </div>
    <div class="test">
        <p class="qustion">4.break 和return的区别? </p>
        <p class="answer">
            return 必须写在函数内,break必须写在循环或者switch中
            如果在函数中有循环或者switch,如果使用return,直接跳出函数
            如果使用break只跳出当前循环语句或者switch,执行后面的语句,
            直到函数内所有内容运行完成
        </p>
    </div>
    <div class="test">
        <p class="qustion">5.写一个函数,传入参数,求出所给的参数中的最大值 </p>
        <p class="answer">
            function getSum(){
                var max=0;
                var min=arguments[0];
             
                for(var i=0;i < arguments.length;i++){
                    if(max < arguments[i]){
                        max= a rguments[i] ;
                    }
                }
                console.log(max);
            }
            getSum(   );
        </p>
                </div> <button class="btnTest" οnclick="show()">显示答案</button>
</body>
<script>
    // 获取答案列表
    let answer = document.querySelectorAll(".answer");
    // 获取按钮元素
    let btn = document.querySelector(".btnTest");
    // 显示方法
    function show() {
        // 判断当前按钮内容
        if (btn.innerHTML === "显示答案") {
            btn.innerHTML = "隐藏答案"
            // 用for循环改变答案列表class
            for (let i = 0; i < answer.length; i++) {
                answer[i].className = "answer_show"
            }
        } else {
            btn.innerHTML = "显示答案"
            for (let i = 0; i < answer.length; i++) {
                answer[i].className = "answer"
            }
        }

    }
</script>

</html>

标签:3498db,linear,答题,gradient,image,html,background,answer,css
来源: https://blog.csdn.net/weixin_44172610/article/details/121878258

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有