前端练习——弹窗、判断语句（星座测试）

本文链接：https://blog.csdn.net/aaaaaaapple22/article/details/70653168

本文介绍了如何使用前端技术实现一个星座测试的弹窗功能，通过HTML布局和条件判断语句，为用户提供个性化的星座信息展示。详细代码和实际效果展示辅助理解。

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

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Miss半仙帮你测星座</title>
    <script type="text/javascript">
        function rec() {
            var score; //score变量，用来存储用户输入的成绩值。
            score = prompt("请输入你的出生月份");
            if (score >= 12) {
                alert("你是射手座")
            }
            else if (score >= 11) {
                alert("你是天蝎座")
            }
            else if (score >= 10) {
                alert("你是天秤座");
            }
            else if (score >= 9) {
                alert("你是处女座");
            }
            else if (score >= 8) {
                alert("你是狮子座");
            }
            else if (score >= 7) {
                alert("你是巨蟹座");
            }
            else if (score >= 6) {
                alert("你是双子座");
            }
            else if (score >= 5) {
                alert("你是金牛座")
            }
            else if (score >= 4) {
                alert("你是白羊座")
            }
            else if (score >= 3) {
                alert("你是双鱼座")
            }
            else if (score >= 2) {
                alert("你是水瓶座")
            }
            else {
                alert("你是摩羯座")
            }
        }

    </script>
    <style>
        #xingzuo{
            height:50px;
            width: 200px;
            display: block;
            margin: 20px auto;
            border: 2px solid blue;

        }
        p{
            text-indent: 2em;
            font-family:Microsoft yahei;
            font-size: 20px;
            color:darkslategrey;
        }


    </style>
</head>
<body>
<input id="xingzuo" name="button" type="button" onClick="rec()" value="点击我，帮你测星座"  />
<h1>
    <p>米索不达亚文明占星家为了方便研究及观测天上诸多恒星，人们把星空分为若干个区域，每一区就是一个星座。很难确切的说出人类是
        从何时开始有星座的概念的，这类天文知识远在有历史记载以前就被人们所领会。星座的名称则很可能来源于早期航海的水手。
    </p>
    <p>
        不同地域的文明中，星座的起源可能完全不同，但是随着各文明的扩张和相互影响，星座的文化也包含了融合的过程。
    </p>
    <img src="#">
</h1>
</body>
</html>