昨天学了js的控制css样式，自己做了个算卦小程序

运行效果如下

html代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>算卦小程序</title>
</head>
<script src="js/jquery.min.js"></script>
<script src="js/game.js"></script>
<link rel="stylesheet" type="text/css" href="Style.css">
<body>
<div id="container"><div id="wrap"><div id="pan3"><div id="gua1"></div><div id="gua2"></div><div id="guawen"><h2 id="xiang"> </h2></div></div><img id="pan1" src="data:images/面.png"><img src="data:images/白鱼.png" id="fishwith"><img id="pan2" src="data:images/面.png"><img src="data:images/黑鱼.png" id="fishblack"></div><div id="Buttom">来一挂</div>
</div>
<footer>By：JB</footer>
</body>
</html>

css

@charset "utf-8";
/* CSS Document */
#container{width:800px;margin:100px auto;height:500px;
}
#wrap{width:750px;height:250px;background:url(images/%E5%BA%95.png) repeat;position:relative;
}
#pan1{width:250px;height:250px;background:url(images/%E9%9D%A2.png) no-repeat;left:0px;position:absolute;transition-duration:1s;-moz-transition-duration:1s;-ms-transition-duration:1s;-o-transition-duration:1s;-webkit-transition-duration:1s;
}
#pan2{width:250px;height:250px;background:url(images/%E9%9D%A2.png) no-repeat;margin-right:auto;position:absolute;right:0px;transition-duration:1s;-moz-transition-duration:1s;-ms-transition-duration:1s;-o-transition-duration:1s;-webkit-transition-duration:1s;
}
#pan3{width:220px;height:250px;position:absolute;left:275px;top:10px;background:url(images/%E4%B8%AD%E5%BA%95.png);
}
#guawen{position:absolute;top:145px;text-align:center;width:210px;
}
#gua1{width:90px;height:70px;position:absolute;top:3px;left:63px;
}
#gua2{width:90px;height:70px;position:absolute;top:75px;left:63px;
}
#fishwith{position:absolute;width:100px;height:100px;background:url(images/%E7%99%BD%E9%B1%BC.png) no-repeat;left:75px;top:75px;transition-duration:2s;-moz-transition-duration:2s;-ms-transition-duration:2s;-o-transition-duration:2s;-webkit-transition-duration:2s;
}
#fishblack{position:absolute;left:575px;top:75px;transition-duration:2s;-moz-transition-duration:2s;-ms-transition-duration:2s;-o-transition-duration:2s;-webkit-transition-duration:2s;}
#Buttom{width:150px;height:60px;border:#000 1px solid;text-align:center;line-height:60px;border-radius:40%;background:#f1f1f1;box-shadow:#000 3px 3px 10px ;margin:20px auto;cursor:pointer;overflow:hidden;
}
footer{text-align:center;bottom:0px;
}

javascript

