需要这三张图片如果要实现一丅,直接另存这三图片引入进去即可如果不会请修改成对应的图片名字,放到同一个文件下
1,通过设置CSS样式的position属性z-index属性等实现背景圖,转盘图与指针图的层叠摆放;
css和HTML代码不多主要是为了实现过渡设置,还有为了实现层叠而使用position定位让元素脱离文档流,js代码在于獲取元素和事件的点击点击指针会旋转,所以要给指针加个点击事件然后是判断旋转是否停止,如果没有就点击也不能调用函数ratating()这個函数执行转盘的旋转和判断指针停在什么位置,然后弹出相应的内容而函数里实现旋转的过程,是获取转盘的元素然后使用js控制css的屬性-transform:rotate(),我们不是使用过这个属性在css里直接使它实现旋转的效果吗就是和伪类选择器:hover及过渡属性一起使用去实现的,那么因为css实现不了數字的运算和鼠标点击所以让js去实现且控制css属性,实现到点击旋转这个功能然而定时器的使用暂时不说,思路就是使用js实现数字的运算和鼠标的点击及css属性的控制达到旋转的效果