介绍 & lt; script 类型=拔谋?javascript" https://www.yisu.com/zixun/, src=" jquery-1.8.3.min.js ">
<风格类型=/css文本>
.wrap{宽度:90 px;身高:90 px;保证金:120 px汽车30 px汽车;位置:相对}
.dice{宽度:90 px;身高:90 px;背景:url (dice.png)不再重演;}
.dice_1{背景位置:5 px 4 px}
.dice_2{背景位置:5 px -107 px}
.dice_3{背景位置:5 px -212 px}
.dice_4{背景位置:5 px -317 px}
.dice_5{背景位置:5 px -427 px}
.dice_6{背景位置:5 px -535 px}
.dice_t{背景位置:5 px -651 px}
.dice_s{背景位置:5 px -763 px}
.dice_e{背景位置:5 px -876 px}
结果p # {text-align:中心;字体大小:16 px}
p #结果跨度{粗细:大胆的;颜色:# + 30;保证金:6 px}
# dice_mask{宽度:90 px;身高:90 px;背景:# fff;透明度:0;位置:绝对的;
上图:0;左:0;z - index: 999}> 脚本
$(函数(){
var骰子=$(" #骰子");
dice.click(函数(){
dice.attr(“类”、“骰子”);//清除上次动画后的点数
dice.css(“光标”,“默认”);
$ (" .wrap”)。追加(“ ");//加遮罩
var num=Math.floor (math . random() * 6 + 1);//产生随机数1 - 6
骰子。动画({左:“+ 2 px”}, 100年,函数(){
dice.addClass (“dice_t”);
}).delay (200) .animate ({: 2 px的},100年,函数(){
dice.removeClass .addClass (“dice_t”) (“dice_s”);
}).delay (200) .animate({不透明度:“秀”},600年,函数(){
dice.removeClass .addClass (“dice_s”) (“dice_e”);
}).delay (100) .animate({左:“2 px”:“2 px”}, 100年,函数(){
dice.removeClass .addClass (“dice_e”) (“dice_”+ num);
$(" #结果”). html(“您掷得点数是 " + num + " ");
dice.css(“光标”,“指针”);
$ (" # dice_mask ") .remove();//移除遮罩
});
});
});
& lt; body>
& lt; div id=癲ice",类=癲ice dice_1"祝辞& lt;/div>,
& lt; p id=皉esult"祝辞请直接点击上面的色子! & lt;/p>
& lt;/body> jQuery是什么
这篇文章主要介绍了如何使用jQuery实现掷骰子游戏,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
本文实例为大家分享了jQuery实现掷骰子游戏的具体代码,供大家参考,具体内容如下
直接新建一个html页面,需要在头脑中引入jQuery, js,一些css代码以及js代码,如下:
其中要注意的jquery引入的路径,我是放在和该页面的相同路径下的。
页面体的代码如下:
需要额外的引入所有状态骰子的图片,注意图片名称
jQuery是一个简洁而快速的JavaScript库,它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器,并且可对css选择器进行扩展,拥有便捷的插件扩展机制和丰富的插件,是继原型之后又一个优秀的JavaScript代码库,能够用于简化事件处理,HTML文档遍历,Ajax交互和动画,以便快速开发网站。
感谢你能够认真阅读完这篇文章,希望小编分享的“如何使用jQuery实现掷骰子游戏”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
