Web Front-end
JS Tutorial
Complete example of real-time color gradient effect implemented by JS_javascript skills
Complete example of real-time color gradient effect implemented by JS_javascript skills
The example in this article describes the real-time color gradient effect implemented by JS. Share it with everyone for your reference, the details are as follows:
<!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>
Readers who are interested in more JavaScript-related content can check out the special topics on this site: "Summary of JavaScript search algorithm techniques", "Summary of JavaScript animation special effects and techniques", "Summary of JavaScript errors and debugging techniques", "Summary of JavaScript data structures and algorithm techniques", "Summary of JavaScript traversal algorithms and techniques" and "JavaScript Mathematics Summary of operation usage》
I hope this article will be helpful to everyone in JavaScript programming.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Essential tools for stock analysis: Learn the steps to draw candle charts with PHP and JS
Dec 17, 2023 pm 06:55 PM
Essential tools for stock analysis: Learn the steps to draw candle charts in PHP and JS. Specific code examples are required. With the rapid development of the Internet and technology, stock trading has become one of the important ways for many investors. Stock analysis is an important part of investor decision-making, and candle charts are widely used in technical analysis. Learning how to draw candle charts using PHP and JS will provide investors with more intuitive information to help them make better decisions. A candlestick chart is a technical chart that displays stock prices in the form of candlesticks. It shows the stock price
Recommended: Excellent JS open source face detection and recognition project
Apr 03, 2024 am 11:55 AM
Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side
How to create a stock candlestick chart using PHP and JS
Dec 17, 2023 am 08:08 AM
How to use PHP and JS to create a stock candle chart. A stock candle chart is a common technical analysis graphic in the stock market. It helps investors understand stocks more intuitively by drawing data such as the opening price, closing price, highest price and lowest price of the stock. price fluctuations. This article will teach you how to create stock candle charts using PHP and JS, with specific code examples. 1. Preparation Before starting, we need to prepare the following environment: 1. A server running PHP 2. A browser that supports HTML5 and Canvas 3
PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts
Dec 18, 2023 pm 03:39 PM
With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese
How to change the color of the Windows 10 taskbar
Jan 01, 2024 pm 09:05 PM
It is very simple to modify the taskbar color in Windows 10, but many users find that they cannot set it. In fact, it is very simple. Just choose your favorite color in the personalization of the computer. If you cannot change the color, pay attention to the detailed settings. How to change the color of the win10 taskbar Step 1: Right-click on the desktop - click Personalize Step 2: Customize the color area Step 3: Choose your favorite color PS: If you cannot change the color, you can click Color -> Select Color -> Customize->Default windows mode, select dark color.
Vivo's new X100 series memory, color exposure: all series start at 12+256GB
May 06, 2024 pm 03:58 PM
According to news on May 6, vivo officially announced today that the new vivoX100 series will be officially released at 19:00 on May 13. It is understood that this conference is expected to release three models, vivoX100s, vivoX100sPro, and vivoX100Ultra, as well as vivo's self-developed imaging brand BlueImage blueprint imaging technology. Digital blogger "Digital Chat Station" also released the official renderings, memory specifications and color matching of these three models today. Among them, X100s adopts a straight screen design, while X100sPro and X100Ultra have curved screen designs. The blogger revealed that vivoX100s comes in four colors: black, titanium, cyan, and white. The memory specifications
How to use JS and Baidu Map to implement map click event processing function
Nov 21, 2023 am 11:11 AM
Overview of how to use JS and Baidu Maps to implement map click event processing: In web development, it is often necessary to use map functions to display geographical location and geographical information. Click event processing on the map is a commonly used and important part of the map function. This article will introduce how to use JS and Baidu Map API to implement the click event processing function of the map, and give specific code examples. Steps: Import the API file of Baidu Map. First, import the file of Baidu Map API in the HTML file. This can be achieved through the following code:
Do you know how to set the color of WPS document table?
Mar 20, 2024 am 08:19 AM
When we see the table colors in other people's WPS documents, the effects are colorful and beautiful; but we only have monotonous black. If you have to fill the table with colors, I believe many students will do it. However, if you want to set the color of the table in WPS document China, many students will definitely find it confusing! Today, let’s learn how to set the color of the WPS document table. I have put together a document that I hope will be helpful to everyone. The steps are as follows: 1. We need to draw a table in the WPS document and right-click the table where the line color is to be modified. 2. Next, use the mouse to click [right mouse button] on the table; in the pop-up menu, we find [Border and Shading]. 3. At this time, the [Border and Shading] option will be opened.
