定时器---div颜色渐变

最新推荐文章于 2022-06-12 10:59:04 发布
最新推荐文章于 2022-06-12 10:59:04 发布
阅读量782 收藏 1
点赞数 2 
<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	div{width: 500px;
		height: 500px;
		background-color: pink;}
</style>
</head>
<body>
	<div id='dv'></div>
	<input type="button" value="点击" id="btn" name="">
<script type="text/javascript">
var obtn=document.getElementById("btn");
var odv=document.getElementById("dv");
btn.οnclick=function(){
	var opacity=10;
	var timer=setInterval(function(){
	opacity--;
	odv.style.opacity=opacity/10;
	if(opacity<=0)
	{
		clearInterval(timer);
	}
	},200);
}
</script>
</body>
</html>

jifubu6013
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Linux的动态定时器-时间轮
01-09
定时器—有时也称为动态定时器或内核定时器—是管理内核时间的基础。定时器是一种软件功能，即允许在将来的某个时刻，函数在给定的时间间隔用完时被调用。注意的是定时器并不会周期运行，它在超时后自行销毁，这也是定时器被称为动态定时器的一个原因。动态定时器不断地创建和销毁，而且它的运行次数也不受限制。 　　定时器在内核代码中属于一个基础组件。要想完全弄清楚linux2.6中内核定时器的实现，得先从初始化开始。 　　在start_kernel(void)–>init_timers(void) void __init init_timers(void) { int err = timer_cpu_n
Android功能记录(一) ------ 定时器实现颜色渐变
千喜
06-19 483
Android小白搜了一堆资料实现的,主要代码如下: Handler handler = new Handler(); Runnable runnable=new Runnable(){ @Override public void run() { // TODO Auto-generated method stub ...
用定时器来实现颜色的渐变
ITSophia的专栏
07-24 627
 Timer t;//声明一个定时器 t = new Timer(200,this);//给当前的窗体设置的定时器，是0.2秒触发一次事件 事件的内容是颜色的渐变，其实就是颜色数值的一个变化，不同的变化规律会出现不同的颜色渐变效果 public void actionPerformed(ActionEvent e){     red+=5;     green+=5;     blu...
qss渐变器
venice0708的博客
04-04 1136
qss有三种渐变方式线性渐变（qlineargradient）、辐射渐变（qradialgradient）、梯形渐变（qconicalgradient） 线性渐变 是起点到终点的渐变 background-color:qlineargradient(x1:0, y1:0 , x2:1 ,y2:0 stop:0 black ,stop:1 red); 参数x1 y1 x2 y2 组合表示了是左右渐变、上下渐变、左上右下渐变等。 为了方便记忆，直接记住 左右渐变：y1和y2的值都为零。 上下渐变：x
用定时器实现色块颜色渐变/色块切换效果（HTML+CSS+JS）
Loutsking的博客
06-12 926
js定时器实现色块颜色切换
JS实现定时自动更换DIV或页面背景图片
漏刻有时数据可视化大屏（PHP&ECHARTS智能化开源软件系统）
01-19 1797
一、确定DIV大小 body { margin: 0; padding: 0; } #event-types { width: 300px; height: 180px; } 二、JS定时刷新背景; window.onload ...
1s定时器 - 万年历文件
06-22
1s定时器 - 万年历文件
单片机控制智能定时器-论文
05-12
单片机控制智能定时器
STM32-定时器.zip
04-11
STM32-定时器.zip
uni-app定时器实例
11-08
uni-app定时器实例，希望大家多多支持我。我的博客：https://blog.csdn.net/k571039838k
JS两种定时器，setTimeout和setInterval的区别$用定时器切换元素背景颜色
Judy_qiudie
03-12 855
一、setTimeout只在指定时间后执行一次，用于延迟执行某方法或功能 //只执行一次 var t1 = window.setTimeout(function hello(){ alert("你好"); },2000); //去掉定时器的方法 window.clearTimeout(t1); 二、setInterval以指定时间为周期循环执行 //按周期循环执行 var t2 =...
JavaScript--利用setInterval或setTimeout实现背景颜色轮播
博客
08-16 3645
Window属性---暂停和定时器 暂停 var timeoutObj = setTimeout("执行程序",毫秒) setTimeout(引用，1000)setTimeout("执行程序",1000) clearTimeout(timeoutObj) 定时器 var intervalObj = setInterval(("执行程序",毫秒) setInterval
JavaScript小练习3-用循环使三个DIV变色
ZhuangXuward
04-10 1280
题目 初始为黑色，点击后为红色，再次点击为黑色，以后每次点击一次变色。 分析 简单的onclick使用。 button的居中可以在外套一个p元素，body中让p居中即可。 三个DIV块的居中，使用margin和width，注意margin的上下会重叠，但左右不重叠。 实现多次点击变色，需要进行判断原色，注意一般的方法（ele.style./cssText）只能读取和修改内联样式，故第一次点击...
使用JS中的定时器实现块元素背景颜色淡入和淡出的效果
weixin_43338566的博客
04-16 831
效果展示： HTML代码如下： <body> <div id="div1"></div> </body> CSS代码如下： #div1{ width: 200px; height: 200px; background-color: red; /* 兼容ie6 */ /* filter: alpha(op...
js自动创建div每秒创建一个div，div由a-z创建，穿建到z时结束创建，并让div内的颜色随机变化
qq_45858540的博客
08-06 349
页面效果
写了一个自动变颜色的小案例
Lv_SFeng的博客
07-30 215
两层三剩三的div小方块里随机改变颜色。如下图所示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自动变颜色</title> <style> #div-wrap { width: 310px; height: 310px; }
定时器应用-改变div各种样式
wuxiao18的博客
07-28 672
可以让韩商言测手速哦，哈哈哈(改一下实现样式就行了) div可以前进、后退、上、下、变宽、变窄..js /* var timer;时 * 定时器的标识在全局中保存 * 所有的执行正在执行的定时器都在这保存，这样的话两个盒子不能同时进行动画演示 * */ //因此更改为了obj.timer //创建可以实现简单动画的函数 ...
vue进度条动态渐变
最新发布
07-27
要实现Vue进度条的动态渐变效果，可以使用CSS的渐变和Vue的动态数据绑定来实现。以下是一个简单的示例： 首先，在Vue组件中定义一个变量来表示进度值，例如`progress`： ```javascript data() { return { progress: 0 } } ``` 然后，在模板中使用CSS样式来显示进度条，并将进度值绑定到样式属性上： ```html <template> <div class="progress-bar" :style="{ background: 'linear-gradient(to right, #00ff00 ' + progress + '%, #ffffff ' + progress + '%)' }"></div> </template> ``` 在上面的示例中，使用`linear-gradient`函数来创建一个水平渐变背景，其中进度值控制渐变的位置。进度条左侧（0%）的颜色为绿色，右侧（100%）的颜色为白色。 最后，在Vue组件中可以通过某种方式来更新进度值，例如使用定时器来模拟进度的增长： ```javascript mounted() { setInterval(() => { if (this.progress < 100) { this.progress += 10; } }, 1000); } ``` 上述代码会每秒钟增加进度值10，直到达到100。 通过以上步骤，就可以实现一个Vue进度条的动态渐变效果。当进度值发生变化时，进度条的颜色也会相应地渐变。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值