javascript实现的星座查询

蒲公英1001

于 2024-03-03 21:50:06 发布

阅读量1.1k

点赞数 26

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/wangyining070205/article/details/136438984

版权

本文介绍了作者在网站上看到的星座查询功能的实现过程，包括HTML表单设计、CSS美化和JavaScript中的月份判断与switch语句应用，以及输入验证的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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