javascript实现的星座查询

今天在这个网站http://xzxys.wiicha.com/看到查询星座幸运色的效果,想研究一下代码,结果右键禁用。后来参考了一下别人的代码,琢磨着先实现了一下星座查询的功能,输入月份和日期四位数后,可以查询属于哪个星座,星座效果如下。
在这里插入图片描述
用CSS代码美化了一下输入框,js代码主要是使用了indexOf判断是否有不合法输入,对这个方法用得不太熟,特意拿来练手,12个月份使用switch语句判断。完整代码如下:

<!doctype html>
<html><head><meta charset="utf-8"><title>星座查询</title><style>* {margin: 0;padding: 0;}h2 {text-align: center;margin-top: 80px;color:#333;}#inquire {margin: 50px auto;width: 344px;}#inquire input {float: left;outline: none;}#inquire:after {content: "";display: block;height: 0;clear: both;visibility: hidden;}#inputstar {width: 200px;height: 43px;line-height: 43px;padding-left: 20px;border: 1px solid #ccc;border-right: none;border-radius: 5px 0 0 5px;font-size: 20px;/* 左上角 左下角*/}#btn1 {width: 120px;height: 45px;line-height: 45px;border: 1px solid #ccc;background: #EAEAEA;border-radius: 0 5px 5px 0;/* 右上角 右下角*/cursor: pointer;color: #444;font-size: 16px;}.star {font-size: 36px;text-align: center;color: #ff8400;margin: 60px auto;width: 344px;}</style></head><body><h2>请输入您的生日(示例:12月26日输入1226,3月5日请输入0305)</h2><div id='inquire'><input type="text" id="inputstar"><input type="button" value="查询星座" onclick="queryStar()" id='btn1' /></div><div class='star'></div><script>function queryStar() {var starSign = document.querySelector("#inputstar").value; //获取用户输入的月份和日期if (starSign.length != 4) {alert('输入有误,请重新输入!');return false;}var dispStar = document.querySelector(".star");var month = starSign.substring(0, 2); //取前2位,也就是月份var date = parseInt(starSign.substring(2)); //取后2位,也就是日期,并转换为整型var arrMonth = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']var arrDate = [01, 02, 03, 04, 05, 06, 07, 08, 09, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25,26, 27, 28, 29, 30, 31]var isMonth = arrMonth.indexOf(month);if (isMonth == -1) {alert('月份有误!请修改输入');return false;}var isDate = arrDate.indexOf(date)if (isDate == -1) {alert('日期有误!请修改输入');return false;}if ((month == "02") && (date > 29)) {alert('输入有误,请重新输入!');return false;}switch (month) {case "01":if (date < 20) {dispStar.innerHTML = "摩羯座";} elsedispStar.innerHTML = "水瓶座";break;case "02":if (date < 19) {dispStar.innerHTML = "水瓶座";} else dispStar.innerHTML = "双鱼座";break;case "03":if (date < 21) {dispStar.innerHTML = "双鱼座"} else dispStar.innerHTML = "白羊座";break;case "04":if (date < 20) {dispStar.innerHTML = "白羊座";} else dispStar.innerHTML = "金牛座";break;case "05":if (date < 21) {dispStar.innerHTML = "金牛座";} else dispStar.innerHTML = "双子座";break;case "06":if (date < 22) {dispStar.innerHTML = "双子座";} else dispStar.innerHTML = "巨蟹座";break;case "07":if (date < 23) {dispStar.innerHTML = "巨蟹座";} else dispStar.innerHTML = "狮子座";break;case "08":if (date < 23) {dispStar.innerHTML = "狮子座";} else dispStar.innerHTML = "处女座";break;case "09":if (date < 23) {dispStar.innerHTML = "处女座";} else dispStar.innerHTML = "天秤座";break;case "10":if (date < 24) {dispStar.innerHTML = "天秤座";} else dispStar.innerHTML = "天蝎座";break;case "11":if (date < 23) {dispStar.innerHTML = "天蝎座";} else dispStar.innerHTML = "射手座";break;case "12":if (date < 22) {dispStar.innerHTML = "射手座";} else dispStar.innerHTML = "摩羯座";break;}}</script></body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/717437.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

群体风暴之锤(War3地图编辑器)

文章目录 0、大致原理1、创建隐形单位2、新事件开端3、环境→新条件4、动作4.1、单位组4.1.1、圆范围内单位4.1.2、指定条件 4.2、对单位组内的所有单位释放风暴之锤 0、大致原理 真MK向目标点释放风暴之锤时选定&#xff08;以技能释放点为圆心&#xff0c;设定半径&#xff0…

Python编程语言常用的包管理工具介绍

conda是一个开源的包管理器和环境管理器&#xff0c;用于安装、运行和更新包和它们的依赖项。conda可以用于Python编程语言&#xff0c;但它也支持其他编程语言。conda的主要特点是它能够在不同的环境中管理不同的包集合&#xff0c;这使得它非常适合于数据科学和机器学习项目&…

洛谷 P1439 最长公共子序列

题目描述 给出 1,2,…,n 的两个排列 P1​ 和 P2​ &#xff0c;求它们的最长公共子序列。 输入格式 第一行是一个数 n。 接下来两行&#xff0c;每行为 n 个数&#xff0c;为自然数 1,2,…,n 的一个排列。 输出格式 一个数&#xff0c;即最长公共子序列的长度。 输入输出…

详解算法的时间复杂度和空间复杂度!

目录 ​编辑 1. 算法效率 2. 时间复杂度 2.1 时间复杂度的概念 2.2 大O的表示渐进法 2.3 一个栗子 3. 空间复杂度 4. 常见复杂度对比 5. 完结散花 ​​​​​​​ 悟已往之不谏&#xff0c;知来者犹可追 创作不易&#xff0c;宝子们&#xff01;如果这篇文章对你们有…

Flex布局

Flex布局是一种用于创建灵活且自适应的布局模型&#xff0c;它使得元素能够更好地响应不同的屏幕尺寸和设备。Flex布局基于容器和项目的概念&#xff0c;通过设置容器的属性来控制项目的布局和对齐方式。 Flex布局的关键概念包括&#xff1a; 父容器&#xff08;Flex容器&…

Git实战(3)之merge与rebase区别

1,采用merge和rebase后,git log的区别,merge命令不会保留merge的分支的commit 2,处理冲突的方式: (一股脑)使用merge命令合并分支,解决完冲突,执行git add .和 git commit -mfix conflict。这个时候会产生一个commit。(交互式)使用rebase命令合并分支,解决完冲突,…

一种求最大最小值的方法(C语言)

作者在做项目时需要分析大量数据&#xff0c;其中需要用到最大值最小值的求解。这里分享一种简单好用的方法&#xff0c;并避免在代码中出现过多的for循环。 这个方法用到了qsort函数。 首先我们需要定义一个比较函数用来比较2个值的大小并通过返回值来表示比较的结果。 int…

STM32标准库开发——FLASH闪存

FLASH介绍 一般来说&#xff0c;宣传的FLASH的大小只是说程序存储器的大小&#xff0c;不包括系统存储器以及选项字节这俩个部分 IAP是内置在boot loader中的一道程序&#xff0c;可以用于辅助下载&#xff0c;用户可以通过有线通信协议或者无线协议实现对程序的更新升级。 FLA…

如何使用grafana 下JSON API访问展示接口数据

一.新增connection 点击左侧菜单栏&#xff0c;选择Add new connection 下载安装即可。 二. 增加对应url和参数 1. 添加新的数据源 2. 配置对应url 3.新建仪表盘和添加接口url和参数等

LeetCode每日一题之 移动0

前言&#xff1a; 我的每日一题专栏正式开始更新&#xff0c;我会分享关于我在LeetCode上刷题时的经验&#xff0c;将经典题型拿出来详细讲解&#xff0c;来提升自己及大家的算法能力&#xff0c;希望这篇博客对大家有帮助。 题目介绍&#xff1a; 题目链接&#xff1a;. - …

SpringBoot+aop实现主从数据库的读写分离

读写分离的作用是为了缓解写库&#xff0c;也就是主库的压力&#xff0c;但一定要基于数据一致性的原则&#xff0c;就是保证主从库之间的数据一定要一致。如果一个方法涉及到写的逻辑&#xff0c;那么该方法里所有的数据库操作都要走主库。 一、环境部署 数据库&#xff1a;…

深入了解Java虚拟机(JVM)

Java虚拟机&#xff08;JVM&#xff09;是Java程序运行的核心组件&#xff0c;它负责解释执行Java字节码&#xff0c;并在各种平台上执行。JVM的设计使得Java具有跨平台性&#xff0c;开发人员只需编写一次代码&#xff0c;就可以在任何支持Java的系统上运行。我们刚开始学习Ja…

【leetcode】用队列实现栈

大家好&#xff0c;我是苏貝&#xff0c;本篇博客带大家刷题&#xff0c;如果你觉得我写的还不错的话&#xff0c;可以给我一个赞&#x1f44d;吗&#xff0c;感谢❤️ 点击查看题目 思路: 在做此题之前&#xff0c;我们先要实现队列&#xff0c;这在上个博客中已经写过&#…

学习人工智能的方法及方向!

目录 一、第一部分&#xff1a;了解人工智能 二、人工智能学习路线图 三、职业规划 四、未来展望 五、总结 在这个信息爆炸的时代&#xff0c;想要系统性地学习人工智能&#xff08;AI&#xff09;并找到对应方向的工作&#xff0c;你需要一个明确的学习路径和职业规划。本…

复合机器人是一种集成了移动机器人

复合机器人是一种集成了移动机器人、协作机器人和机器视觉等多项功能的新型机器人。它的开发目的是为了解决工厂物流中最后一米的问题&#xff0c;提供智能搬运解决方案。复合机器人不仅集成了自主移动机器人&#xff08;AMR&#xff09;、机械臂等工作单元&#xff0c;还使用了…

Java电梯模拟

Java电梯模拟 文章目录 Java电梯模拟前言一、UML类图二、代码三、测试 前言 此程序为单线程简单模拟电梯(初版)&#xff0c;如果存在问题或者设计不合理的地方&#xff0c;请大家帮忙指出。 一、UML类图 二、代码 电梯调度器 package cn.xx.evevator;import java.util.*;pub…

#LLM入门|Prompt#2.1_第二部分:搭建基于 ChatGPT 的问答系统_简介_Introduction

《第二部分&#xff1a;搭建基于 ChatGPT 的问答系统》&#xff01; 本部分基于吴恩达老师与OpenAI合作开发的课程《Building Systems with the ChatGPT API》创作&#xff0c;旨在指导开发者基于ChatGPT的API进行智能问答系统的构建。 课程内容 课程背景&#xff1a; 使用C…

Web3游戏基础设施提供商Stardust为Sui上的游戏开发者提供支持

Stardust将其在钱包服务&#xff08;wallets-as-a-service&#xff09;基础设施和用户获取平台方面的专业知识带到了Sui&#xff0c;为游戏开发者提供了关键的帮助&#xff0c;以吸引玩家。近日&#xff0c;Stardust公司宣布将为Sui游戏开发者调整其成熟的钱包服务&#xff08;…

MySQL:开始深入其数据(四)select子查询

select眼熟吧?(都三节了) 又开始学习了 在 MySQL 中&#xff0c;子查询&#xff08;subquery&#xff09;是指在一个查询内嵌套另一个完整的 SELECT 语句。子查询可以嵌套在 SELECT、INSERT、UPDATE、DELETE 语句中&#xff0c;用于从内部查询结果中获取数据&#xff0c;进而完…

vue3 的await async

在 Vue 3&#xff08;以及大多数现代的 JavaScript 环境中&#xff09;中&#xff0c;async 和 await 是用来处理异步操作的关键字。这些关键字使你能够以同步的方式编写异步代码&#xff0c;使代码更加易读、易写&#xff0c;并且有助于管理异步流程。 async async 关键字用…