以下、サンプル
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <title>画面で照明</title> | |
| <style type="text/css"> | |
| *{font-size:24px;} | |
| input{width:80px;text-align:center;} | |
| .ta-c{text-align:center;} | |
| .w-max{width:100%;} | |
| .of-auto{overflow:auto;} | |
| .divScroll{-webkit-overflow-scrolling: touch;width:256px;overflow:scroll;height:30px;margin:0 auto;border:solid 1px #000;} | |
| </style> | |
| <body class=ta-c> | |
| <input value=RGB style="margin-bottom:50px;width:200px;"> | |
| <table class=w-max> | |
| <tr><td><span>*R</span><input value=R><div class=divScroll><div>R</div></div></td></tr> | |
| <tr><td><span>*G</span><input value=G><div class=divScroll><div>G</div></div></td></tr> | |
| <tr><td><span>*B</span><input value=B><div class=divScroll><div>B</div></div></td></tr> | |
| <tr><td><span>*W</span><input value=W><div class=divScroll><div>W</div></div></td></tr> | |
| </table> | |
| <label style="border:solid 1px #000;"><input type="checkbox" value=虹色>虹色</label> | |
| <div style="height:150%;"></div> | |
| </body> | |
| <script> | |
| resizeTo(350,500) | |
| onload = function(){ | |
| var cn=getChilds(document.body) | |
| var funScroll=function(項目, elem){ | |
| cn['inp'+項目].value = Math.round((1 - elem.scrollLeft / (elem.scrollWidth-elem.clientWidth)) * 255) | |
| 背景色変更(項目) | |
| } | |
| var funInput=function(項目, elem){ | |
| var div=cn['div'+項目][PA], 値=elem.value | |
| if(値<0){ 値 = elem.value = 0 } | |
| if(255<値){ 値 = elem.value = 255 } | |
| div.scrollLeft = Math.round((div.scrollWidth-div.clientWidth) * (255-Math.round(値-0)) / 255) | |
| 背景色変更(項目) | |
| } | |
| for0L('RGBW'.split(''),function(i,chr){ | |
| var fun=function(){ (this.tagName.toLowerCase()=='div' ? funScroll : funInput)(arguments.callee.chr, this) } | |
| fun.chr = chr | |
| cn['div'+chr][iT] = '1' | |
| cn['div'+chr].style.width = '2560%' | |
| cn['div'+chr][PA].onscroll = fun | |
| cn['inp'+chr][PA].className='ta-c' | |
| setProp(cn['inp'+chr], {value:255, onchange:fun, type:'number', pattern:'\d*'}) | |
| }) | |
| var getElem=function(項目){return cn['inp'+項目]} | |
| var getV=function(項目){return getElem(項目).value-0} | |
| var setV=function(項目,値){getElem(項目).value = 値} | |
| var 二桁=function(num){num='00'+num.toString(16); return num.slice(num[LEN]-2, num[LEN])} | |
| var 背景色変更=function(項目){ | |
| var arr=[] | |
| if(項目=='W'){ | |
| arr[0]=arr[1]=arr[2]=二桁(getV('W')) | |
| }else{ | |
| arr =[二桁(getV('R')), 二桁(getV('G')), 二桁(getV('B'))] | |
| } | |
| arr.unshift('#') | |
| chg背景色(arr.join('')) | |
| } | |
| chg背景色=function(rgb){document.body.style.backgroundColor = cn.inpRGB.value = rgb} | |
| cn.chk虹色.onclick=function(){ | |
| var arr=['E60012', 'F39800', 'FFF100', '009944', '0068B7', '1D2088', '920783'], i=0, step=16, step_i=0, L=arr[LEN] | |
| var getRGB=function(str){return {R:parseInt(str.slice(0,2),16), G:parseInt(str.slice(2,4),16), B:parseInt(str.slice(4,6),16)}} | |
| var nowRGB=function(b,a){ | |
| var obj={} | |
| forIn(b,function(chr, num){ obj[chr] = Math.round((a[chr] - b[chr]) / step * step_i + b[chr]) }) | |
| return ['#', 二桁(obj.R), 二桁(obj.G), 二桁(obj.B)].join('') | |
| } | |
| setTimeout(function(){ | |
| if(!cn.chk虹色.checked){return} | |
| chg背景色(nowRGB(getRGB(arr[i%L]), getRGB(arr[(i+1)%L]))) | |
| if(++step_i==step){i++; step_i=0} | |
| setTimeout(arguments.callee, 100) | |
| }, 100) | |
| } | |
| } | |
| iT='innerText', iH='innerHTML', PA='parentNode', FI='firstChild', CN='childNodes', NE='nextSibling', PR='previousSibling', sI='selectedIndex', iB='insertBefore', OP='options', LEN='length' | |
| for0L = function(arr,fun){for(var i=0,L=arr[LEN],res;i<L;i++){if(res=fun(i,arr[i])){return res}}} | |
| forIn = function(obj,fun){var name,res; for(name in obj){if(res=fun(name, obj[name])){return res}}} | |
| getChilds=function(){ | |
| var tagName2接頭辞={button:'btn', input:'inp', select:'sel', a:'lnk', iframe:'ifr'}, iT_Clear={div:1, td:1, span:1} | |
| var inp接頭辞={checkbox:'chk', radio:'rad', text:'inp', number:'num'} | |
| var fun再帰=function(cn, obj){ for0L(cn,function(i,elem){ | |
| var name=(elem.tagName || '').toLowerCase(), cn=elem[CN], swCN | |
| if(!name){return} | |
| for0L(cn, function(i,elem){ return swCN=elem.tagName }) | |
| if(swCN){ return fun再帰(elem[CN], obj) } | |
| obj[((name=='input' ? inp接頭辞[elem.type] : '') || tagName2接頭辞[name] || name) + (elem[iT] || elem.value || elem.title || (elem.src ? elem.src.replace(/[\\\/]([^\\\/]+)$/)[1] : '') || '')] = elem | |
| if(iT_Clear[name]){ elem[iT] = elem[iT].charAt(0)=='*' ? elem[iT].replace(/^\*/,'') : '' } | |
| }) } | |
| return function(elem){var obj={elem:elem}; fun再帰(elem[CN], obj); return obj} | |
| }() | |
| getsETN=function(elem, name){return elem.getElementsByTagName(name)} | |
| setProp=function(objTarget, objProp, swSub, swVal){ | |
| forIn(objProp, function(name, v){ | |
| if(swSub && forIn(objProp[name], function(n,v){return setProp(objTarget[name] || (objTarget[name]={}), objProp[name], true, swVal)}) ){ return } | |
| if(swVal && !objProp[name]){ return } | |
| objTarget[name] = objProp[name] | |
| }) | |
| return objTarget | |
| } | |
| </script> | |
| </html> |
0 件のコメント:
コメントを投稿