H5选择颜色-前端颜色选择器

开发一年多了,一直用angular2框架,框架虽然能大大减少程序员的工作量,但我还是更喜欢用原生的技术写代码。

原生的就像内功心法,框架是招式,招式虽然实用,但是想成为高手还是得有内功修养。

不多说,现在展示一个原生颜色选择器

代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select color</title>
</head>
<body>
  <input type="color" name="color" id="color" onchange="changeColor()">    //选择颜色的标签,type="color"

  <span id="colorInfo"></span>
</body>
<script type="text/javascript">
  var color = document.getElementById("color");                 //通过使用 getElementById() 来访问 <color> 元素
  var colorInfo = document.getElementById("colorInfo");
  colorInfo.style.color = color.value;                  //给<span>的字体加颜色
  colorInfo.innerHTML = color.value;                  //给<span>加内容(<color>的值)
  function changeColor(){                      //改变颜色的事件
    colorInfo.style.color = color.value;
    colorInfo.innerHTML = color.value;
  }
</script>
</html>

效果图:

时间: 2024-10-10 20:29:36

H5选择颜色-前端颜色选择器的相关文章

(cocos2d-js游戏)选择字体的颜色

游戏的基本玩法:从"红色","黄色","绿色","蓝色","紫色","黑色",中随机选出一个字,然后将字的颜色设置成与文字不同的颜色,如:文字是红色,字体的颜色是黄色,然后让玩家选择字体的颜色,测试反应时间. 代码如下: <span style="font-family:Courier New;">var MainLayer = cc.LayerColor

很多人转行做程序员选择web前端学习,前端简单在哪里?

不管你是工人阶层还是服务行业,是否想过转行IT,转行IT后肯定会选择一门编程语言进行深入学习,很多转行的人基础都不是太好,不是科班出身,甚至有的是专科乃至中专,前端的HTML和CSS相对其他的编程语言来说比较简单,是相对哦,不是绝对的简单. 为什么前端相对要简单呢? 首先前端是由HTML和CSS组成,当然还有JavaScript.HTML和CSS在写的过程中你可以立马看到效果,比如你写一个div,定义一个宽和高, 在给一个背景颜色是吧,打开浏览器立马就能看到是什么样的,我们都知道中国人大部分都很

css基础 组合选择器之多元素选择器 多个元素加上同一个样式

镇场诗: 清心感悟智慧语,不着世间名与利.学水处下纳百川,舍尽贡高我慢意. 学有小成返哺根,愿铸一良心博客.诚心于此写经验,愿见文者得启发.------------------------------------------ code: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"

你做前端多久了?为什么要选择做前端?

作为入行不久的一枚前端妹子,由于急于成为前端大拿,最近也结交了不少前端朋友,有真正的大拿,有跟我水平相当的同僚,也有刚入行的小白. 我跟很多人问过大家做前端多久了?为什么选择做前端这样的问题,大家经验不一,有的几个月,有的半年,有的两年,有的甚至八年,选择做前端的理由也是不尽相同,有的之前做后端,觉得加班太多太累,所以转到了前端,有的觉得前端前途无量,所以选择了前端,有的只是因为个人爱好,所以就做了前端,而我,之前做设计,觉得只做平面过于枯燥,并且想尝试一下新事物,所以学习了前端. 我跟刚入行的

IOS7怎么修改Navigation Bar上的返回按钮文本颜色,箭头颜色以及导航栏按钮的颜色

我想设置Navigation Bar的背景颜色为黑色,然后所有内部颜色为白色. 因此,我用了这段代码: 1 [[UINavigationBar appearance] setTitleTextAttributes: 2 [NSDictionary dictionaryWithObjectsAndKeys: 3 [UIColor whiteColor], 4 NSForegroundColorAttributeName, 5 [UIColor whiteColor], 6 NSForeground

codeblocks修改字体颜色-背景颜色

常用: 1. 编辑器背景-豆沙绿配置:色调85,饱和度123,亮度205: 2. 注释颜色-紫色:rgb(255,0,255): 参考: 改变codeblocks里面各种注释的颜色 常用颜色的RGB值 白色:rgb(255,255,255) 黑色:rgb(0,0,0) 红色:rgb(255,0,0) 绿色:rgb(0,255,0) 蓝色:rgb(0,0,255) 青色:rgb(0,255,255) 紫色:rgb(255,0,255) 原文地址:https://www.cnblogs.com/zk

0078 背景线性渐变:background: linear-gradient(起始方向, 颜色1, 颜色2, ...)

语法1: background: linear-gradient(起始方向, 颜色1, 颜色2, ...); background: -webkit-linear-gradient(left, red , blue); background: -webkit-linear-gradient(left top, red , blue); 背景渐变必须添加浏览器私有前缀 起始方向可以是: 方位名词 或者 度数 , 如果省略默认就是 top <!DOCTYPE html> <html lang

前端颜色选择器

颜色选择器 随着需求的增加,我们会发现自己的知识越来越不够用,前两天看了一个有意思的需求,界面颜色可以让用户自己选择,自己搜了好久,虽然插件很多,但是麻烦程度也是不低,最终找到了一个简单的插件,分享给大家,少走弯路: vColorPicker 此插件是仿照Angular的color-picker插件制作 特点 简单易用,UI在原插件基础上优化增加了圆角和过渡动画 提供以 npm 的形式安装提供全局组件 在支持 html5 input[type='color'] 的浏览器实现了「更多颜色」的功能.

CSS3边框、颜色、伪选择器

1.CSS3圆角效果: border-radius:10px; 2.边框阴影: box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; (外部投影)(内部投影) 添加多个阴影: 以上的语法的介绍,就这么简单,如果添加多个阴影,只需用逗号隔开即可.如: .box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }