PHP

MYSQL

阿旭个人博客

阿旭个人博客,是一款小巧强大的php mysql个人博客系统,本站提供个人博客模板下载。个人博客注册和建立个人博客网站,就用阿旭php个人博客系统吧!
您的位置:首页>CSS,网页,html5,教程,>正文

转载:如何在网页中调用取色器?

  • Donny
  • 2017-12-10 18:03:10       被围观了
  • CSS,网页,html5,教程,
  • Web前端开发者如何调取拾色器(Color Picker)?效果就和Photoshop等设计软件里的取色器一样


    功能要求

    网页里提供用户自主选择颜色的功能,且能通过点击颜色拾取十六进制色值(如:#00aa99)或RGB色值(如:RGB(0,170,153))。

     需求分析

    很多f2er可能会想到用相关插件/控件,其实最简单的办法是用HTML5Color对象,即<input type="color">元素。

    当然,这个元素毕竟属于HTML5对象,存在浏览器兼容问题,请参考底下的“浏览器兼容表”。

    如果项目要兼容各种浏览器,建议节选“安全色”自己布局设计一个拾色器(这不是本文分享的重点,假设有需要可以前往“经验交流区”板块发帖提问:http://www.exp99.com/bbs/);

    如果项目不考虑这些因素,那么恭喜你哦!

    浏览器兼容表
    IE浏览器 谷歌浏览器(Chrome) 火狐浏览器(Firefox) 苹果浏览器(Safari) 欧朋浏览器(Opera)
    不支持 支持 支持 不支持 支持
    提示:QQ浏览器、360浏览器、UC浏览器、搜狗浏览器、百度浏览器等都基于上述浏览器的内核。

     关键代码

     html代码

    	
    
    1. <label>颜色选择:</label> 
    2. <input type="color" id="colorGet" onchange="ColorGetFn(this)">&nbsp;&nbsp; 
    3. <label>颜色输出:</label> 
    4. <input type="text" id="colorInput" onchange="ColorInputFn(this)"> 

     javascript代码

    	
    
    1. function ColorGetFn(dom){ 
    2.     document.getElementById('colorInput').value = dom.value; 
    3. function ColorInputFn(dom){ 
    4.     document.getElementById('colorGet').value = dom.value; 

     效果展示

    通过“颜色选择”选取颜色,十六进制的色值显示在“颜色输出”里;

    通过在“颜色输出”里面输入十六进制的色值,颜色效果会显示在“颜色选择”拾取器里。十六进制输入的格式:"#rrggbb",不可缺少#号且后面6位字符不能简写(用#dddddd取代#ddd),否则没效果!在控制台可以看到警告提示The specified value "#ddd" does not conform to the required format.  The format is "#rrggbb" where rr, gg, bb are two-digit hexadecimal numbers.

     

    谷歌浏览器网页中的拾色器效果
    谷歌浏览器网页中的拾色器效果

     


    文章 转载:如何在网页中调用取色器?阿旭个人博客 网上收集或原创,转载请注明

    来源:http://www.axublog.com/post/zhuan_zai_ru_he_zai_wang_ye_5427/

    上一篇:临港海洋公园招聘职业信息|临港海洋公园招聘信息

    下一篇:dedecms:畅言热门评论不出现如何处理?

    阿旭个人博客-创建于2017年5月- 沪ICP备16040435号

    About Sitemap Rss 文章归档 QQ群190498118