html,css,js实现星座,属相测算小程序

声明:感谢刘同学的判断代码

图片文件路径自己设定

页面效果:

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>/*ease-in-out渐入渐出*/.box .img{animation:turn 30s ease-in-out infinite;}/* 动画 */@keyframes turn{100%{ transform:rotate(7200deg);}}</style></head><body><div style="background:skyblue; width: 500px; height: 250px;"><div style="float: left; width: 250px;height: 290px; "><p>出生年份:<input type="text" style="width: 90px;" id="year"></p><p>出生月份:<select style="width: 90px;" id="month"><option value="1">1</option><option value="2">2</option><option value="3">3</option><option value="4">4</option><option value="5">5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option><option value="11">11</option><option value="12">12</option></select></p><p>出生天数:<input type="text" style="width: 90px;" id="day"></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;星座: <input type="text" style="width: 90px;" id="xz"></p><p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;属相: <input type="text" style="width: 90px;" id="sx"></p><button style="margin-top:10px;margin-left:50px;background:gold;" onclick="getsx()">计算一下</button></div><div style="float:left; margin-top:30px;" class="box"><img class="img" src="img/bgt.png" width="180px" height="180px"></div></div><script>function getsx(){var a = document.getElementById('year').valuevar b= document.getElementById('month').valuevar c = document.getElementById('day').valuevar a11 = (a-1924) % 12switch(a11){case 0:xz.value = "鼠"breakcase 1:xz.value = "牛"breakcase 2:xz.value = "虎"breakcase 3:xz.value = "兔"breakcase 4:xz.value = "龙"breakcase 5:xz.value = "蛇"breakcase 6:xz.value = "马"breakcase 7:xz.value = "羊"breakcase 8:xz.value = "猴"breakcase 9:xz.value = "鸡"breakcase 10:xz.value = "狗"breakcase 11:xz.value = "猪"break}if((b == 3 && c>=21)||(b == 4 && c<=19)){sx.value = "白羊座"}else if((b == 4 && c>=20)||(b == 5 && c<=20)){sx.value = "金牛座"}else if((b == 5 && c>=21)||(b == 6 && c<=20)){sx.value = "双子座"}else if((b == 6 && c>=21)||(b == 7 && c<=21)){sx.value = "巨蟹座"}else if((b == 7 && c>=22)||(b == 8 && c<=22)){sx.value = "狮子座"}else if((b == 8 && c>=23)||(b == 9 && c<=22)){sx.value = "处女座"}else if((b == 9 && c>=23)||(b == 10 && c<=22)){sx.value = "天秤座"}else if((b == 10 && c>=23)||(b == 11 && c<=21)){sx.value = "天蝎座"}else if((b == 11 && c>=22)||(b == 12 && c<=21)){sx.value = "射手座"}else if((b == 12 && c>=22)||(b == 1 && c<=19)){sx.value = "摩羯座"}else if((b == 1 && c>=20)||(b == 2 && c<=18)){sx.value = "水瓶座"}else if((b == 2 && c>=19)||(b == 3 && c<=20)){sx.value = "双鱼座"}}</script></body>
</html>

html,css,js实现星座,属相测算小程序相关推荐

css3情侣游戏,11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】...
情人节表白可爱小游戏.小动画我要悄悄学习,做一个浪漫的程序员 1.小鹿亲嘴 2.变成小猫 3.爱心表白 4.爱心溢出 5.思念如马 6.霓虹灯爱心 7.3D旋转相册 8.用不同的语言说"爱 ...
html+css+js实现狼吃羊小游戏
html+css+js实现狼吃羊小游戏一.总结一句话总结:给动的元素下标记,这里表现为将要活动的标签动态增加class,这是一种很好的思想. 1.如何实现棋子走动的时候简单精确定位? 用重构坐标系 ...
TensorFlow.js：零基础在小程序上实现机器学习
本课程主要介绍了如何将TensorFlow.js插件嵌入到微信小程序中,并基于其进行开发.课程中以一个姿态检测的模型PoseNet作为案例,介绍了TensorFlow.js插件导入到微信小程序开发工具 ...
node mysql商城开发_ＮideShop：基于Node.js+MySQL开发的微信小程序商城开源啦
NideShop:基于Node.js+MySQL开发的微信小程序商城开源啦发布时间:2020-04-14 04:23:37 来源:51CTO 阅读:2894 作者:ch10mmt 高仿网易严选的微信 ...
还不错的星座运势小程序源码下载+云开发无需服务器
0 正文: 有兴趣的自行去研究吧,前端UI方面没得说,很好看的. 下方是介绍: 还不错的星座运势小程序源码下载+云开发无需服务器,一款星座运势源码,搭建非常简单,有一个小程序加上合法域名,然后替换流量 ...
云开发【星座测评小程序+流量主】星座运势小程序源码
介绍: 云开发[星座测评小程序+流量主]星座运势小程序源码网盘下载地址: http://kekewl.org/8eYJU8RB6C90 图片:
HTML+CSS+JS制作【俄罗斯方块】小游戏
文章目录 js制作简单网页版俄罗斯方块效果演示设计思路一.HTML网页结构代码二.CSS代码三.JS代码四.代码资源分享 js制作简单网页版俄罗斯方块程序虽然很难写,却很美妙.要想把程序 ...
用HTML+CSS+JS写的切水果小游戏它来了
前言切水果游戏曾经是一款风靡手机的休闲游戏,今天要分享的就是一款网页版的切水果游戏, 由HTML+CSS+JS实现,虽然功能和原版的相差太大,但基本的功能具备,效果逼真.感兴趣的小伙伴可收藏学习(完 ...
纯html+css+js高仿苹果手机时钟小组件
话不多数说,这是一款用html+css+js开发的高仿苹果手机时钟组件, 作者将苹果的小组件移植到浏览器插件中,可以在BdTab插件安装该组件 HTML <div style="wid ...

html,css,js实现星座,属相测算小程序

html,css,js实现星座,属相测算小程序相关推荐

最新文章

热门文章