要求实现9个红包依次执行，css+js

最新推荐文章于 2023-12-15 14:48:50 发布
最新推荐文章于 2023-12-15 14:48:50 发布
阅读量551 收藏
点赞数
分类专栏： ajax 文章标签： js+css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_42997826/article/details/85106641
版权

首先说一下思路叭，想了半天
想法：一、控制css依次执行样式，9个红包平均分成9份，占百分百多少，9个动画控制在一个动画里面（很好写的很快，但是还有一个要求，点击一个动画，跳过这个动画执行下一个）能实现，但是想想好大的代码量还是算了
二、js控制动画的执行与不执行，设置动画循环播放，设置时间戳8s执行一次，依次执行动画（想法很好，但是实现起来会出现动画错乱，原因第一次执行设置时间的问题）设置第一次动画规定执行时间，其他动画全部依赖第一次动画执行而执行，最后一个动画重置css样式重新去执行，点击红包直接跳过执行下一个，很好如果点击第一个怎么办？？？？？？？？？？？
三、同第二步，第一次动画做起点执行完暂停，执行第二个，如果第二个被点击执行第三个，依次类推，最后一个动画启动第一个动画无限循环。

第一想法代码（没有最后实现哈这这是依次执行而已)

.goods{
	width:20%;
	height:atuo;
	position:relative;
	animation:mymove 9s infinite ;
	-webkit-animation:mymove 9s infinite ; 
	-webkit-animation-iteration-count:infinite;
}
.goods1{
	width:20%;
	height:atuo;
	position:relative;
	animation:mymove1 9s infinite ;
	-webkit-animation:mymove1 9s infinite ; 
	-webkit-animation-iteration-count:infinite;
}
.goods2{
	width:20%;
	height:atuo;
	position:relative;
	animation:mymove2 9s infinite ;
	-webkit-animation:mymove2 9s infinite ; 
	-webkit-animation-iteration-count:infinite;
}
.goods3{
	width:20%;
	height:atuo;
	position:relative;
	animation:mymove3 9s infinite ;
	-webkit-animation:mymove3 9s infinite ; 
	-webkit-animation-iteration-count:infinite;
}
.goods4{
	width:20%;
	height:atuo;
	position:relative;
	animation:mymove4 9s infinite ;
	-webkit-animation:mymove4 9s infinite ; 
	-webkit-animation-iteration-count:infinite;
}
.goods5{
	width:20%;
	height:atuo;
	position:relative;
	animation:mymove5 9s infinite ;
	-webkit-animation:mymove5 9s infinite ; 
	-webkit-animation-iteration-count:infinite;
}
.goods6{
	width:20%;
	height:atuo;
	position:relative;
	animation:mymove6 9s infinite ;
	-webkit-animation:mymove6 9s infinite ; 
	-webkit-animation-iteration-count:infinite;
}
.goods7{
	
	width:20%;
	height:atuo;
	position:relative;
	animation:mymove7 9s infinite ;
	-webkit-animation:mymove7 9s infinite ; 
	-webkit-animation-iteration-count:infinite;
}
.goods8{
	width:20%;
	height:atuo;
	position:relative;
	animation:mymove8 9s infinite ;
	-webkit-animation:mymove8 9s infinite ; 
	-webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
	0%{top: 0px;left: 0px;}
	2.75%{top: -0.5em;left: 0px;}
	5.5%{top: -1em;left: 0px;}
	8.25%{top: -0.5em;left: 0px;}
	11%&{top: 0px;left: 0px;}
}
@-webkit-keyframes mymove1 /* Safari and Chrome */
{
	11%{top: 0px;left: 0px;}
	13.75%{top: -5px;left: 0px;}
	16.5%{top: -10px;left: 0px;}
	19.25%{top: -5px;left: 0px;}
	22%&{top: 0px;left: 0px;}
}
@-webkit-keyframes mymove2 /* Safari and Chrome */
{
	22%{top: 0px;left: 0px;}
	24.75%{top: -0.5em;left: 0px;}
	27.5%{top: -1em;left: 0px;}
	30.25%{top: -0.5em;left: 0px;}
	33%&{top: 0px;left: 0px;}
}
@-webkit-keyframes mymove3 /* Safari and Chrome */
{
	33%{top: 0px;left: 0px;}
	35.75%{top: -0.5em;left: 0px;}
	38.5%{top: -1em;left: 0px;}
	41.25%{top: -0.5em;left: 0px;}
	44%&{top: 0px;left: 0px;}
}
@-webkit-keyframes mymove4 /* Safari and Chrome */
{
	44%{top: 0px;left: 0px;}
	46.75%{top: -0.5em;left: 0px;}
	49.5%{top: -1em;left: 0px;}
	52.25%{top: -0.5em;left: 0px;}
	55%&{top: 0px;left: 0px;}
}
@-webkit-keyframes mymove5 /* Safari and Chrome */
{
	55%{top: 0px;left: 0px;}
	57.75%{top: -0.5em;left: 0px;}
	60.5%{top: -1em;left: 0px;}
	63.25%{top: -0.5em;left: 0px;}
	66&{top: 0px;left: 0px;}
}
@-webkit-keyframes mymove6 /* Safari and Chrome */
{
	66%{top: 0px;left: 0px;}
	68.75%{top: -0.5em;left: 0px;}
	71.5%{top: -1em;left: 0px;}
	74.25%{top: -0.5em;left: 0px;}
	77&{top: 0px;left: 0px;}
}
@-webkit-keyframes mymove7 /* Safari and Chrome */
{
	77%{top: 0px;left: 0px;}
	79.75%{top: -0.5em;left: 0px;}
	82.5%{top: -1em;left: 0px;}
	85.25%{top: -0.5em;left: 0px;}
	88&{top: 0px;left: 0px;}
}
@-webkit-keyframes mymove8 /* Safari and Chrome */
{
	88%{top: 0px;left: 0px;}
	90.75%{top: -0.5em;left: 0px;}
	93.5%{top: -1em;left: 0px;}
	96.25%{top: -0.5em;left: 0px;}
	100%&{top: 0px;left: 0px;}
}

