头条网站开发,网站建设手机app,自己开发app的软件下载,网页设计实训总结1500字通用今天在这个网站http://xzxys.wiicha.com/看到查询星座幸运色的效果#xff0c;想研究一下代码#xff0c;结果右键禁用。后来参考了一下别人的代码#xff0c;琢磨着先实现了一下星座查询的功能#xff0c;输入月份和日期四位数后#xff0c;可以查询属于哪个星座#xf…今天在这个网站http://xzxys.wiicha.com/看到查询星座幸运色的效果想研究一下代码结果右键禁用。后来参考了一下别人的代码琢磨着先实现了一下星座查询的功能输入月份和日期四位数后可以查询属于哪个星座星座效果如下。 用CSS代码美化了一下输入框js代码主要是使用了indexOf判断是否有不合法输入对这个方法用得不太熟特意拿来练手12个月份使用switch语句判断。完整代码如下
!doctype html
htmlheadmeta charsetutf-8title星座查询/titlestyle* {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/headbodyh2请输入您的生日示例:12月26日输入12263月5日请输入0305/h2div idinquireinput typetext idinputstarinput typebutton value查询星座 onclickqueryStar() idbtn1 //divdiv classstar/divscriptfunction 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
