当前位置： 首页 > news >正文

javascript实现的星座查询

news 2026/1/17 1:09:14

今天在这个网站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>

相关文章：

javascript实现的星座查询

今天在这个网站http://xzxys.wiicha.com/看到查询星座幸运色的效果&#xff0c;想研究一下代码&#xff0c;结果右键禁用。后来参考了一下别人的代码&#xff0c;琢磨着先实现了一下星座查询的功能&#xff0c;输入月份和日期四位数后&#xff0c;可以查询属于哪个星座&#xf…...

编程日记 2024/3/3 22:57:18

全国青少年软件编程（Python）等级考试试卷（一级） 测试卷2021年12月

第 1 题 【 单选题 】 下面程序的运行结果是什么&#xff1f;&#xff08; &#xff09; a10 b5 ca*b print(c) A :10 B :15 C :50 D :5 正确答案:C 试题解析: 第 2 题 【 单选题 】 与a>b and b>c等价的是&#xff1f;&#xff08; &#xff09; A…...

编程日记 2024/3/3 22:56:17

昇腾ACL应用开发之硬件编解码dvpp

1.前言 在我们进行实际的应用开发时&#xff0c;都会随着对一款产品或者AI芯片的了解加深&#xff0c;大家都会想到有什么可以加速预处理啊或者后处理的手段&#xff1f;常见的不同厂家对于应用开发的时候&#xff0c;都会提供一个硬件解码和硬件编码的能力&#xff0c;这也是抛…...

编程日记 2024/3/3 22:55:16

MFC 模态对话框退出机制的探究

一位读者问了这样一个问题： ” 如果我创建了一个可见的模态对话框，却对用户来说不可用。举个例子，假设我在程序中的其他位置收到一个事件，并且我从事件中调用模态 CDialog 上的 DestroyWindow。我注意到 OnDestroy 是在 CDialog 上调用的，但在将 WM_QUIT 消息发送到模态对…...

编程日记 2024/3/3 22:52:13

Android13 framework添加关机接口

framework层修改&#xff1a; t0_sys/frameworks/base/core/api/current.txt method RequiresPermission(android.Manifest.permission.REBOOT) public void reboot(Nullable String);method public void rebootp();t0_sys/frameworks/base/core/java/android/os/IPowerManager…...

编程日记 2024/3/3 22:50:11

如何使用ArcGIS Pro为栅格图添加坐标信息

在某些时候&#xff0c;我们从网上获取的资源是一张普通的栅格图&#xff0c;没有任何的坐标信息&#xff0c;如果想要和带坐标信息的数据一起使用就需要先添加坐标信息&#xff0c;在GIS上&#xff0c;我们把这个过程叫做地理配准&#xff0c;这里为大家介绍一下地理配准的方法…...

编程日记 2024/3/3 22:49:10

FDM打印机学习

以下内容摘自网络&#xff0c;仅供学习讨论&#xff0c;侵删。 持续更新。。。 FDM打印机是通过喷头融化丝状耗材&#xff08;PLA&#xff0c;ABS等材料&#xff09;&#xff0c;然后逐层涂在热床上&#xff0c;一层一层逐级抬高。 结构分类 Prusa i3型是一种龙门结构&#…...

编程日记 2024/3/3 22:48:09

C++进阶-- map和set

关联式容器 在前面&#xff0c;我们所学的vector、list、deque&#xff0c;这些都是序列容器&#xff0c;也就是底层为线性序列的数据结构。 而关联式容器是C标准库中的一种类别&#xff0c;用于存储键值对&#xff08;key-value pair&#xff09;&#xff0c;关联式容器中的元…...

编程日记 2024/3/3 22:47:08

AI-数学-高中-33概率-事件的关系与运算

原作者视频&#xff1a;【概率】【一数辞典】2事件的关系与运算_哔哩哔哩_bilibili 事件&#xff1a; 和/并事件&#xff1b;积/交事件&#xff1b;互诉事件&#xff1b;对立(补集)事件&#xff1b;...

编程日记 2024/3/3 22:46:07

数据结构：链队

一、定义两个结构体 定义两个结构体,一个结构体是结点的结构体&#xff0c;一个结构体是保留指向对头结点和队尾结点指针的结构体 #ifndef __LINK_QUEUE_H__ #define __LINK_QUEUE_H__ #include <stdio.h> #include <stdlib.h>typedef struct link_node{int data…...

编程日记 2024/3/3 22:44:06

十四、计算机视觉-形态学梯度

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、梯度的概念二、梯度的应用三、梯度如何实现 一、梯度的概念 形态学梯度&#xff08;Morphological Gradient&#xff09;是数字图像处理中的一种基本操作&…...

编程日记 2024/3/3 22:42:04

3月03日，每日信息差

&#x1f396; 素材来源官方媒体/网络新闻 &#x1f384; 国产商用飞机C919及ARJ21首次飞抵老挝 &#x1f30d; 北京将打造新一批智能工厂 &#x1f30b; 阿里云将于3月29日停止商标代理服务 &#x1f381; 起亚在美因远光灯故障召回3.5万辆Telluride汽车 ✨ 天涯社区拟5月1日前…...

编程日记 2024/3/3 22:41:03

leetcode 简单

1. 两数之和 两数之和 方法1&#xff1a;暴力枚举 两次for 循环&#xff0c;记录索引和值&#xff0c;找到合适的值然后返回 方法2&#xff1a;使用哈希表 第一次for循环的时候&#xff0c;就可以使用哈希表记录key的value&#xff0c;可以实现时间复杂度是1&#xff0c;要分…...