很好我们把动画做出来了，是挺好看，但是在广告上不是光给人看的，还需要点击，那一部分隐藏，就有了时间差，所有我们略过第二想法直接看第三想法。

第三想法代码

首先我们先写css动画

.deep{ 
	position: absolute;
	width: 2.5rem;
	height: 2.5rem;
	float: left;
	left: 2rem;
	top: 10rem; 
	z-index: 100;
	-webkit-animation: bounce-up 1s infinite;
	animation: bounce-up 1s infinite;
	animation-fill-mode: forwards;
	animation-play-state: running;
}

@-webkit-keyframes bounce-up {
	0% {-webkit-transform: translateY(0rem);}
	50% {-webkit-transform: translateY(-1.5rem);}
	100%{-webkit-transform: translateY(-0rem);}
}

只有开始的动画设置infinite属性。如果不设置的话只会播放一边。即便你js里设置了style.animationPlayState = ‘running’;
第一次动画监听循环结束

	var $main = $('.fudai1');
	//click1-9是全局变量，初始值0，被点击1
	//重复播放
	$main.on('animationiteration', function(e) {
		console.log(click2+"-----click2--------");
		if(click9==1){//第一个被点击
				run2();
				if(click2==1){//同时第二个被点击
					run3();
					if(click3==1){
						run4();
						if(click4==1){
							run5();
							if(click5==1){
								run6();
								if(click6==1){
									run7();
									if(click7==1){
										run8();
										if(click8==1){
											run9();
										}
									}
								}
							}
						}
					}
				}
		}else{
				if(click2==1){//第二个被点击
					run3();
					if(click3==1){//同时第三个被点击
						run4();
						if(click4==1){
							run5();
							if(click5==1){
								run6();
								if(click6==1){
									run7();
									if(click7==1){
										run8();
										if(click8==1){
											run9();
											if(click9==1){
												run1();
											}
										}
									}
								}
							}
						}
					}
				}
				run2();
			}
		
		a.style.animationName = "";//重置classanimationName属性，下次进入
		
	});

第二次动画监听播放结束

var $main2 = $('.fudai2');
	//监听动画的结束
	$main2.on('animationend', function(e) {
				if(click2==1){
					run3();
					if(click3==1){
						run4();
						if(click4==1){
							run5();
							if(click5==1){
								run6();
								if(click6==1){
									run7();
									if(click7==1){
										run8();
										if(click8==1){
											run9();
											if(click9==1){
												run1();
											}
										}
									}
								}
							}
						}
					}
				
			}else{
				if(click3==1){
					run4();
					if(click4==1){
						run5();
						if(click5==1){
							run6();
							if(click6==1){
								run7();
								if(click7==1){
									run8();
									if(click8==1){
										run9();
										if(click9==1){
											run1();
										}
									}
								}
							}
						}
					}
				}
				console.log('三号红包没被点击');
					run3();
			}
			a1.style.animationName = "";
			
	});

依次类推到第九个动画

