JS实现颜色动态淡化效果
作者:欧阳翠花 发布时间:2024-02-24 13:19:51
标签:js,颜色
效果图:
代码如下:
<html>
<head>
<title>颜色变换</title>
<style type="text/css">
div{width:100px;height:100px;margin:100px auto;border:1px solid white;border-radius:50%;}
input{position:absolute;left:100px;top:100px;}
</style>
</head>
<body>
<input type="button" value="点击执行颜色淡化效果"/>
<script type="text/javascript">
var a=255,b=165,c=0,w=100,box;
function cont()
{
a=255;
b=165;
c=0;
w=100;
box = document.createElement('div');
document.body.appendChild(box);
}
function changeColor()
{
document.getElementsByTagName('input')[0].disabled="disabled";
box.style.backgroundColor="RGB("+a+","+b+","+c+")";
box.style.width=w;
box.style.height=w;
c++;
if(c>=166)b++;
w++;
if(a>=255&&b>255&&c>255)
{
box.parentNode.removeChild(box);
document.getElementsByTagName('input')[0].removeAttribute('disabled');
return false;
}
setTimeout(changeColor,1);
}
document.getElementsByTagName('input')[0].onclick=function()
{
cont();
changeColor();
}
</script>
</body>
</html>
来源:http://www.qdfuns.com/notes/42099/f59b152dfacd20a612088fb5f358e6c9.html
0
投稿
猜你喜欢
- 1. 引言作为一名算法工程师,如何快速实现一个想法并验证它是否有效对日常工作至关重要。Python 是一个出色的工具,可以很方便地实现这一点
- 本文实例讲述了Python使用循环神经网络解决文本分类问题的方法。分享给大家供大家参考,具体如下:1、概念1.1、循环神经网络循环神经网络(
- 今天在给一个img加链接时发现的<body> <a href="#1" >&
- Access数据库被损坏主要分为以下几种情况:1、严重损坏;2、轻度损坏;3、有些表被损坏或有些表的部分记录被损坏。下面就分情况介绍解决办法
- SQLServer中建立与服务器的连接时出错的解决方案如下:步骤1:在SQLServer 实例上启用远程连接1.指向“开始->程序-&
- 如下所示:torch.mm(mat1, mat2, out=None) → Tensortorch.matmul(mat1, mat2, o
- 本章给大家在项目使用时候,常见的一种情况解决案例,即是当我们调用多个线程,使用了同一个函数去处理数据的时候,有些用函数已经处理完成,但是有些
- 最近研究了一下并行读入数据的方式,现在将自己的理解整理如下,理解比较浅,仅供参考。并行读入数据主要分1. 创建文件名列表2. 创建文件名队列
- 文件操作的一般内容:# 文件的操作# 打开文件 open 打开已存在文件 或者创建一个新文件open('./Test.txt'
- 几周前, Elastic Beanstalk声明在AWS云中配置和管理Docker容器。在本文中,我们通过一个简单的注册表单页面应用去理解D
- 一、日志级别1. 级别定义logging模块提供了5种日志级别,分别为:CRITICAL>ERROR>WARNING>IN
- 核心提示:VB读取MP3文件帧的信息比特率,采样频率,播放时间Private Sub Command1_Click()On Error Go
- 一、简介本文旨在使用两种方法来实现sin函数的模拟,具体的模拟方法是使用机器学习来实现的,我们使用Python的torch模块进行机器学习,
- 可能各位朋友看到这个标题很不解,到底什么是习惯化,什么又是去习惯化?下面我来慢慢介绍我的个人理论。习惯化:随着对刺激的熟悉,人们越来越注意不
- 描述符类要求:描述符就是将某种特殊类型的类的实例指派给另一个类的属性至少要实现以下的一个方法:•__get__(self, instance
- Python中对象的行为是由它的类型 (Type) 决定的。所谓类型就是支持某些特定的操作。数字对象在任何编程语言中都是基础元素,支持加、减
- .data文件格式.data文件是用来存储数据的一种文件格式。之前通常数据是用逗号隔开或tab健隔开的格式,现在也可能是文本文件格式或二进制
- 您是否记得关闭所有的XHTML元素,在HTML中一些元素没有必要被关闭。当下一个元素开始的时候,上一个元素就自动被关闭。XHTML中是不允许
- 最近写了两个管理后台的前端页面,其中有一个管理后台,左侧菜单导航和右侧内容页是两个iframe,需求是,点击上面的主导航时,左侧iframe
- java连接sqlserver2008数据库代码如下所示:public class SqlServer { public static vo