js经典实例----血遁血条消失术

选择跳水或自由落体

于 2021-03-18 17:53:49 发布

阅读量956

点赞数 1

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/qq_42244911/article/details/114986436

版权

前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

血条消失特效在进度条上进行改造而成

有这样一个场景，七代火影漩涡鸣人初始血条为100% 绿色，受到海贼王路飞攻击时，血量以每秒1%的速度减少；

在这里插入图片描述

血量至70时叠加重伤buff，血量以每秒3%的速度减少且血条变黄；

在这里插入图片描述

血量掉到30时，血条变红，死亡警告；血量掉到8%时，触发锁血挂。

在这里插入图片描述

大战终结，木叶村又恢复了以往的平静

HTML

<div class="main">
			<div class="container" id="container"></div>
		</div>
		<button class='btn' id="btn">start</button>

Javascrpt

document.getElementById('btn').addEventListener('click', function() {
				start = 100;
				v = -1
				sobj = setInterval(function() {
					start += v;
					if (start <= 70 && start >= 30) {
						v = -3
						container.style.background = 'yellow'
					} else if (start <= 30) {
						v = -0.5
						container.style.background = '#f00'
					} 
					 if (start <= 8) {
						clearInterval(sobj);
					};
					container.style.width = `${start}%`
				}, 100)
			})