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

javascript实现的星座查询

news 2026/4/9 20:13:40

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

镜像孪生系统总体技术方案白皮书——基于三维空间计算的全域视频智能感知与决策平台

镜像孪生系统总体技术方案白皮书——基于三维空间计算的全域视频智能感知与决策平台发布单位&#xff1a;镜像视界&#xff08;浙江&#xff09;科技有限公司 版本&#xff1a;V1.0 日期&#xff1a;2026年&#x1f4cc; 摘要随着智慧城市、公共安全与数字政府建设的不断推进&a…...

编程新知 2026/4/9 20:07:27

英伟达 Blackwell Ultra 正式量产：20 PFLOPS 单机柜算力

前言4月7日&#xff0c;英伟达正式宣布 Blackwell Ultra&#xff08;GB300&#xff09;量产出货。这条消息在技术圈炸开的速度&#xff0c;比很多人预期的快。简单说数字&#xff1a;单机柜 FP8 算力 20 PFLOPS&#xff0c;比 H100 提升约 8 倍&#xff0c;能效比提升 5 倍。这…...

编程新知 2026/4/9 19:51:01

运维基础入门到精通，收藏这篇就够了

运维基础入门到精通&#xff0c;收藏这篇就够了 运维基础 一、运维概述 1、运维岗位的收入情况 &#xfffc; &#xfffc; 2、运维的职位定义 什么是运维&#xff1f; 在技术人员之间&#xff0c;一致对运维有一个开玩笑的认知&#xff1a;运维就是修电脑的、装网线的、背锅的…...

编程新知 2026/4/9 19:42:54

从领域驱动到本体论：AI 时代的架构方法论变了必

从0构建WAV文件&#xff1a;读懂计算机文件的本质 虽然接触计算机有一段时间了&#xff0c;但是我的视野一直局限于一个较小的范围之内&#xff0c;往往只能看到于算法竞赛相关的内容&#xff0c;计算机各种文件在我看来十分复杂&#xff0c;认为构建他们并能达到目的是一件困难…...

编程新知 2026/4/9 18:20:28

Agent 时代的 PM 新能力：从写需求到写“策略与约束”

Agent 时代的 PM 新能力&#xff1a;从写“确定型需求说明书”到写“自主决策策略与约束引擎”摘要/引言 开门见山的“反常识”痛点&#xff1a;你的PRD正在成为Agent的“自动驾驶障碍门” 2024年下半年&#xff0c;我在硅谷拜访了一家A轮融资额破2亿美金的AI Native SaaS公司—…...

编程新知 2026/4/9 18:14:27

分析Python条件变量如何暂停和唤醒线程

在开始前&#xff0c;先了解一下基本使用 Condition Condition 本质上是一个带有等待队列的锁&#xff0c;它封装了&#xff1a; 一个底层锁&#xff08;Lock 或 RLock&#xff09;一个等待者队列&#xff08;_waiters&#xff09; 核心方法方法作用wait(timeout)释放锁并阻塞等…...

编程新知 2026/4/9 17:29:59

OpenClaw备份恢复方案：千问3.5-35B-A3B-FP8任务配置的迁移技巧

OpenClaw备份恢复方案&#xff1a;千问3.5-35B-A3B-FP8任务配置的迁移技巧 1. 为什么需要备份OpenClaw配置 上周我的主力开发机突然硬盘故障&#xff0c;导致所有数据丢失。最让我痛心的不是代码&#xff0c;而是精心调校了三个月的OpenClaw自动化工作流——包括对接千问3.5模…...

编程新知 2026/4/9 17:19:50

【限时技术内参】EF Core团队内部测试报告流出：向量搜索启用后DbContext并发吞吐量下降41%的根因与热修复补丁

第一章&#xff1a;Entity Framework Core 10 向量搜索扩展 避坑指南Entity Framework Core 10 原生未提供向量搜索能力&#xff0c;需依赖第三方扩展&#xff08;如 EFCore.Vector 或数据库原生支持&#xff09;实现相似性检索。开发者常因忽略底层向量存储格式、索引策略或查…...

编程新知 2026/4/9 17:09:46

三菱Fx3U三轴定位控制程序，完美结合梯形图与St语言，动态码加密保护方案

三菱Fx3U三轴定位控制程序&#xff0c;其中两轴为脉冲输出同步运行360度转盘&#xff0c;3轴为工作台丝杆。 1.本程序结构清晰&#xff0c;有公共程序&#xff0c;原点回归&#xff0c;手动点动运行&#xff0c;手动微动运行。 报警程序&#xff0c;参数初始化程序等。 2.自动程…...

编程新知 2026/4/9 17:03:36

webflux接收application/x-www-form-urlencoded参数

记录开发中遇到的问题 请求方式&#xff1a;需要用如下方式接收&#xff1a; 方式1PostMapping(value "/user/logout", consumes "application/x-www-form-urlencoded")public ResponseResult logoutForAuthSystem(ServerWebExchange exchange) {exchang…...

编程新知 2026/4/9 16:58:53