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

javascript实现的星座查询

news 2025/8/15 16:37:24

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

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

编程新知 2025/8/14 13:27:02

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/8/9 21:49:11

macOS多出来了：Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

编程新知 2025/8/7 4:20:59

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

编程新知 2025/8/6 0:15:52

【C++从零实现Json-Rpc框架】第六弹 —— 服务端模块划分

一、项目背景回顾 前五弹完成了Json-Rpc协议解析、请求处理、客户端调用等基础模块搭建。 本弹重点聚焦于服务端的模块划分与架构设计&#xff0c;提升代码结构的可维护性与扩展性。 二、服务端模块设计目标 高内聚低耦合&#xff1a;各模块职责清晰&#xff0c;便于独立开发…...

编程新知 2025/7/8 14:06:13

安卓基础（aar）

重新设置java21的环境&#xff0c;临时设置 $env:JAVA_HOME "D:\Android Studio\jbr" 查看当前环境变量 JAVA_HOME 的值 echo $env:JAVA_HOME 构建ARR文件 ./gradlew :private-lib:assembleRelease 目录是这样的&#xff1a; MyApp/ ├── app/ …...

编程新知 2025/6/21 1:43:55

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2025/8/14 18:46:40

LangChain知识库管理后端接口：数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

编程新知 2025/6/21 3:02:00

MySQL 知识小结（一）

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

编程新知 2025/8/15 6:13:52

腾讯云V3签名

想要接入腾讯云的Api&#xff0c;必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口&#xff0c;但总是卡在签名这一步&#xff0c;最后放弃选择SDK&#xff0c;这次终于自己代码实现。 可能腾讯云翻新了接口文档&#xff0c;现在阅读起来&#xff0c;清晰了很多&…...

编程新知 2025/7/5 14:21:20