Simple radio background color selector code implemented in js

Home

Web Front-end

JS Tutorial

Simple radio background color selector code implemented in js_javascript skills

May 16, 2016 pm 03:44 PM

js Radio background color Selector

The example in this article describes a simple radio background color selector implemented in js. Share it with everyone for your reference. The details are as follows:

The js demonstrated here implements the radio web page background color selector. Just click on the radio radio button of the corresponding color to change the background color of the web page. It is a simple, convenient and practical javaScript web page special effect.

The operation effect is as shown below:

The online demo address is as follows:

http://demo.jb51.net/js/2015/js-radio-cha-bgcolor-codes/

The specific code is as follows:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;radio颜色选择器&lt;/title&gt;
&lt;body&gt;
&lt;FORM METHOD="POST" NAME="bgcolor"&gt;
&lt;font color="silver"&gt;click here&lt;/font&gt;&lt;input type="radio" name="bgcolor" ONCLICK="document.bgColor='silver'"&gt;&lt;BR&gt;
&lt;font color="lightslategray"&gt;click here&lt;/font&gt;&lt;input type="radio" name="bgcolor" ONCLICK="document.bgColor='lightslategray'"&gt;&lt;BR&gt;
&lt;font color="azure"&gt;click here&lt;/font&gt;&lt;input type="radio" name="bgcolor" ONCLICK="document.bgColor='azure'"&gt;&lt;BR&gt;
&lt;font color="lightgreen"&gt;click here&lt;/font&gt;&lt;input type="radio" name="bgcolor" ONCLICK="document.bgColor='lightgreen'"&gt;&lt;BR&gt;
&lt;font color="lightblue"&gt;click here&lt;/font&gt;&lt;input type="radio" name="bgcolor" ONCLICK="document.bgColor='lightblue'"&gt;&lt;BR&gt;
&lt;font color="white"&gt;click here&lt;/font&gt;&lt;input type="radio" name="bgcolor" ONCLICK="document.bgColor='white'"&gt;&lt;BR&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

I hope this article will be helpful to everyone’s JavaScript programming design.

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