var $main9 = $('.fudai9');
	$main9.on('animationiteration', function(e) {
	});
	//监听动画的结束
	$main9.on('animationend', function(e) {
			if (a.classList.contains('start')) {
				console.log("我进的第一个");
				a.className = 'starts deeps';
			}else{
				console.log("我进的第二个");
				a.className = 'start deep';
			}
	console.log("我是第九个执行的");
			if(click1==1){
				console.log("福袋1被点击");
				run2();
				if(click2==1){
					run3();
					if(click3==1){
						run4();
						if(click4==1){
							run5();
							if(click5==1){
								run6();
								if(click6==1){
									run7();
									if(click7==1){
										run8();
										if(click8==1){
											run9();
											if(click9==1){
												run1();
											}
										}
									}
								}
							}
						}
					}
				}
			}else{
				if(click1==1){
				console.log("福袋1被点击");
				run2();
				if(click2==1){
					run3();
					if(click3==1){
						run4();
						if(click4==1){
							run5();
							if(click5==1){
								run6();
								if(click6==1){
									run7();
									if(click7==1){
										run8();
										if(click8==1){
											run9();
											if(click9==1){
												run1();
											}
										}
									}
								}
							}
						}
					}
				}
			}
				a.style.animationPlayState='paused';
				a.style.animationName = 'bounce-up';
				a.style.animationPlayState = 'running';
				a.style.animationDuration = "1s";
			}
				a8.style.animationName = "";
	});

ok大工告成

