Home Web Front-end JS Tutorial js code to return the color of the circular gradient using increasing numbers_javascript skills

js code to return the color of the circular gradient using increasing numbers_javascript skills

May 16, 2016 pm 06:59 PM

The function is as follows:

Copy code The code is as follows:

function gCL(i){
var f=parseInt((i )/5);
i=i %5;
switch(f){
case 0:return "#" cS2(255-i*51) cS2 (i*51) "00";
case 1:return "#00" cS2(255-i*51) cS2(i*51);
case 2:return "#" cS2(i*51 ) "00" cS2(255-i*51);
}
}
function cS2(i) {
var s=i.toString(16);
return ("00 " s).substr(s.length);
}

Using gCL, you can use increasing numbers to return the gradient color from red to green to blue. The gradient effect is as follows, a total of 15 colors, cyclic gradient:

For example, in the following application, use this function to gradient the background color of a hyperlink:

[Ctrl A Select all Note: If you need to introduce external Js, you need to refresh to execute it
]
This function can be modified Produce more detailed color changes, interested friends can try it.
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Two Point Museum: All Exhibits And Where To Find Them
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to change the color of the Windows 10 taskbar 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 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

Do you know how to set the color of WPS document table? 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.

How to solve the abnormal color problem of Win7 monitor How to solve the abnormal color problem of Win7 monitor Jan 14, 2024 pm 06:54 PM

We know that computers will have various problems after being used for a long time. The most common one is the monitor problem. Many users have encountered abnormal monitor colors. So what should you do if you also encounter abnormal monitor colors in Win7? Yes, let’s take a look at the solution. What to do if the Win7 monitor has abnormal colors: Common monitor failure phenomena are as follows: 1. There is no display when turning on the computer, and the monitor often does not power on. 2. The characters on the monitor screen are blurry. 3. The monitor has color spots. 4. Wavy colored stripes appear on the monitor. 5. The monitor has a peculiar smell. 6. There is a continuous "pop" sound from the monitor. 7. Under certain applications or configurations, the screen may become blurry, dark (or even black), ghosted, or frozen, etc. 8. The display lacks color, is defocused, the screen is too bright, or

How to use the PS Gradient Tool - How to use the PS Gradient Tool How to use the PS Gradient Tool - How to use the PS Gradient Tool Mar 05, 2024 pm 06:28 PM

PS software is a software that many people use in their office work, so do you know how to use the PS gradient tool? The following is the method of using the PS gradient tool brought to you by the editor. Interested users can come and take a look below. 1. Open or create a new document: First, open Photoshop software and create a new document, or open an existing image file. Select the Gradient Tool: On the left side of the toolbar, locate the Gradient Tool (between the Rectangular Marquee Tool and the Paint Bucket Tool), and click to select it. 3. Set the gradient type: In the tool options bar, you can choose different gradient types. There are linear gradient, radial gradient, angular gradient and other options to choose from. Click the Gradient Type drop-down menu and select the gradient type you want. 4

How to achieve transparency gradient effect using CSS properties How to achieve transparency gradient effect using CSS properties Nov 18, 2023 pm 05:28 PM

The method of implementing the transparency gradient effect using CSS properties requires specific code examples. In web design, the transparency gradient effect can add a soft and beautiful transition effect to the page. Through the setting of CSS properties, we can easily achieve the transition effect on transparency of different elements. Today we will introduce some common methods and specific code examples. Use the opacity attribute. The Opacity attribute can set the transparency of an element. The value ranges from 0 to 1. 0 means completely transparent and 1 means completely opaque. we can pass

How to set the cursor color of Debian 11 Xfce terminal? How to set the cursor color of Debian 11 Xfce terminal? Jan 03, 2024 pm 02:36 PM

What is Xfce? Xfce is a free software that runs on Unix-like operating systems (such as Linux, FreeBSD and Solaris) and provides a lightweight desktop environment. How to adjust the cursor color in Debian11Xfce terminal? Let’s take a look at the specific operations with the editor. Click [Edit]-[Preferences]. Switch to the [Color] tab. Check Customize [Cursor Color] and click the color selection button on the right. After opening the palette, click to select the cursor color you want to set.

Lambda expression breaks out of loop Lambda expression breaks out of loop Feb 20, 2024 am 08:47 AM

Lambda expression breaks out of the loop, specific code examples are needed. In programming, the loop structure is an important syntax that is often used. However, in certain circumstances, we may want to break out of the entire loop when a certain condition is met within the loop body, rather than just terminating the current loop iteration. At this time, the characteristics of lambda expressions can help us achieve the goal of jumping out of the loop. Lambda expression is a way to declare an anonymous function, which can define simple function logic internally. It is different from an ordinary function declaration,

See all articles