首页 建站教程 WEB前端 正文

纯JS和CSS实现轻便的颜色选择器

此款选择器基于纯JavaScript和css实现的,并没有采用庞大的框架,也没有图片,因此非常简洁,支持十六进制值和输出RGB值,使用十分方便。使用方法:1,html代码<div class="box"> <input type="text" value="" pla...

此款选择器基于纯JavaScript和css实现的,并没有采用庞大的框架,也没有图片,因此非常简洁,支持十六进制值和输出RGB值,使用十分方便。

纯JS和CSS实现轻便的颜色选择器 js颜色选择 颜色选择器  图1

使用方法:

1,html代码

<div class="box">    
  <input type="text" value="" placeholder="请选择颜色" class="picker" id="color-picker" />    
</div>

2,页面中引入js

<script src="js/colorpicker.js"></script>

3,绑定事件js

<script type="text/javascript">
var obj = document.getElementById("picker");
var a = Colorpicker.create({	
    el: "color-picker",	color: "#a600ff",
    change: function (elem, hex) {		
    elem.style.backgroundColor = hex;	
    }})
</script>

查看演示效果

下载demo

此处为隐藏内容,请评论后查看隐藏内容,谢谢!

打赏
海报

声明:本站部分资源内容为站内原创著作,也有部分基于互联网公开分享整理,版权归原作者所有。
如侵犯到您的权益,请联系本站,我们会尽快处理,谢谢。转摘请注明出处

本文链接:http://www.umtheme.com/web/169.html

相关推荐

Js简单实现复制指定内容到粘贴板

Js简单实现复制指定内容到粘贴板

通过以下代码,点击按钮可直接把input或者textarea里的值复制到粘贴板里,此方法不依赖jquery框架,实现简单粗暴希望对大家有所帮助。<!DOCTYPE html>...
WEB前端 2021.04.14 0 229
Js实现双击鼠标自动滚动页面效果

Js实现双击鼠标自动滚动页面效果

主要介绍了Js实现双击鼠标自动滚动页面的示例代码,在特定的页面也许可以用的的上例如小说或一些资讯类型的网站,需要的朋友可以试一试。操作比较简单把以下代码加在网站的页面中,就可以实现双击鼠标实现自动滚屏...
WEB前端 2021.03.15 0 351
如何通过css3给自己网站logo添加闪光效果

如何通过css3给自己网站logo添加闪光效果

通过css3给自己网站logo添加闪光效果,感觉效果还不错,可以提升用户对网站或企业的品牌印象。具体实现方法如下:找到自己网站logo外面层的盒子(元素),并给该元素添加以下css代码/*首先我们需...
WEB前端 2021.01.14 2 723
评论列表
花雾影
试用了一下,效果不错。jiayou
2020-11-19 06:34:32 回复
umtheme
@花雾影那必须的weixiao
2020-11-20 14:51:40 回复

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持