高性能零售IT系统的建设05-从0打造一个每秒万级并发的互联网交易系统的技术全架构
打造全国最全的AI Agent开发知识领域的博客
10-13 3763
亿万级的流量、每秒万级的并发的大型零售商超金融类应用如何设计与架构？如何面对汹涌的流量？本篇以全景式架构设计展示并结合一个个生产实例带你一步步深入了解如何应对大规模的高并发高流量的业务场景系统架构之美。
红包效果 js css 红包动画
02-25
红包效果 js css 红包动画 点击打开红包
css 微信红包,js微信红包实现方案
weixin_39759589的博客
08-03 538
大家肯定都使用过微信的红包功能，对微信红包的规则有一定的了解，它的规则是用户可以输入金额和红包的个数，然后供其他人去抽取，每个人最少可以抽到0.01元、一般最多可以抽到200元，那这个微信红包的效果是怎么实现的呢？下面我们来分析一下这个功能应该怎么实现：1、需要两个参数，金额：money 数量：count2、将money分为count，确保没份最少有0.01letrebBack=(count...
js中如何顺序执行异步任务
Java_monkey_的博客
12-09 6336
现有a、b和c三个任务，如果其为同步任务，可以很简单地顺序执行，但如果其为异步任务，该如何顺序执行呢？
c# 红包算法
11-16
输入红包总金额和红包数量，通过随机算法计算出所有的单个红包大小以及最佳手气
C# 红包算法
焦点男孩
04-10 3525
/// /// 红包算法 /// /// /// public static List GetMoneys(RedPacket _redPacket) { //人均最小金额 double min = 0.1; if (_re
使用JavaScript和HTML实现移动端红包雨效果
3. 对每个红包元素应用不同的动画延迟，使得红包依次落下，模拟随机掉落的效果。 4. 当红包到达底部时，移除该元素，或者改变其透明度以表示被领取。 通过这样的组合，开发者能够创建一个引人入胜的移动端红包雨...
点击开始下红包雨
10-25
【标签】：“js 红包雨”提示我们这个功能主要通过JavaScript语言来编写，而“红包雨”则对应着特定的视觉效果和交互体验。JavaScript是前端开发中常用的语言，负责处理用户与网页之间的交互，创建动态效果。 **...
相关业务问题+系统问题+设计问题整理统计
热门推荐
张彦峰的博客
04-07 171万+
业务系统及其他相关面试问题整理：线上相关问题排查+高并发系统的限流+高并发秒杀系统设计+负载均衡+一个网站有 20 亿 url 存在一个黑名单中，这个黑名单要怎么存？若此时随便输入一个 url，你如何快速判断该 url 是否在这个黑名单中？并且需在给定内存空间（比如：500M）内快速判断出？
请设计一个发送随机红包的网页版程序。 要求：1.整个版面以桃红色为基调。红包为红底黄边的长方形，中间有“恭喜 发财”字样。2.页面上部要有“红包总额”，可自行输入数字，可有两位小数 ，单位为“元”。 3.要有发放的“红包总数”，和“红包总额”并排页面上部，可自行输入。 4.要有“开始”按钮。按下后红包开始漂浮在页面中部，不可遮盖。 5.鼠标点击红包后显示本红包金额。 6.红包发完后要以列表方式显示抢得每个红包的金额。 7.红包的分配算法：核心算法——二倍均值法 计算最大值：每次分配红包时，系统会计算剩余金额的平均值，并将该平均 值的两倍作为当前红包金额的上限。例如，总金额为100元，分10个红包，初 始平均值为10元，那么第一个红包的最大金额为20元。 随机分配：在0.01元到上述计算出的最大值之间随机生成一个金额，作为当 前红包的金额。 动态调整：每次分配后，系统会从总金额中减去已分配的金额，并计算剩余 红包的个数，然后重新计算剩余金额的平均值和下一个红包的最大金额。 重复上述过程，直到所有红包分配完毕。 规则与限制 最低金额限制：每个红包的金额至少为0.01元，以确保每个人都能抢到红包 。 总金额不变：所有红包的金额之和必须等于初始设定的总金额。 随机性：每次分配的金额是随机的，但受到上述规则和算法的约束，以保证 公平性和合理性。 公平性与趣味性 公平性：二倍均值法通过动态调整分配范围，使得每个人都有机会获得较大 金额的红包，避免了先抢的人总是占优势的情况。 趣味性：由于金额的随机性，增加了抢红包的不确定性和惊喜感，使得抢红 包的过程更加有趣。 特殊情况处理 最后两个红包：当只剩下两个红包时，系统会确保这两个红包的金额之和等 于剩余金额，并且每个红包的金额至少为0.01元。 极端情况：如果前面的人抢到的金额较少，剩余金额较多，那么后面的人可 能会获得相对较大的红包，反之亦然。
最新发布
03-18
好的，我现在要帮用户设计一个基于网页的随机红包程序，使用HTML、CSS和JavaScript，并且要求桃红色基调。首先，我得理清楚用户的需求，然后一步步分解如何实现。 用户的需求包括几个部分：界面设计、交互逻辑、二...
html+css+js 仿微信红包
10-19
html+css+js 仿微信红包
C#实现拼手气红包算法
12-17
本文实例为大家分享了C#实现拼手气红包算法的具体代码，供大家参考，具体内容如下 一、方案1：即开即中，考虑机会均等，减少金额差较大的几率 可以每次点击时候，随机产生 static double[] GetRandomMoney(double money, int n) { double[] array = new double[n]; RedPackage red = new RedPackage() { money = money, count = n }; for (int i = 0; i < n; i++) { array[i] = GetRandomMone
生成固定红包与随机红包，随机红包金额依据截尾正态分布算法来生成
09-04
生成固定红包与随机红包，随机红包金额依据截尾正态分布算法来生成 >Generate fixed red package and random red package, random red envelopes based on truncated normal distribution algorithm to generate
css 微信红包,用React加CSS3实现微信拆红包动画
weixin_39946029的博客
08-03 307
微信红包曾经引爆过一系列的营销热潮，相信大家对于这种红包形式并不陌生，这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果，供大家一起交流学习用CSS3绘制红包.redpack {height: 450px;background: #A5423A;width: 300px;left: 0;top: 0;border-radius: 10px;margin: 0 auto;}.topcon...
【实现微信红包效果】前端CSS实现微信红包打开效果（附源码下载）
赏樱看雪撸代码
06-13 2778
CSS动画实现红包翻转效果，CSS如何实现微信红包效果，红包打开效果如何实现，如何实现微信红包页面效果，animation动画实现红包翻开效果
css实现开红包的效果
清音的博客
08-10 2527
<div id="hongbao" class="hongbao" style="display:block;" onclick=""> <div class="" style="width:60%;margin:0 auto;margin-top:4rem;"> <img style="width:100%" src="../../image/public/red_packet/text.png" alt=""> </div> .
C#实现抢红包算法
「 虚幻私塾」
03-10 1208
Python微信订餐小程序课程视频 https://edu.youkuaiyun.com/course/detail/36074 Python实战量化交易理财系统 https://edu.youkuaiyun.com/course/detail/35475 二倍均值法（公平版） 发出一个固定金额的红包，由若干个人来抢，需要满足哪些规则？ 1.所有人抢到金额之和等于红包金额，不能超过，也不能少于。 2.每个人至少抢到一分钱。 3.要保证所有人抢到金额的几率相等。 假设剩余红包金额为M，剩余人数为N，那么有如下公式： 每次抢到的
微信红包签名算法 C#代码实现
被遗忘的遐想空间
01-18 2526
string stringA = "appid=wxd930ea5d5a258f4f&body=test&device_info=1000&mch_id=10000100&nonce_str=ibuaiVcKdpRxkhJA"; string stringSignTemp = stringA + "&key=192006250b4c09247ec02edce69f6a2d
css3实现红包弹出并翻转效果
qq_39692513的博客
12-15 1210
css3实现红包弹窗出现并翻转效果
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值