1.准备几张可爱的照片素材

(1)bu.png

(2)jaindao.png

(3)shitou.png

(4)daiding.png

2.代码实现

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1,user-scalable=no"/><style type="text/css">*{margin: 0px;padding: 0px;}#body{width: 100%;height: 700px;max-width: 500px;margin: 0 auto;background-color: #FAE738;overflow: hidden;}#tips{margin-top: 40px;text-align: center;color: white;font-size: 36px;font-weight: bold;}#imgs{width: 90%;margin: 20px auto;display: flex;justify-content: space-around;border-radius: 50%;}#jieguo{width: 90%;margin: 30px auto;display: flex;justify-content: space-around;}#jieguo .jieguo div{height: 30px;width: 89px;line-height: 30px;text-align: center;color: white;}#jieguo .jieguo img{height: 89px;}#jieguo .pk{height: 120px;line-height: 120px;font-size: 48px;font-weight: bold;}#score,#scoreFen{text-align: center;font-size: 24px;color: red;padding-top: 10px;}</style></head><body><div id="body"><div id="tips">请选择</div><div id="imgs" style="border-radius: 50%;"><img src="img/shitou.png" id="shitou" style="border-radius: 50%;margin-left: 20px; width: 150px;height: 150px;" /><img src="img/jiandao.png" id="jiandao" style="border-radius: 50%;margin-left: 20px; width: 150px;height: 150px;" /><img src="img/bu.png" id="bu" style="border-radius: 50%;margin-left: 20px; width: 150px;height: 150px;" /></div><div id="jieguo"><div class="jieguo"><div>您选择了</div><img src="img/daiding.png" id="myImg" style="border-radius: 50%;margin-left: 20px; width: 150px;height: 150px;"/></div><div class="pk">PK</div><div class="jieguo"><div>系统选择了</div><img src="img/daiding.png" id="computer" style="border-radius: 50%;margin-left: 20px; width: 150px;height: 150px;" /></div></div><div id="score">等待结果中....</div><div id="scoreFen"><span>00</span>：<span>00</span></div></div><script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("#imgs img").click(function(){//console.log($(this).attr("src"));    //点击获取img的srcvar src1=$(this).attr("src");//console.log(Attr)//console.log(src1);imgSrc(src1);    //调用函数});var imgs=["img/jiandao.png","img/shitou.png","img/bu.png"];function imgSrc(src1){$("#myImg").attr("src",src1);var id=setInterval(function(){var num=parseInt(Math.random()*3);console.log(num);$("#computer").attr("src",imgs[num]);},20);setTimeout(function(){clearInterval(id);var my=imgs.indexOf(src1);var com=imgs.indexOf($("#computer").attr("src"));if(my==0&&com==2 || my==1&&com==0 || my==2&&com==1){$("#score").html("恭喜您赢了");var count=parseInt($("#scoreFen span:eq(0)").text())+1;//每赢一次分数加1count=count<10?"0"+count:count;$("#scoreFen span:eq(0)").text(count);//显示分数}else if(my==0&&com==0 || my==1&&com==1 || my==2&&com==2){$("#score").html("平局！再战一轮吧！");}else{$("#score").html("哈哈你输啦！！！");var cf = parseInt($("#scoreFen span:eq(1)").text())+1;cf = cf<10 ? "0"+cf : cf;$("#scoreFen span:eq(1)").text(cf);}},500);}</script></body></html>

3. 动画效果图

（1）等待。。。。。

（2）平局：

（3）自己赢

（4）系统赢

玩转jQuery！乐趣学习—下期再见！

jQuery深入浅出（二）石头剪刀布动画实现相关推荐

jQuery——入门（二）动画
jQuery -- 入门(二)动画/效果一.案例解析 hide([speed,[easing],[fn]]) []:意思表示的方括号中的东西是可选的,可有可无的: []中,会有对应的参数名称[变量名 ...
JavaWeb开发前端语言：jQuery（二）属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
一款基jquery超炫的动画导航菜单
今天给大家分享一款基jquery超炫的动画导航菜单.这款导航菜单,初始时页面中间一个按钮,单击按钮,菜单从左侧飞入页中.再次单击按钮,导航飞入左侧消息.动画效果很非常炫.一起看下效果图: 在线预览 ...
下面使用计算机动画制作的,2020年最新电大《计算机二维动画制作》形考作业任务01-03网考试题及答案（10页）-原创力文档...
最新电大<计算机二维动画制作>形考作业任务1-3网考试题及答案 1%通过考试说明<计算机二维动画制作>形考共有3个任务.做考题时,利用本文档中的查找工具,把考题中的关键字输到 ...
二维动画作品_动画设计丨从设计到制作，你不知道的东西还有很多......
1.动画专业的方向动画大概的方向有三个,分别是二维,三维,还有实验动画.其实动画的方向还有很多,也很细.这三个只是大方向,国外学校还会有很多很细的专业划分,会帮助大家专业有专攻.这是不同于国内大学动 ...
Vista Media Center 开发之深入浅出 (二) --Vista Media Center 程序的新建及部署
原文: http://www.cnblogs.com/wangmiao/articles/1306292.html Vista Media Center 开发之深入浅出 (二) ----- Vista ...
jQuery图片自动轮转动画特效
本例的功能是用jQuery图片自动轮转动画特效实现阿里巴巴首页图片动画效果. 所用到的图片截图: 从网上下载一个jQuery文件jquery.js: 具体HTML网页代码如下: <!DOCTYP ...
深入学习jQuery的三种常见动画效果
前面的话动画效果是jQuery吸引人的地方.通过jQuery的动画方法,能够轻松地为网页添加视觉效果,给用户一种全新的体验.jQuery动画是一个大的系列,本文将详细介绍jQuery的三种常见动画效 ...
二维动画作品_「咻动画」二维动画制作中角色造型的设计要点
关于二维动画可能就算不是动画行业的小伙伴们都多多少少都有所了解,近年来其在宣传片制作上面越来越受用.不少企业抛开传统保守的宣传片表现形式转而尝试动画制作宣传片,我们都知道在动画制作从脚本策划到输出成片 ...

jQuery深入浅出（二）石头剪刀布动画实现

jQuery深入浅出（二）-石头剪刀布动画实现

1.准备几张可爱的照片素材

2.代码实现

3. 动画效果图

jQuery深入浅出（二）石头剪刀布动画实现相关推荐

最新文章

热门文章