admin管理员组文章数量:1122924
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> 星座: <input type="text" style="width: 90px;" id="xz"></p><p> 属相: <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实现星座,属相测算小程序 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1702319592a577615.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论