开发一年多了，一直用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. javascript umd esm slim

    在CDN的连接中看到多个连接时如何选择? JavaScript 模块现状 UMD和ECMAScript模块 https://cdn.bootcss.com/popper.js/1.13.0/esm/p ...

  2. [Java] 绕过证书验证调 HTTPS 接口时报 “SSLHandshakeException: DHPublicKey does not comply to algorithm constraints”的解决办法

    作者: zyl910 一.缘由 最近有在对接一个无证书的HTTPS接口时,总是收到"SSLHandshakeException: DHPublicKey does not comply to ...

  3. springboot项目logback配置文件示例

    logback-spring.xml <?xml version="1.0" encoding="UTF-8"?> <configuratio ...

  4. RobotFrameWork编写接口测试及如何断言

    1. 前言 本篇是第一系列(Http接口自动化)的第五课程,如果对系列课程大纲不清楚的,可以查看<RobotFramework系列免费课程-开课了~>. 前面我们介绍了,在真正实施前,需先 ...

  5. easyui textbox 获取焦点

    function Admin_ListAdd() { $('#ListInfo').css({ display: "inherit" }); $("#Department ...

  6. HTTPS和SSL握手过程（转载）

    https介绍 HTTPS = HTTP + 一组对称.非对称和基于证书的加密技术 HTTPS是最常见的HTTP安全版本.它得到了很广泛的应用,所有主要的商业浏览器和服务器都提供HTTPS.HTTPS ...

  7. 【css】垂直居中的几种写法

    结构 <div class="vam"> <div class="vam-body">垂直居中</div> </div ...

  8. getCanonicalFile与getAbsoluteFile区别

    package test; import java.io.File; import java.io.IOException; public class TestFilePath { public st ...

  9. Hadoop、Spark 集群环境搭建问题汇总

    Hadoop 问题1: Hadoop Slave节点 NodeManager 无法启动 解决方法: yarn-site.xml reducer取数据的方式是mapreduce_shuffle 问题2: ...

  10. JavaScript学习历程01

    水仙花数 ps:各位数字立方和等于该数本身 方法1 (数组) <script type="text/javascript"> var i = 100; var newi ...