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 相关文章推荐
用jquery生成二级菜单的实例代码
Jun 24 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
jQuery过滤选择器详解
Jan 13 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
超级简单实现JavaScript MVC 样式框架
Mar 24 Javascript
AngularJS中的过滤器使用详解
Jun 16 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
详解angularJS+Ionic移动端图片上传的解决办法
Sep 13 Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
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强制运行广告的方法
2014/12/01 PHP
安装PHP扩展时解压官方 tgz 文件后没有configure文件无法进行配置编译的问题
2020/08/26 PHP
js截取函数(indexOf,join等)
2010/09/01 Javascript
Ubuntu 11.10 安装Node.js的方法
2011/11/30 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
jquery 操作两个select实现值之间的互相传递
2014/03/07 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
jQuery模仿京东/天猫商品左侧分类导航菜单效果
2016/06/29 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
2017/01/08 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
[js高手之路]单例模式实现模态框的示例
2017/09/01 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
2017/10/13 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
jQuery冲突问题解决方法
2021/01/19 jQuery
[10:07]2014DOTA2国际邀请赛 实拍选手现场观战DK对阵Titan
2014/07/12 DOTA
Python def函数的定义、使用及参数传递实现代码
2014/08/10 Python
python批量生成本地ip地址的方法
2015/03/23 Python
python3设计模式之简单工厂模式
2017/10/17 Python
Python探索之创建二叉树
2017/10/25 Python
python 检查文件mime类型的方法
2018/12/08 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
python实现取余操作的简单实例
2020/08/16 Python
ALDI奥乐齐官方海外旗舰店:德国百年超市
2017/12/27 全球购物
怀旧香味蜡烛:Homesick
2019/11/02 全球购物
历史学专业推荐信
2013/11/06 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
学校施工安全责任书
2015/01/29 职场文书
2015建军节87周年演讲稿
2015/03/19 职场文书
干部理论学习心得体会
2016/01/21 职场文书
选择比努力更重要?这是长期以来对“努力”的最大误解
2019/07/12 职场文书
Jupyter notebook 不自动弹出网页的解决方案
2021/05/21 Python
详解php中流行的rpc框架
2021/05/29 PHP
浅谈spring boot使用thymeleaf版本的问题
2021/08/04 Java/Android