JS实现的颜色实时渐变效果完整实例_javascript技巧
本文实例讲述了JS实现的颜色实时渐变效果。分享给大家供大家参考，具体如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
</head>
<body>
<div id="div1" style="font-size:36px;">我的闪烁文字 abc123</div>
<span id="span1"></span>
<script type="text/javascript">
var begin = getRGB('#33FFAA');
var end = getRGB('#FF0000');
var curColor = getRGB('#33FFAA');
var bo = true;
var rate = getRate(begin, end);
function blink()
{
window.setInterval(function(){
curColor.r = getCur(begin.r, end.r, curColor.r, bo, rate.r);
curColor.g = getCur(begin.g, end.g, curColor.g, bo, rate.g);
curColor.b = getCur(begin.b, end.b, curColor.b, bo, rate.b);
document.getElementById('div1').style.color = getColor(curColor);
document.getElementById('span1').innerHTML = getColor(curColor);
if(curColor.r == begin.r && curColor.g == begin.g && curColor.b == begin.b)
{
bo = true;
}
if(curColor.r == end.r && curColor.g == end.g && curColor.b == end.b)
{
bo = false;
}
} , 100);
}
function getCur(beginValue, endValue, curValue, bo, rateValue)
{
if(beginValue == endValue)
{
return beginValue;
}
rateValue = beginValue < endValue ? rateValue : -rateValue;
curValue += bo ? rateValue : -rateValue;
if(curValue < Math.min(beginValue, endValue))
{
curValue = Math.min(beginValue, endValue);
}
if(curValue > Math.max(beginValue, endValue))
{
curValue = Math.max(beginValue, endValue);
}
return curValue;
}
function getRate(b, e)
{
var obj = new Object();
obj.r = Math.abs(b.r - e.r) / 5;
obj.g = Math.abs(b.g - e.g) / 5;
obj.b = Math.abs(b.b - e.b) / 5;
return obj;
}
function getRGB(color)
{
var obj = new Object();
obj.r = parseInt(color.substr(1,2), 16);
obj.g = parseInt(color.substr(3,2), 16);
obj.b = parseInt(color.substr(5,2), 16);
return obj;
}
function getColor(obj)
{
obj.r = Math.round(obj.r);
obj.g = Math.round(obj.g);
obj.b = Math.round(obj.b);
var color = '#';
color += (obj.r < 16 ? '0':'') + obj.r.toString(16);
color += (obj.g < 16 ? '0':'') + obj.g.toString(16);
color += (obj.b < 16 ? '0':'') + obj.b.toString(16);
return color;
}
blink();
</script>
</body>
</html>
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤
Dec 17, 2023 pm 06:55 PM
股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
如何使用PHP和JS创建股票蜡烛图
Dec 17, 2023 am 08:08 AM
如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3
PHP与JS开发技巧：掌握绘制股票蜡烛图的方法
Dec 18, 2023 pm 03:39 PM
随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人
vivo全新X100系列内存、颜色曝光：全系12+256GB起步
May 06, 2024 pm 03:58 PM
5月6日消息，今天vivo官方宣布，全新的vivoX100系列将在5月13日19:00正式发布。据了解，此次发布会预计将发布vivoX100s、vivoX100sPro、vivoX100Ultra三款机型，以及vivo自研影像品牌BlueImage蓝图影像技术。数码博主“数码闲聊站”今天也放出了这三款机型的官方渲染图、内存规格及配色等，其中X100s采用了直屏设计，而X100sPro和X100Ultra则是曲屏设计。该博主透露，vivoX100s共有黑、钛、青、白四种配色，内存规格
如何更改Windows 10任务栏的颜色
Jan 01, 2024 pm 09:05 PM
win10任务栏颜色修改起来非常简单，但是很多用户发现设置不了，其实非常的简单，只要在电脑的个性化里选择自己喜爱的颜色就可以了，要是改变不了颜色的注意详细的设置哦。win10任务栏颜色怎么改第一步：右键桌面——点击个性化第二步：颜色区域自定义第三步：选择喜欢的颜色PS：如果你无法改变颜色，可以点击颜色->选择颜色->自定义->默认windows模式，选择深色即可。
WPS文档表格颜色怎么设置你知道吗
Mar 20, 2024 am 08:19 AM
我们在看到别人的WPS文档中表格颜色做出来的效果五颜六色，十分美观；而自己只有单调的黑色。如果过给表格填充颜色，我相信很多同学都会。但是，如果要在WPS文档中国设置表格的颜色的话，肯定有不少同学会觉得烧脑！今天，我们来学习一下关于如何设置WPS文档表格的颜色。我整理了一份文档，希望对大家有所帮助。步骤如下：1、我们需要在WPS文档中绘制一个表格，在要修改线条颜色的表格中点击鼠标右键。2、接着，用鼠标在表格上点击【鼠标右键】；在弹出的菜单中，我们找到【边框和底纹】。3、此时，会打开【边框和底纹】对
如何使用JS和百度地图实现地图点击事件处理功能
Nov 21, 2023 am 11:11 AM
如何使用JS和百度地图实现地图点击事件处理功能概述：在Web开发中，经常需要使用地图功能来展示地理位置和地理信息。而地图上的点击事件处理是地图功能中常用且重要的一部分。本文将介绍如何使用JS和百度地图API来实现地图的点击事件处理功能，并给出具体的代码示例。步骤：导入百度地图的API文件首先，要在HTML文件中导入百度地图API的文件，可以通过以下代码实现：
