用户投稿物件导向系列
PHP系列
【物件导向】PHP 物件导向 简易分页实作
javascript系列
【物件导向】javascript 物件导向概念 API (範例可玩)
####闲话专区 Start####老闆喜欢金色
我又不想一直开PS CS6 来改图...
就开发插件渲染了...
上传2D图片，自动上色
http://paintschainer.preferred.tech/
我画的烂的，别嫌了...
嗯...就这样...这张不是系统上色唷...
####闲话专区 End####置顶关键字说明
hsla(hue 值, saturation 值, lightness 值, alpha 值)rgba(red 值, green 值, blue 值, alpha 值)---------------------------------------------------------闭包(function () {})();---------------------------------------------------------物件 = {}阵列 = [] ---------------------------------------------------------element.querySelector(CSS 选择器)---------------------------------------------------------var api = {} //物件this.ColorDivide = api; //API对外呼叫名称API构成
1.全域变数
2.方法
3.程式入口
思维 程式入口->设定->执行方法 = 改变网页样式
物件 = {}
阵列 = []
闭包(函式内的物件)
(function () {
})();
全域变数
var options = {splitter: 'Default',color_bsdic:{ H:30,S:50,L:50 }}变数用途说明
t = 寻找到的 CSS or ID
splitter = 字串 目的用于 切换模板
color_bsdic = 设定的基础颜色
function injector(t, splitter , color_bsdic) {}API说明
一.
element.querySelector(CSS 选择器)
二.
var api = {} //物件
this.ColorDivide = api; //API对外呼叫名称
三.
//预设颜色ColorDivide.listen('#demo1');//自订颜色ColorDivide.config({color_bsdic:{ H:10,S:100,L:50 }}).listen('#demo2');看出差异了吗...
ColorDivide.config 不设定也可以
config用于改变全域变数
var options = {splitter: 'Default',color_bsdic:{ H:30,S:50,L:50 }}这2个看你们习惯用哪个噜...
hsla(hue 值, saturation 值, lightness 值, alpha 值)
rgba(red 值, green 值, blue 值, alpha 值)
var getRandomColor = function(Offset,color){ return 'hsla(' + ( color.H + ( Offset * 2 ) ) + ', ' + ( color.S + ( Offset* 4 ) ) + '%, ' + ( color.L + ( Offset * 2 ) ) + '%, 1)';}呼叫他->改变全域 ->ColorDivide.listen->也是叫全域变数
下面他在干吗你懂了吧
//APIvar api = { config: function (opts) { if(!opts) return options; for(var key in opts) { options[key] = opts[key]; } return this; }, listen: function listen(elem) { if (typeof elem === 'string') { var elems = document.querySelectorAll(elem), i = elems.length; while (i--) { listen(elems[i]); } return } injector(elem, options.splitter , options.color_bsdic); return this; }要做什就看你要对网页干吗了...
轮播、进度条、AJAX等，如果你很闲...老闆有给你时间...就去开发吧...
###程式码複製区###
###A页###
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>ColorDivide.JS</title><style>* {margin:0; padding:0;}body {background: #CCC;}::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }::selection { background:#FF5E99; color:#fff; text-shadow: none; } .wrapper {width: 710px;margin-left: auto;margin-right: auto;margin-top: 20px;background: #FFFFFF;padding: 50px;}.code {background: #f8f8f8;border: 1px solid #ccc;margin-bottom: 2em;padding: 10px;}</style></head><body><div class="wrapper"><header><h1>ColorDivide.js</h1><h4>作者:pratnket</h4><h4>版本:2017_Var1</h4><br><p>A simple plug to divide something by JavaScript,no need jQuery.</p><p>一个轻量级的JavaScript插件，可以通过这个插件对字母，单词或句子进行染色，无需依赖jQuery。</p><br></header><article><h1 align=center>预设颜色</h1><div class="code" align=center><h1 id="demo1">ColorDivide.listen('#demo1')</h1></div><h1 align=center>自订颜色</h1><div class="code" align=center><h1 id="demo2">ColorDivide.</h1><h1 id="demo2">config({color_bsdic:{ H:60,S:90,L:30 }}).</h1><h1 id="demo2">listen('#demo2');</h1></div></article></div><script src="ColorDivide.js"></script><script>//预设颜色ColorDivide.listen('#demo1');//自订颜色ColorDivide.config({color_bsdic:{ H:10,S:100,L:50 }}).listen('#demo2');</script></body></html>###JS页###
(function () {var options = {splitter: 'Default',color_bsdic:{ H:30,S:50,L:50 }}//helpervar getRandomColor = function(Offset,color){ return 'hsla(' + ( color.H + ( Offset * 2 ) ) + ', ' + ( color.S + ( Offset* 4 ) ) + '%, ' + ( color.L + ( Offset * 2 ) ) + '%, 1)';}function injector(t, splitter , color_bsdic) {var text = t.textContent,//a = text.split(splitter),a,after,inject = '';if(splitter === 'Default') {a = text.split('');after = '';}if (a.length) {var Offset = 0;for(var i = 0; i < a.length; i++) {( (i*2) > a.length )?(Offset--):(Offset++);var font_color = getRandomColor(Offset,color_bsdic);inject += '<span style="color:'+font_color+'">' + a[i] + '</span>' + after;}t.setAttribute('aria-label', text);t.innerHTML = inject;}}//APIvar api = {config: function (opts) {if(!opts) return options;for(var key in opts) {options[key] = opts[key];}return this;},listen: function listen(elem) {if (typeof elem === 'string') {var elems = document.querySelectorAll(elem),i = elems.length;while (i--) {listen(elems[i]);}return}injector(elem, options.splitter , options.color_bsdic);return this;}}this.ColorDivide = api;})();
微信扫一扫打赏
支付宝扫一扫打赏
