开发一年多了，一直用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>

效果图：

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

  1. 使用 jQuery 实现页面背景色的更换，通过下拉框选择对应的颜色，页面背景会随着选中的颜色进行更换

    查看本章节 查看作业目录 需求说明: 使用 jQuery 实现页面背景色的更换,通过下拉框选择对应的颜色,页面背景会随着选中的颜色进行更换 实现思路: 在页面中添加 <select> 标签 ...

  2. css3类选择器之结合元素选择器和多类选择器

    css3类选择器之结合元素选择器和多类选择器用法: <!DOCTYPE html> <html lang="en"> <head> <me ...

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

    常用: 1. 编辑器背景-豆沙绿配置:色调85,饱和度123,亮度205: 2. 注释颜色-紫色:rgb(255,0,255): 参考: 改变codeblocks里面各种注释的颜色 常用颜色的RGB值 ...

  4. 框架、颜色、颜色名、脚本、字符实体、URL、速查列表

    一. 1.<iframe></iframe>标签设置内联框架(一个内联框架用来当前HTML文档嵌入另一个文档).[语法:<iframe src="URL&quo ...

  5. 一、H5(移动端)前端使用input type=file 上传图片，调用相机和相册

    一.H5(移动端)前端使用input type=file 上传图片,调用相机和相册

  6. 2018-9-30-C#-winforms-输入颜色转换颜色名

    title author date CreateTime categories C# winforms 输入颜色转换颜色名 lindexi 2018-09-30 18:27:49 +0800 2018 ...

  7. echo -e "\033[字背景颜色;字体颜色m字符串\033[0m

    格式: echo -e "\033[字背景颜色;字体颜色m字符串\033[0m" 例如: echo -e "\033[41;36m something here \033 ...

  8. 移动端H5选择本地图片

    移动端H5选择本地图片 html://input<input type="file" accept="image/*" capture="cam ...

  9. WPF整理-使用用户选择主题的颜色和字体

    “Sometimes it's useful to use one of the selected colors or fonts the user has chosen in theWindows ...

随机推荐

  1. K-means算法原理

    聚类的基本思想 俗话说"物以类聚,人以群分" 聚类(Clustering)是一种无监督学习(unsupervised learning),简单地说就是把相似的对象归到同一簇中.簇内 ...

  2. 日志分析工具 Log Parser

    微软的Log Parser, 下载地址 https://www.microsoft.com/en-us/download/details.aspx?id=24659 支持多种文件格式的分析,输入输出, ...

  3. 自建证书配置HTTPS服务器

    1.写这篇博客的初衷是因为最近iOS9出来了,苹果官方默认要求使用HTTPS,所以自己想整一个HTTPS服务器,也想好好了解一下HTTPS通信,也知道了HTTPS其实就是在HTTP的基础上加上了SSL ...

  4. 【转】Java并发的AQS原理详解

    申明:此篇文章转载自:https://juejin.im/post/5c11d6376fb9a049e82b6253写的真的很棒,感谢老钱的分享. 打通 Java 任督二脉 —— 并发数据结构的基石 ...

  5. Egret 4.x 和 5.x 项目共存的方法

    正常来说,安装了对应的引擎之后,4.x的项目和5.x的项目是各自编译互相不影响的. 但是由于引擎的bug,我在实际使用中,出现了编译5.x的项目正常,之后切换到4.x的项目编译时,显示正常编译完毕,但 ...

  6. 浅谈.net中数据库操作事务

    .net中的事务 关键几点 概念:1:什么是事务 2:什么时候用事务 3:基本的语法 (1): 事务(Transaction)是访问并可能更新数据库中各种数据项的一个程序执行单元(unit).事务通常 ...

  7. SQL注入学习资料总结

    转载自:https://bbs.ichunqiu.com/thread-12105-1-1.html  什么是SQL注入 SQL注入基本介绍 结构化查询语言(Structured Query Lang ...

  8. 范型方法 & 范型参数 & 范型返回值

    Java范型类 public class FanXingClassTest { public static void main(String args[]){ Test<Integer> ...

  9. JVM：Java常见内存溢出异常分析

    转载自:http://www.importnew.com/14604.html Java虚拟机规范规定JVM的内存分为了好几块,比如堆,栈,程序计数器,方法区等,而Hotspot jvm的实现中,将堆 ...

  10. 记一次wordpress安装过程中遇到的问题及解决办法

    Q:无法建立目录wp-content/uploads/2017/03.有没有上级目录的写权限?A:执行chmod 777 wp-content/ 提升目录权限 Q:安装主题或安装插件的时候,用到FTP ...