开发一年多了，一直用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. SSE图像算法优化系列七：基于SSE实现的极速的矩形核腐蚀和膨胀（最大值和最小值）算法。

    因未测试其他作者的算法时间和效率,本文不敢自称是最快的,但是速度也可以肯定说是相当快的,在一台I5机器上占用单核的资源处理 3000 * 2000的灰度数据用时约 20ms,并且算法和核心的大小是无关 ...

  2. 配置带用户权限的docker registry v2

    v1版本的docker registry用nginx配置,v2版本的用nginx有些问题,客户端总是会请求到v1/下面去, 以下从 http://blog.csdn.net/felix_yujing/ ...

  3. windows10开启wst子系统

    需求描述: 在玩docker发现需要linux运行玩转,直接在vmware虚拟机上跑 ,性能有损耗.想直接在windows下运行docker 问题解决: windows10的wst子系统可以安装lin ...

  4. Java驱动远程连接mongoDB(简明易懂版)

    mongodb默认是不能远程连接的,而且在linux安装完你会发现,它的目录极其简单,连个配置文件都没有. 我的mongodb的版本是3.6,目前最新的.https://www.mongodb.com ...

  5. Shell脚本编程（三）：shell参数传递

    我们可以在执行 Shell 脚本时,向脚本传递参数,脚本内获取参数的格式为:$n.n 代表一个数字,1 为执行脚本的第一个参数,2 为执行脚本的第二个参数,以此类推…… 实例 以下实例我们向脚本传递三 ...

  6. lua中table的遍历，以及删除

    Lua 内table遍历 在lua中有4种方式遍历一个table,当然,从本质上来说其实都一样,只是形式不同,这四种方式分别是: 1. ipairs for index, value in ipair ...

  7. SQL Server 2016新特性：In-Memory OLTP

    存储格式修改 在2014,2016中修改了内存优化表的存储格式,新的格式是序列的并且the database is restarted once during database recovery.   ...

  8. Syncfusion SfDataGrid 导出Excel

    var options = new ExcelExportingOptions { ExcelVersion = ExcelVersion.Excel2013, }; //不需要导出的字段 optio ...

  9. idea创建maven SSM项目

    maven配置 ➜ ~ cd /Applications/IntelliJ IDEA.app/Contents/plugins/maven/lib/maven3/conf ➜ conf vim set ...

  10. Win8驱动的兼容性问题

    引用注明>> [作者:张佩][原文:www.yiiyee.cn/blog] 最近我发现为Win8开发的驱动程序,有些能安装在Win7上(包括更早系统),有些则不能.那些不能安装的情况很可怕 ...