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 相关文章推荐
Lazy Load 延迟加载图片的 jQuery 插件
Feb 06 Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 Javascript
Jquery AutoComplete自动完成 的使用方法实例
Mar 19 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
Function.prototype.apply()与Function.prototype.call()小结
Apr 27 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
AngularJS Controller作用域
Jan 09 Javascript
微信小程序实现简单input正则表达式验证功能示例
Nov 30 Javascript
express+mockjs实现模拟后台数据发送功能
Jan 07 Javascript
vue slot与传参实例代码讲解
Apr 28 Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 Javascript
微信小程序 生成携带参数的二维码
Oct 23 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 服务器配置(使用Apache及IIS两种方法)
2009/06/01 PHP
frename PHP 灵活文件命名函数 frename
2009/09/09 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
分享php代码将360浏览器导出的favdb的sqlite数据库文件转换为html
2015/12/09 PHP
PHP性能优化大全(php.ini)
2016/05/20 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
向当前style sheet中插入一个新的style实现方法
2013/04/01 Javascript
js函数获取html中className所在的内容并去除标签
2013/09/08 Javascript
js实现页面刷新滚动条位置不变
2016/11/27 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
Vue实现调节窗口大小时触发事件动态调节更新组件尺寸的方法
2018/09/15 Javascript
详解mpvue中小程序自定义导航组件开发指南
2019/02/11 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
ElementUI之Message功能拓展详解
2019/10/18 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
vue Element左侧无限级菜单实现
2020/06/10 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
Python3学习urllib的使用方法示例
2017/11/29 Python
Python写一个基于MD5的文件监听程序
2019/03/11 Python
python set内置函数的具体使用
2019/07/02 Python
python实现树的深度优先遍历与广度优先遍历详解
2019/10/26 Python
使用Python脚本从文件读取数据代码实例
2020/01/19 Python
利用OpenCV中对图像数据进行64F和8U转换的方式
2020/06/03 Python
轻化专业学生实习自我鉴定
2013/09/20 职场文书
思想品德自我鉴定
2013/10/12 职场文书
自考自我鉴定范文
2013/10/30 职场文书
工程管理造价应届生求职信
2013/11/13 职场文书
2014年科研工作总结
2014/12/03 职场文书
自主招生自荐信格式
2015/03/04 职场文书
2015年班主任德育工作总结
2015/05/21 职场文书
特种设备安全管理制度
2015/08/06 职场文书