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中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
jquery实现界面无刷新加载登陆注册
Jul 30 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
LayUI表格批量删除方法
Aug 15 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
微信小程序HTTP请求从0到1封装
Sep 09 Javascript
小程序如何支持使用 async/await详解
Sep 12 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 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中使用Memache作为进程锁的操作类分享
2015/03/30 PHP
PHP获取页面执行时间的方法(推荐)
2016/12/10 PHP
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
PHP+Ajax简单get验证操作示例
2019/03/02 PHP
javascript Array.sort() 跨浏览器下需要考虑的问题
2009/12/07 Javascript
基于JavaScript 类的使用详解
2013/05/07 Javascript
JQuery弹出炫丽对话框的同时让背景变灰色
2014/05/22 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
使用jquery+CSS实现控制打印样式
2014/12/31 Javascript
JS实现很酷的EMAIL地址添加功能实例
2015/02/28 Javascript
Javascript创建类和对象详解
2017/05/31 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
JS原型继承四步曲及原型继承图一览
2017/11/28 Javascript
浅谈React中的元素、组件、实例和节点
2018/02/27 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
微信小程序基于canvas渐变实现的彩虹效果示例
2019/05/03 Javascript
Django模板继承 extend标签实例代码详解
2019/05/16 Javascript
python写的一个squid访问日志分析的小程序
2014/09/17 Python
Python的Flask框架中web表单的教程
2015/04/20 Python
Python中线程编程之threading模块的使用详解
2015/06/23 Python
Python 通过打码平台实现验证码的实现
2019/05/13 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
Python Django路径配置实现过程解析
2020/11/05 Python
html5 标签
2009/07/16 HTML / CSS
澳大利亚优质葡萄酒专家:Vintage Cellars
2019/01/08 全球购物
美国球迷装备的第一来源:FOCO
2020/07/03 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
linux比较文件内容的命令是什么
2013/03/04 面试题
保密承诺书范文
2014/03/27 职场文书
家长写给孩子的评语
2014/04/18 职场文书
检讨书大全
2015/01/27 职场文书
乡镇安全生产月活动总结
2015/05/08 职场文书
贫困证明怎么写
2015/06/16 职场文书
python使用shell脚本创建kafka连接器
2022/04/29 Python