编程日记 2024/3/3 22:40:01

服务器硬件基础知识全解析

在信息技术日新月异的今天&#xff0c;服务器作为数据处理和存储的核心&#xff0c;其重要性不言而喻。了解服务器硬件基础知识&#xff0c;对于IT从业者以及广大技术爱好者来说&#xff0c;都是不可或缺的技能。本文将详细解析服务器硬件的基础知识&#xff0c;帮助读者建立起…...

编程日记 2024/3/3 22:39:00

python毕设选题 - 大数据商城人流数据分析与可视化 - python 大数据分析

文章目录 0 前言课题背景分析方法与过程初步分析&#xff1a;总体流程&#xff1a;1.数据探索分析2.数据预处理3.构建模型 总结 最后 0 前言 &#x1f525; 这两年开始毕业设计和毕业答辩的要求和难度不断提升&#xff0c;传统的毕设题目缺少创新和亮点&#xff0c;往往达不到…...

编程日记 2024/3/3 22:37:59

vmware网络负载均衡方式

基于 IP 哈希的路由&#xff1a; 原理&#xff1a; 基于虚拟机的源和目标 IP 地址以及 TCP/UDP 端口号计算哈希值&#xff0c;并使用该哈希值确定出口网络适配器。这样可以确保同一对源和目标的网络流量始终被路由到相同的网络适配器。应用场景&#xff1a; 适用于大量使用虚拟…...

编程日记 2024/3/3 22:35:58

Docker基础教程 - 2 Docker安装

更好的阅读体验&#xff1a;点这里 &#xff08; www.doubibiji.com &#xff09; 2 Docker安装 Docker 的官网地址&#xff1a;https://www.docker.com/&#xff0c;在官网可以找到 Docker Engine 的安装步骤。 下面进行 Docker 环境的安装&#xff0c;正常情况下 Docker …...

编程日记 2024/3/3 22:34:57

Android 多桌面图标启动, 爬坑点击打开不同页面

备注 &#xff1a; MainActivity 正常带界面的UI MainActivityBt 和 MainActivityUsb 是透明的&#xff0c;即 android:theme"style/TranslucentTheme" ###场景1:只有MainActivity 设置成&#xff1a;android:launchMode"singleTask" 点击顺序&#xff1…...

编程日记 2024/3/3 22:33:55

2024-3-1-网络编程作业

1>操控机械臂&#xff1a; 通过w(红色臂角度增大)s&#xff08;红色臂角度减小&#xff09; d&#xff08;蓝色臂角度增大&#xff09;a&#xff08;蓝色臂角度减小&#xff09;按键控制机械臂 源代码&#xff1a; #include <myhead.h> #define minStep 10 //最小偏…...

编程日记 2024/3/3 22:32:55

pytorch基础2-数据集与归一化

专题链接&#xff1a;https://blog.csdn.net/qq_33345365/category_12591348.html 本教程翻译自微软教程&#xff1a;https://learn.microsoft.com/en-us/training/paths/pytorch-fundamentals/ 初次编辑&#xff1a;2024/3/2&#xff1b;最后编辑&#xff1a;2024/3/2 本教程…...

编程日记 2024/3/3 22:31:53

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

编程新知 2025/11/16 8:24:16

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

编程新知 2026/1/14 19:13:45

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战 一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的​​一体化测试平台​​&#xff0c;覆盖应用全生命周期测试需求&#xff0c;主要提供五大核心能力&#xff1a; ​​测试类型​​​​检测目标​​​​关键指标​​功能体验基…...

编程新知 2026/1/14 23:34:03

Mybatis逆向工程，动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件

今天呢&#xff0c;博主的学习进度也是步入了Java Mybatis 框架&#xff0c;目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学&#xff0c;希望能对大家有所帮助&#xff0c;也特别欢迎大家指点不足之处&#xff0c;小生很乐意接受正确的建议&…...

编程新知 2026/1/15 5:21:25

转转集团旗下首家二手多品类循环仓店“超级转转”开业

6月9日&#xff0c;国内领先的循环经济企业转转集团旗下首家二手多品类循环仓店“超级转转”正式开业。 转转集团创始人兼CEO黄炜、转转循环时尚发起人朱珠、转转集团COO兼红布林CEO胡伟琨、王府井集团副总裁祝捷等出席了开业剪彩仪式。 据「TMT星球」了解&#xff0c;“超级…...

编程新知 2026/1/15 6:40:37

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

编程新知 2025/11/21 22:02:37

网络编程（UDP编程）

思维导图 UDP基础编程&#xff08;单播&#xff09; 1.流程图 服务器&#xff1a;短信的接收方 创建套接字 (socket)-----------------------------------------》有手机指定网络信息-----------------------------------------------》有号码绑定套接字 (bind)--------------…...

编程新知 2026/1/15 0:24:54

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

音视频——I2S 协议详解

I2S 协议详解 I2S (Inter-IC Sound) 协议是一种串行总线协议&#xff0c;专门用于在数字音频设备之间传输数字音频数据。它由飞利浦&#xff08;Philips&#xff09;公司开发&#xff0c;以其简单、高效和广泛的兼容性而闻名。 1. 信号线 I2S 协议通常使用三根或四根信号线&a…...

编程新知 2025/10/7 0:04:52

DingDing机器人群消息推送

文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人&#xff0c;点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置&#xff0c;详见说明文档 成功后&#xff0c;记录Webhook 2 API文档说明 点击设置说明 查看自…...

编程新知 2026/1/15 5:02:25