var guaxiang=[
['乾为天','天泽履','天火同人','天雷无妄','天风垢','天水讼','天山遁','天地否'],
['泽天夬','兑为泽','泽水革','泽雷随','泽风大过','泽水困','泽山咸','泽地萃'],
['火天大有','火泽睽','离为火','火雷筮盍','火风鼎','火水未济','火山旅','火地晋'],
['雷天大壮','雷泽归妹','雷火丰','震为雷','雷风恒','雷水解','雷山小过','雷地豫'],
['风天小畜','风泽中孚','风火家人','风雷益','巽为风','风水涣','风山渐','风地观'],
['水天需','水泽节','水火既济','水雷屯','水风井','坎为水','水山蹇','水地比'],
['山天大畜','山泽损','山火贲','山雷颐','山风蛊','山水蒙','艮为山','山地剥'],
['地天泰','地泽临','地火明夷','地雷复','地风升','地水师','地山谦','坤为地'],];
var baixiang=1;
var heixiang =1;$(document).ready(function(e) {zhuanpan();});
function zhuanpan(){$('#Buttom').click(function(e){$('#Buttom').css('display','none');/*点击按钮时初始化中间面板并且隐藏按钮，避免重复点击*/$('#gua2').css('background','none');$('#gua1').css('background','none');$('#xiang').html(" ");var  quan1=Math.floor(Math.random()*3600);/*获取随机数*/var  quan2=Math.floor(Math.random()*3600);$('#pan1').css('transform','rotate('+quan1*2+'deg)');/*挂盘先转随机数的两倍度数*/$('#pan2').css('transform','rotate('+quan2*2+'deg)');setTimeout(function(){$('#pan1').css('transform','rotate('+quan1+'deg)');$('#pan2').css('transform','rotate('+quan2+'deg)');/*挂盘再转回随机数度数*/quan1%=360/*挂盘转N圈后所在的位置*/quan2%=360setTimeout(function(){/*黑白鱼中间结合*/$('#fishwith').css('top','40px');$('#fishwith').css('left','335px');$('#fishblack').css('top','40px');$('#fishblack').css('left','335px');$('#fishblack').css('transform','rotate(180deg)');setTimeout(function(){/*黑白鱼分开回到原来位置*/$('#fishwith').css('top','75px');$('#fishwith').css('left','75px');$('#fishblack').css('top','75px');$('#fishblack').css('left','575px');$('#fishblack').css('transform','rotate(0deg)');setTimeout(function(){if(quan1<22){/*根据黑白鱼鱼头所指卦象中间显示卦象*/$('#gua1').css('background','url(images/1.png)');baixiang=0;}else if(quan1<67){$('#gua1').css('background','url(images/2.png)');baixiang=1;}else if(quan1<112){$('#gua1').css('background','url(images/3.png)');baixiang=2;}else if(quan1<157){$('#gua1').css('background','url(images/4.png)');baixiang=3;}else if(quan1<202){$('#gua1').css('background','url(images/8.png)');baixiang=7;}else if(quan1<247){$('#gua1').css('background','url(images/7.png)');baixiang=6;}else if(quan1<292){$('#gua1').css('background','url(images/6.png)');baixiang=5;}else if(quan1<337){$('#gua1').css('background','url(images/5.png)');baixiang=4;}else if(quan1<360){$('#gua1').css('background','url(images/1.png)');baixiang=0;}if(quan2<22){$('#gua2').css('background','url(images/1.png)');heixiang=0;}else if(quan2<67){$('#gua2').css('background','url(images/2.png)');heixiang=1;}else if(quan2<112){$('#gua2').css('background','url(images/3.png)');heixiang=2;}else if(quan2<157){$('#gua2').css('background','url(images/4.png)');heixiang=3;}else if(quan2<202){$('#gua2').css('background','url(images/8.png)');heixiang=7;}else if(quan2<247){$('#gua2').css('background','url(images/7.png)');heixiang=6;}else if(quan2<292){$('#gua2').css('background','url(images/6.png)');heixiang=5;}else if(quan2<337){$('#gua2').css('background','url(images/5.png)');heixiang=4;}else if(quan2<360){$('#gua2').css('background','url(images/1.png)');heixiang=0;}$('#xiang').html(guaxiang[baixiang][heixiang]);/*显示卦象*/$('#Buttom').css('display','block');$('#Buttom').html('再来一卦');},300)},2000)},1000)},1000)});
}
/*-------参考：csdn 知识库 html5  课程> 移动开发> HTML 5> HTML5之新增标签，CSS3，js特效 第三章 8.8抽奖的功能-------*/
/*作者：JB*/

昨天学了js的控制css样式，自己做了个算卦小程序相关推荐

js变量控制css样式
start 记录一下,如何使用 js 代码控制样式. css3 自带的 var <!DOCTYPE html> <html lang="en"><he ...
JS控制CSS样式语法对照
CSS与JS紧密配合,为我们的页面增添了很多别致的效果.为了达到某种特殊的效果我们需要用Javascript动态的去更改某一个标签的CSS属性. 例如常用的关闭某个漂浮的广告显示:document.g ...
使用js控制css样式
使用js控制css样式 js拥有很多强大的功能,这里就说一下它的一个控制css最基础的功能,代码如下: <!DOCTYPE html> <html lang="en&quo ...
css view a if属性,uni-app学习笔记（2）view属性控制css样式
uni-app学习笔记(2)view属性控制css样式 uniapp通过标签属性来改变样式当鼠标按下去的时候,他会变成这个样式 hover-class="box-active" ...
常用CSS与Flex布局、媒体查询、JS事件控制css、VUE对象语法、Gride布局(待补全) CSS权重页面适配笔记本缩放
css属性就是要用的多用的熟知道的多就像一本工具书除了基础原理剩下的就是知识面了极力推荐MDN用过的人都说好~ 页面适配笔记本等自带缩放的场景 let t = window.devicePi ...
JS添加/修改CSS样式
JS添加/修改CSS样式是通过.style.xxxx属性=值来实现的,记得是等号赋值. document.getElementById("xx").style.xxx=xxxxx; ...
如何通过js改变css样式,如何通过JS 动态改变CSS样式
如何通过JS 动态改变CSS样式0 豆豆dou...2013.09.15浏览640次分享举报 .TLIWREGION3CSS { position:absolute; left:32px; top:4 ...
js 设置html标签样式表,js怎么设置css样式？
js怎么设置css样式?本篇文章就给大家介绍js设置css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 1.直接设置style对象(内联样式) 使用JavaScript ...
js函数改变html样式,js可以改css样式吗？
js可以改css样式.在很多情况下,都需要对网页上元素的样式进行动态的修改:而JavaScript可以动态的修改样式.下面本篇文章就来给大家介绍几种JavaScript中修改CSS样式的方法,希望对大 ...

昨天学了js的控制css样式，自己做了个算卦小程序

昨天学了js的控制css样式，自己做了个算卦小程序相关推荐

最新文章

热门文章