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 DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
datagrid框架的删除添加与修改
Apr 08 Javascript
js获取时间(本周、本季度、本月..)
Nov 22 Javascript
javascript实现日期格式转换
Dec 16 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
jQuery表格(Table)基本操作实例分析
Mar 10 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
Jul 05 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
Echarts地图添加引导线效果(labelLine)
Sep 30 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
thinkphp3查询mssql数据库乱码解决方法分享
2014/02/11 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
浅析PHP反序列化中过滤函数使用不当导致的对象注入问题
2020/02/15 PHP
从Ajax到JQuery Ajax学习
2007/02/14 Javascript
js ondocumentready onmouseover onclick onmouseout 样式
2010/07/22 Javascript
跨浏览器的事件对象介绍
2012/06/27 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
JS之获取样式的简单实现方法(推荐)
2016/09/13 Javascript
几种响应式文字详解
2017/05/19 Javascript
nodejs Assert中equal(),strictEqual(),deepEqual(),strictDeepEqual()比较
2017/09/18 NodeJs
深入剖析Node.js cluster模块
2018/05/23 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
基于vue的tab-list类目切换商品列表组件的示例代码
2020/02/14 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
编写Python脚本来实现最简单的FTP下载的教程
2015/05/04 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
python unittest实现api自动化测试
2018/04/04 Python
python检测空间储存剩余大小和指定文件夹内存占用的实例
2018/06/11 Python
Django学习笔记之为Model添加Action
2019/04/30 Python
Python函数和模块的使用总结
2019/05/20 Python
Python tkinter常用操作代码实例
2020/01/03 Python
一文读懂Python 枚举
2020/08/25 Python
史上最详细的Python打包成exe文件教程
2021/01/17 Python
HTML5 Web缓存和运用程序缓存(cookie,session)
2018/01/11 HTML / CSS
canvas探照灯效果的示例代码
2018/11/30 HTML / CSS
英国航空官网:British Airways
2016/09/11 全球购物
大学生找工作推荐信范文
2013/11/28 职场文书
公司出纳岗位职责
2013/12/07 职场文书
2015秋季小学开学寄语
2015/05/27 职场文书
离开雷锋的日子观后感
2015/06/09 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书