开发一年多了，一直用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. 多个组件联合打印输出——PrintableComponentLink

    DevExpress强大到难以想象,其很多组件.接口.自定义事件可完成较好的效果,可节省不少事.如下图所示,用的两个ChartControl.一个GridControl制作的平断面示意图,里面涉及不少 ...

  2. linux清除缓存

    linux清除缓存:需要root权限$ sync$ echo 3 >/proc/sys/vm/drop_caches 上面的echo 3 是清理所有缓存 echo 0 是不释放缓存 echo 1 ...

  3. 1154:LETTERS

    题目链接http://bailian.openjudge.cn/practice/1154/ 总时间限制: 1000ms 内存限制: 65536kB 描述 A single-player game i ...

  4. 【PHP】解析PHP的GD库

    官方文档:http://php.net/manual/en/book.image.php 1.GD库简介 PHP可以创建和操作多种不同格式的图像文件.PHP提供了一些内置的图像信息函数,也可以使用GD ...

  5. springboot更换日志系统

    背景:springboot.2.1.2默认使用logback作为日志系统,我想禁用logback,换成效率更高的log4j2. 一.去除默认的logback依赖 1. 方法一 精准去除 depende ...

  6. Google I/O 官方应用中的动效设计

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jILRvRTrc/article/details/82881743 作者:Nick Butcher, ...

  7. nrm 安装与npm镜像切换

    家里宽带用的移动的...访问海外镜像是相当慢,npm和maven一个道理,maven可以切换到淘宝镜像或者其他的,那么npm也可以使用国内镜像,这个时候就需要用到nrm来做镜像管理了 首先这是目前本地 ...

  8. 解决git 不同branch 下node_moudes不同步的问题

    做nodejs开发,或者vue react等开发的同学,在使用git 做版本管理的时候肯定碰到过这个问题. 按常规做法node_modules 肯定是被添加到.gitignore中不需要被提交的 但是 ...

  9. 每天学习一个命令：find 查找文件

    查找的动作在平时使用的频率也还是很高的,所以知道并用好 find 这个命令也很重要.find 命令顾名思义,就是搜索特定文件夹内的文件. 基本使用 最基本的使用 find [path] [expres ...

  10. TensorFlow 图片resize方法

    参见这篇博客 tensorflow里面用于改变图像大小的函数是tf.image.resize_images(image, (w, h), method):image表示需要改变此存的图像,第二个参数改 ...