• 提升品牌形象
  • 最新HTML5+Css3网站制作技术
  • 完全区分与同行的震撼视觉体验
  • 自动适应平板、手机及电脑屏幕
  • 详细介绍
  • 企业网站入门首选
  • 强大丰富的系统功能
  • 超过1000种页面风格
  • 每年仅需¥1500元,两年仅需¥2000元
  • 详细介绍
  • 4000/4006两种开头选择
  • 智能占线、断线呼转
  • 高达300组可呼转号码
  • 智能语音导航
  • 详细介绍

If you have any question,please contact with us.

  • 昆明网站建设-在线客服

    蛋切刀 一指
    妖异眼瞳
  • 昆明网站设计-服务电话

    4000-555-94113099998627
  • 昆明网站建设-联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101

HTML5 实例-微设计创意工坊 为您提供 昆明网站制作 昆明网站建设 昆明网站设计 云南网站建设 昆明网络公司

  • Home
  • /
  • HTML5 实例
实例4-4 range类型的<input>元素实现颜色选择器

实例4-4 range类型的<input>元素实现颜色选择器

1.功能描述

在新建的页面表单中,创建三个“range”类型的<inPut>元素,分别用于设置颜色中的“红色”(r)、“绿色”(g)、“蓝色”(b);另外,新建一个<p>元素,用于展示滑动条改变时的颜色区。当用户任意拖动某个绑定颜色的滑动条时,对应的颜色区背景色都会随之发生变化,同时,颜色区下面显示对应的色彩值(rgb)。

2.实现代码

在Dreamweaver CS5中新建一个HTML页面4_4.html,加入代码如代码清单4-4所示。

代码清单4-4 range类型的<hput>元素实现颜色选择器

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8"/>
	<title>range类型的input元素</title>
	<link href="Css/css4.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" language="javascript"
	        src="Js/js4.jsn>
	</script>
	</head>
	<body>
	<form id="frmTmp">
	 <fieldset>
	   <legend>选择颜色值:</legend>
	   <span id="spnColor">
	   <input id="txtR" type="range" value="O"
	          min="O" max="255" onChange="setSpnColor()">
	   <input id="txtG" type="range" value="0"
	          min="0" max="255" onChange="setSpnColor()">
	   <input id="txtB" type="range" value="0"
	          min="0" max="255" onChange="setSpnColor()">
	   </span>
	   <span id="spnPrev"></span>
	   <P id="pColor">rgb(0,0,0)</P>
	 </fieldset>
	</form>
	</body> 
	</html>

在代码清单4-4中,通过调用一个JavaScript文件js4.js,实现单击某个颜色滑动条动态改变预览颜色区背景色的功能,其实现的代码如下所示:

	//JavaScript Document
	function $$(id){
	   return document.getElementByld(id);
	}
	//定义变量
	var intR,intG,intB,strColor;
	//根据获取变化的值,设置预览方块的背景色函数
	function setSpnColor(){
	   intR=$$("txtR").value;
	   intG=$$("txtG").value;
	   intB=$$("txtB").value;
	   strColor="rgb("+intR+","+intG+","+intB+")";
	   $$("pColor").innerHTML=strColor;
	   $$("spnPrev").style.backgroundColor=strColor;
	}
	//初始化预览方块的背景色
	setSpnColor();

3.页面效果

该页面在不同浏览器中执行的页面效果如图4-4所示。

4.源码分析

回顾代码清单4-4加粗代码,其中分别使用“range”_类型定义了三个<input>元素,这些元素都以滑动条的形式展示在页面中。拖动滑块时,将触发JavaScript的一个自定义函数setSpnColor(),该函数可以根据获取滑动条的值动态改变颜色块的背景色,实现过程见文件js4.js中代码加粗部分所示。

图4-4 range类型的<input>元素在不同浏览器中的页面效果

虽然Chrome10与Opera11浏览器都支持<input>元素的“range”类型,但在页面中展示的效果是不一样的。在Opera11浏览器中,“range”类型的<input>元素带刻度,支持按左右方向键增加或减小滑动条的值,而Chrome10浏览器则不支持。

本文由昆明网站建设,昆明微设计整理发布,转载请保留链接


  • If you have any question,please contact with us.

  • QQ在线客服

    蛋切刀
    可乐上瘾
    妖异眼瞳
  • 服务电话

    4000-555-94113099998627
  • 联系地址

    昆明市官渡区岔街
    鸿运都市别墅5单元1101