Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Polka Dot Generator
Pure CSS patterns created with CSS Gradients
Background Size
Circle Size
Circle Color
Background Color
New Colors
Randomize
Copy CSS
css
@import url("https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css"); @import url("https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css"); .container { height: 100vh; display: flex; justify-content: center; align-items: center; text-align: center; position: relative; } .container .box { background: white; padding: 25px 45px; border-radius: 10px; max-width: 500px; }
JavaScript
// https://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb function componentToHex(c) { var hex = c.toString(16); return hex.length == 1 ? "0" + hex : hex; } function rgbToHex(r, g, b) { return "#" + this.componentToHex(r) + this.componentToHex(g) + this.componentToHex(b); } // [0, max) function getRandomInt(max) { return Math.floor(Math.random() * Math.floor(max)); } function randomColorStringHex(){ let r = getRandomInt(256); let g = getRandomInt(256); let b = getRandomInt(256); return rgbToHex(r,g,b); } // https://stackoverflow.com/questions/985272/selecting-text-in-an-element-akin-to-highlighting-with-your-mouse function selectText(node) { node = document.getElementById(node); if (document.body.createTextRange) { const range = document.body.createTextRange(); range.moveToElementText(node); range.select(); } else if (window.getSelection) { const selection = window.getSelection(); const range = document.createRange(); range.selectNodeContents(node); selection.removeAllRanges(); selection.addRange(range); } else { console.warn("Could not select text in node: Unsupported browser."); } } var chrome = VueColor.Chrome; var vm = new Vue({ el: "#app", data: { bgSlider: 50, circleSlider: 50, circleColor: "#f94040", bgColor: "#ffffff", colors: '#194d33', showBGPicker: false, }, components: { 'chrome-picker': chrome }, computed: { bgSize(){ let size = Math.floor((this.bgSlider/100) * 500); return `${size}px ${size}px` }, bgImage(){ console.log(this.circleSlider); let smoothingConstant = 2; if(this.bgSlider < 15 || this.bgSlider > 85) smoothingConstant = 1; if(this.bgSlider < 4 || this.bgSlider > 96) smoothingConstant = 0; return `radial-gradient(circle at center center, ${this.circleColor} ${this.circleSlider}%, ${this.bgColor} ${parseInt(this.circleSlider) + smoothingConstant}%)` }, fullCSS(){ return `background-image: ${this.bgImage}; background-size: ${this.bgSize};` } }, methods: { randomize(){ this.bgSlider = Math.floor(Math.random() * 100); this.circleSlider = Math.floor(Math.random() * 100); this.randomizeColors(); }, randomizeColors(){ this.bgColor = randomColorStringHex(); this.circleColor = randomColorStringHex(); }, copyCSS(){ let copyBox = document.querySelector('#copyBox'); copyBox.style['display'] = 'block'; copyBox.innerHTML = this.fullCSS; selectText('copyBox') document.execCommand('copy'); copyBox.style['display'] = 'none'; toastr.success('CSS Copied to Clipboard') }, updateColor(newVal){ console.log(newVal); this.bgColor = newVal.hex; } }, created(){ this.randomize(); }, });
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>圆点生成器-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号