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 构造函数强制调用经验总结
Dec 02 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
JavaScript学习心得之概述
Jan 20 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
Javascript 跨域知识详细介绍
Oct 30 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
Angular X中使用ngrx的方法详解(附源码)
Jul 10 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
Dec 29 Javascript
Vue组件开发技巧总结
Mar 04 Javascript
react build 后打包发布总结
Aug 24 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 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
论建造顺序的重要性
2020/03/04 星际争霸
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
Prototype 学习 工具函数学习($方法)
2009/07/12 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
js通过元素class名字获取元素集合的具体实现
2014/01/06 Javascript
用JavaScript实现使用鼠标画线的示例代码
2014/08/19 Javascript
javascript获取文档坐标和视口坐标
2015/05/26 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
js中开关变量使用实例
2017/02/24 Javascript
关于jQuery里prev()的简单操作代码
2017/10/27 jQuery
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
2018/05/31 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
JS实现吸顶特效
2020/01/08 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
vue实现选中效果
2020/10/07 Javascript
微信小程序实现可长按移动控件
2020/11/01 Javascript
Python实现修改IE注册表功能示例
2018/05/10 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
Python使用POP3和SMTP协议收发邮件的示例代码
2019/04/16 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
浅谈Html5多线程开发之WebWorkers
2018/05/02 HTML / CSS
置业顾问岗位职责
2014/03/02 职场文书
春秋淹城导游词
2015/02/11 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
党员理论学习心得体会
2016/01/21 职场文书
七年级语文教学反思
2016/03/03 职场文书
python实现简单的名片管理系统
2021/04/26 Python
总结Python常用的魔法方法
2021/05/25 Python
速龙x4-860k处理器相当于i几
2022/04/20 数码科技