js实现的简单radio背景颜色选择器代码


Posted in Javascript onAugust 18, 2015

本文实例讲述了js实现的简单radio背景颜色选择器。分享给大家供大家参考。具体如下:

这里演示的js实现radio网页背景颜色选择器,只需点击对应颜色的radio单选框,就可以改变网页的背景颜色,简单方便,实用的javaScript网页特效。

运行效果如下图所示:

js实现的简单radio背景颜色选择器代码

在线演示地址如下:

具体代码如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>radio颜色选择器</title>
<body>
<FORM METHOD="POST" NAME="bgcolor">
<font color="silver">click here</font><input type="radio" name="bgcolor" ONCLICK="document.bgColor='silver'"><BR>
<font color="lightslategray">click here</font><input type="radio" name="bgcolor" ONCLICK="document.bgColor='lightslategray'"><BR>
<font color="azure">click here</font><input type="radio" name="bgcolor" ONCLICK="document.bgColor='azure'"><BR>
<font color="lightgreen">click here</font><input type="radio" name="bgcolor" ONCLICK="document.bgColor='lightgreen'"><BR>
<font color="lightblue">click here</font><input type="radio" name="bgcolor" ONCLICK="document.bgColor='lightblue'"><BR>
<font color="white">click here</font><input type="radio" name="bgcolor" ONCLICK="document.bgColor='white'"><BR>
</form>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
javascript闭包的理解和实例
Aug 12 Javascript
javascript在myeclipse中报错的解决方法
Oct 29 Javascript
JavaScript中Number.MAX_VALUE属性的使用方法
Jun 04 Javascript
JS实现动画兼容性的transition和transform实例分析
Dec 13 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
简单理解js的冒泡排序
Dec 19 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
jQuery多选框选择数量限制方法
Feb 08 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
vue实现短信验证码登录功能(流程详解)
Dec 10 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
对vue生命周期的深入理解
Dec 03 Vue.js
jquery SweetAlert插件实现响应式提示框
Aug 18 #Javascript
js+css实现上下翻页相册代码分享
Aug 18 #Javascript
javascript实现图片上传前台页面
Aug 18 #Javascript
jquery使用ul模拟select实现表单美化的方法
Aug 18 #Javascript
jQuery实现的漂亮表单效果代码
Aug 18 #Javascript
jquery实现select下拉框美化特效代码分享
Aug 18 #Javascript
js实现iPhone界面风格的单选框和复选框按钮实例
Aug 18 #Javascript
You might like
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
smarty中post用法实例
2014/11/28 PHP
php命令行(cli)模式下报require 加载路径错误的解决方法
2015/11/23 PHP
详谈php静态方法及普通方法的区别
2016/10/04 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
jQuery find和children方法使用
2011/01/31 Javascript
js仿百度有啊通栏展示效果实现代码
2013/05/28 Javascript
jquery限定文本框只能输入数字即整数和小数
2013/11/29 Javascript
js调试系列 初识控制台
2014/06/18 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
初识Javascript小结
2015/07/16 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
jQuery制作圣诞主题页面 更像是爱情影集
2016/08/10 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
2016/08/10 Javascript
Vue.js系列之vue-router(上)(3)
2017/01/03 Javascript
JavaScript中Array方法你该知道的正确打开方法
2018/09/11 Javascript
JS将时间秒转换成天小时分钟秒的字符串
2019/07/10 Javascript
layui实现form表单同时提交数据和文件的代码
2019/10/25 Javascript
浅谈Vue中render中的h箭头函数
2019/11/07 Javascript
JavaScript 严格模式(use strict)用法实例分析
2020/03/04 Javascript
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
python中对二维列表中一维列表的调用方法
2020/06/07 Python
Python jieba库分词模式实例用法
2021/01/13 Python
Css3+Js制作漂亮时钟(附源码)
2013/04/24 HTML / CSS
澳大利亚首屈一指的在线购物目的地:Kogan.com
2017/02/02 全球购物
香港交友网站:be2香港
2018/07/22 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
中英双版中文教师求职信
2013/10/27 职场文书
最新茶叶店创业计划书
2014/01/14 职场文书
五年级数学教学反思
2014/02/11 职场文书
妇女干部培训方案
2014/05/12 职场文书
个人查摆剖析材料
2014/10/04 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
无房证明样本
2015/06/17 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书