首页 建站教程 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

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

打赏
海报

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

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

相关推荐

css中position:fixed如何实现相对于父级定位

css中position:fixed如何实现相对于父级定位

在项目开发中我们经常会用到position:fixed属性,它常常应用的场合是,当下拉滚动条时固定导航栏到顶部,将广告固定在页面两侧或浏览器中间。当我们使用position:fixed定位属性时,它生...
WEB前端 2023.02.12 0 207
纯css实现菜单或列表循环向上滚动效果

纯css实现菜单或列表循环向上滚动效果

在前端开发过程中,有时候针对某个模块需要无限循环的滚动一些消息或菜单,我们常用的方法基本上都是通过js来实现,虽然代码相对来说可能会精简一些,但是对于JS不是很熟悉的同学来说还是不太好理解,毕竟相对于...
WEB前端 2022.08.17 0 856
纯CSS实现侧边栏浮动在线客服效果

纯CSS实现侧边栏浮动在线客服效果

很多人一般在网页的侧边会选择放一个悬浮的在线客服,方便意向客户的联系,网上随便一搜也会有很多代码提供,但是大多都是JS书写的,并且夹带着...
WEB前端 2022.08.17 0 434
评论列表
aa
aa
不错
2021-09-30 17:14:26 回复
umtheme
@aa欢迎常来看看
2021-10-04 00:15:52 回复
花雾影
试用了一下,效果不错。jiayou
2020-11-19 06:34:32 回复
umtheme
@花雾影那必须的weixiao
2020-11-20 14:51:40 回复

ainiaobaibaibaibaobaobeishangbishibizuichiguachijingchongjingdahaqiandaliandangaodw_dogedw_erhadw_miaodw_tuzidw_xiongmaodw_zhutouganbeigeiliguiguolaiguzhanghahahahashoushihaixiuhanheixianhenghorse2huaixiaohuatonghuaxinhufenjiayoujiyankeaikeliankouzhaokukuloukunkuxiaolandelinileimuliwulxhainiolxhlikelxhqiuguanzhulxhtouxiaolxhwahahalxhzanningwennonuokpinganqianqiaoqinqinquantouruoshayanshengbingshiwangshuaishuijiaosikaostar0star2star3taikaixintanshoutianpingtouxiaotuwabiweifengweiquweiwuweixiaowenhaowoshouwuxiangjixianhuaxiaoerbuyuxiaokuxiaoxinxinxinxinsuixixixuyeyinxianyinyueyouhenghengyuebingyueliangyunzanzhajizhongguozanzhoumazhuakuangzuohenghengzuoyi
感谢您的支持