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

本文介绍了如何使用前端技术实现一个星座测试的弹窗功能,通过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>

效果图:



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值