开发一年多了，一直用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. settings设置中文admin

    所以更改setttings.py 下 LANGUAGE_CODE = 'zh-Hans'即可

  2. Docker在windows下的使用【一】

    1.windows按照docker的基本要求 (1)64为操作系统,win7或者更高 (2)支持“ Hardware Virtualization Technology”,并且,“virtualiza ...

  3. C#做单元测试，如何查看输出的调试信息？

  4. Typora的使用

    Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式,其目标是实现易读易写.我刚刚接触一款简单高效的Markdown编辑器–Typora, ...

  5. SNF软件开发机器人-子系统-导出-导入功能-多人合作时这个功能经常用到

    导出 导出可以将资源表和子系统导出并形成一个json文件. 1.效果展示: 2.使用说明: 点击导出按钮后会弹出一个导出页面.页面的左侧可以选择功能,右侧可以选择资源表,选择功能的同时右侧中功能所需的 ...

  6. Apigee 简介与简单试用

     Apigee (国内访问需要***)是一家成立于2004年的API管理公司,于2016年9月被Google收购,作为Google云的服务之一.Apigee提供从API设计.开发.管理.门户.网关等 ...

  7. android sdk content loader 0%不动

    Make sure that eclipse is not active. If it is active kill eclipse from the processes tab of the tas ...

  8. 【转】Mac OS X 上修改主机名

    修改主机名称 sudo scutil --set HostName MacBookPro 修改共享名称 sudo scutil --set ComputerName MacBookPro [转自]:h ...

  9. 根据IP查地理位置信息

    IP地址库下载地址: https://www.ipip.net/product/ip.html 使用方式(Python): https://github.com/ipipdotnet/datx-pyt ...

  10. linux下access函数

    Linux内核总是根据进程的有效用户ID和有效组ID来决定一个进程是否有权访问某个文件. 因此,在编写调整用户ID的程序时,在读写一个文件之前必须明确检查其用户是否原本就有对此文件的访问权限. 为了实 ...