首页 建站教程 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心形缠绕转动效果

CSS心形缠绕转动效果

CSS心形缠绕转动效果是一种有趣的动画效果,能够给网页带来浪漫而动感的氛围。这个效果将一个心形图案无限旋转,并且同时绕着一个中心点缠绕旋...
WEB前端 2023.09.13 0 1932
制作h5常用的css3动画效果

制作h5常用的css3动画效果

css3提供了许多强大的特效,可以用来实现各种各样的效果,下面是我总结的一些常用的css3效果,有需要的可以直接引用:1.悬浮时放大:.one{transition:All 0.4s&nb...
WEB前端 2023.09.13 0 1702
评论列表
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
感谢您的支持