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

javascript实现的星座查询

news 2026/2/10 1:06:26

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

1688商品列表API与其他数据源的对接思路

将1688商品列表API与其他数据源对接时&#xff0c;需结合业务场景设计数据流转链路&#xff0c;重点关注数据格式兼容性、接口调用频率控制及数据一致性维护。以下是具体对接思路及关键技术点&#xff1a; 一、核心对接场景与目标 商品数据同步 场景&#xff1a;将1688商品信息…...

编程新知 2025/11/30 16:55:32

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

编程新知 2026/2/1 7:31:51

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

【7色560页】职场可视化逻辑图高级数据分析PPT模版

7种色调职场工作汇报PPT&#xff0c;橙蓝、黑红、红蓝、蓝橙灰、浅蓝、浅绿、深蓝七种色调模版 【7色560页】职场可视化逻辑图高级数据分析PPT模版&#xff1a;职场可视化逻辑图分析PPT模版https://pan.quark.cn/s/78aeabbd92d1...

编程新知 2026/1/23 12:22:14

Netty从入门到进阶（二）

二、Netty入门 1. 概述 1.1 Netty是什么 Netty is an asynchronous event-driven network application framework for rapid development of maintainable high performance protocol servers & clients. Netty是一个异步的、基于事件驱动的网络应用框架&#xff0c;用于…...

编程新知 2026/1/26 5:44:16

【Redis】笔记｜第8节｜大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...

编程新知 2026/1/26 3:45:28

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2026/1/31 8:55:37

苹果AI眼镜：从“工具”到“社交姿态”的范式革命——重新定义AI交互入口的未来机会

在2025年的AI硬件浪潮中，苹果AI眼镜（Apple Glasses）正在引发一场关于“人机交互形态”的深度思考。它并非简单地替代AirPods或Apple Watch，而是开辟了一个全新的、日常可接受的AI入口。其核心价值不在于功能的堆叠，而在于如何通过形态设计打破社交壁垒，成为用户“全天佩戴…...

编程新知 2025/12/22 12:09:15

uniapp 小程序 学习（一）

利用Hbuilder 创建项目 运行到内置浏览器看效果 下载微信小程序 安装到Hbuilder 下载地址 &#xff1a;开发者工具默认安装 设置服务端口号 在Hbuilder中设置微信小程序 配置 找到运行设置&#xff0c;将微信开发者工具放入到Hbuilder中&#xff0c; 打开后出现 如下 bug 解…...

编程新知 2026/2/5 4:29:00

API网关Kong的鉴权与限流：高并发场景下的核心实践

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 引言 在微服务架构中&#xff0c;API网关承担着流量调度、安全防护和协议转换的核心职责。作为云原生时代的代表性网关&#xff0c;Kong凭借其插件化架构…...

编程新知 2025/9/6 9:35:29