【編程遊戲】賀歲霓虹燈。(第一名獎勵10000可用分)
效果圖
評分
參觀 [目前Firefox中好使,其他瀏覽器需複製到本地,存爲html文件看效果] <!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd"> <html> <head> <title>javascript霓虹燈 - 新年快樂Happy New Year</title> <!--meta http-equiv="content-type" content="text/html; charset=utf-8"--> <meta name="author" content="dh20156@www.w3cgroup.com" /> <meta name="keywords" content="javascript,霓虹燈" /> <meta name="description" content="新年快樂Happy New Year" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <style type="text/css"> html,body{background:#000;text-align:center;} .neon{border:none;} .neon *{margin:0;padding:0;} .neon td{font-size:0;line-height:0;} .vneon td{background:red;width:2px;height:238px;} .hneon td{background:blue;width:798px;height:2px;} .wrap{width:800px;height:240px;margin:0 auto;position:relative;} #txt{margin:0;position:absolute;left:0;top:0;z-index:3;font-family:verdana;font-size:60px;color:white;width:798px;text-align:center;height:238px;line-height:238px;filter:glow(color=red,Strength=8);} #vneon{position:absolute;left:0;top:0;z-index:2;} #hneon{position:absolute;left:0;top:0;z-index:1;} </style> </head> <body> <div class="wrap"> <h1 id="txt">HappyNewYear<sup>新年快樂</sup></h1> <div id="vneon">vneon</div> <div id="hneon">hneon</div> </div> </body> <script type="text/javascript"> var hsb2rgb = function(h,s,b){var nH,nS,nV,nR,nG,nB,hi,f,p,q,t;nH=h/360,nS=s/100,nV=b/100;if(!s){nR=nV*255|0,nG=nV*255|0,nB=nV*255|0;nR=(nR<0)?0:nR,nG=(nG<0)?0:nG,nB=(nB<0)?0:nB;return[nR,nG,nB];}hi=nH*6;if(hi==6){hi=0;}f=hi|0,p=nV*(1-nS),q=nV*(1-nS*(hi-f)),t=nV*(1-nS*(1-(hi-f)));switch(f){case 0:nR=nV,nG=t,nB=p;break;case 1:nR=q,nG=nV,nB=p;break;case 2:nR=p,nG=nV,nB=t;break;case 3:nR=p,nG=q,nB=nV;break;case 4:nR=t,nG=p,nB=nV;break;default:nR=nV,nG=p,nB=q;break;}nR=nR*255|0,nG=nG*255|0,nB=nB*255|0;nR=(nR<0)?0:nR,nG=(nG<0)?0:nG,nB=(nB<0)?0:nB;return[nR,nG,nB];}; var newcanvas = function(c,r){var std = new Array(c+1).join('<td></td>');var str = new Array(r+1).join('<tr>'+std+'</tr>');return '<table cellspacing="2" cellpadding="0">'+str+'</table>';}; var neonEffect = { chromatogram:function(h,speed,showtimer){ var starth = isNaN(h)?0:(h>360)?0:(h<0)?0:h,speed = speed||10,me = this,srgb = 'rgb('+hsb2rgb(starth,100,100).join(',')+')'; this.style.background = srgb; var show = function(){ if(starth>=360){starth = 0;} var srgb = 'rgb('+hsb2rgb(starth,100,100).join(',')+')'; me.style.background = srgb; starth+=speed; showtimer = window.setTimeout(arguments.callee,1); }; show(); } }; var neon = function(type,effect){ this.stype = ['neon vneon','neon hneon'][(isNaN(type)?0:type>1?1:type)]; this.className = this.stype; this.effect = effect||'chromatogram'; this.afterin = null; this.afterout = null; this.showtimer = null; this.setalpha = function(iopacity){ this.style.opacity = iopacity/100; this.style.filter = 'alpha(opacity='+iopacity+')'; }; this.easyin = function(){ var me = this,iopacity = 5; var innerfoo = function(){ if(iopacity>=100){if(me.afterin){me.afterin();}return;} iopacity += 5; me.setalpha(iopacity); window.setTimeout(arguments.callee,100); }; innerfoo(); }; this.easyout = function(){ var me = this,iopacity = 100; var innerfoo = function(){ if(iopacity<=20){if(me.afterout){me.afterout();}return;} iopacity -= 5; me.setalpha(iopacity); window.setTimeout(arguments.callee,100); }; innerfoo(); }; this.turnon = function(){this.style.display = 'block';}; this.turnoff = function(){this.style.opacity = 0,this.style.filter = 'alpha(opacity=0)';this.style.display = 'none';}; this.init = function(){ this.turnoff(); var drow = this.rows,lr = drow.length,lc = drow[0].cells.length,stype = this.stype,classEffect = neonEffect[this.effect]; var ismsie = /msie/i.test(navigator.appVersion); var showtimer = this.showtimer,sh = 0,sp1 = ismsie?20:10,sp2 = ismsie?10:5; if(stype=='neon vneon'){ for(var c=0;c<lc;c++){classEffect.call(drow[0].cells[c],sh,sp1,showtimer);sh += 1;} }else{ for(var r=0;r<lr;r++){classEffect.call(drow[r].cells[0],sh,sp2,showtimer);sh += 1;} } }; this.init(); }; var dv = document.getElementById('vneon'); dv.innerHTML = newcanvas(200,1); var dvneon = dv.childNodes[0]; neon.call(dvneon,0,'chromatogram'); dvneon.afterin = function(){window.setTimeout(function(){dvneon.easyout();},5000);}; dvneon.afterout = function(){dvneon.turnoff();dhneon.turnon();dhneon.easyin();}; dvneon.turnon(); dvneon.easyin(); var dh = document.getElementById('hneon'); dh.innerHTML = newcanvas(1,60); var dhneon = dh.childNodes[0]; neon.call(dhneon,1,'chromatogram'); dhneon.afterin = function(){window.setTimeout(function(){dhneon.easyout();},5000);}; dhneon.afterout = function(){dhneon.turnoff();dvneon.turnon();dvneon.easyin();}; </script> </html>參觀 [目前Firefox中好使,其他瀏覽器需複製到本地,存爲html文件看效果]
DHTMLX Diagram庫允許用幾行代碼構建JavaScript流程圖,通過自動佈局和實時編輯器,它可以更容易地將複雜數據可視化到一個整潔的層次結構中。 DHTMLX Diagram v6.0版本發佈,帶來了衆多令人興奮的新功能和改進,
本文分享自華爲雲社區《【端午特輯】代碼高手的過節祕籍:CodeArt Snap幫寫代碼,靈感彈指間實現》,作者: 華爲雲社區精選。 端午將至,糉葉飄香,你卻還在爲一行行代碼頭疼?與bug纏鬥不休? 現在,基於盤古大模型技術打造的華爲雲智能開
一 用例生成實踐效果 在組內的日常工作安排中,持續優化測試技術、提高測試效率始終是重點任務。近期,我們在探索實踐使用大模型生成測試用例,期望能夠藉助其強大的自然語言處理能力,自動化地生成更全面和高質量的測試用例。 當前,公司已經普及使用J
作者:尹航 在前文《基於阿里雲服務網格流量泳道的全鏈路流量管理(一):嚴格模式流量泳道》、《基於阿里雲服務網格流量泳道的全鏈路流量管理(二):寬鬆模式流量泳道》中,我們介紹了流量泳道的概念、使用流量泳道進行全鏈路灰度管理的方案,以及阿里雲服
本文分享自華爲雲社區《使用MetaStudio生產線四步製作數字人視頻》,作者: yd_298097624。 隨着AIGC新技術尤其是大模型技術的發展,音視頻行業、數字內容生產行業正在經歷這從生產方式和生產效率上的一個巨大變化。預測到203
引言 Reddit,作爲一個全球性的社交平臺,擁有海量的用戶生成內容,其中包括大量的圖片資源。對於數據科學家、市場研究人員或任何需要大量圖片資源的人來說,自動化地從Reddit收集圖片是一個極具價值的技能。本文將詳細介紹如何使用Pyth
一、背景 在日常部門OpsReview過程中,部門內多次遇到應用容器所在的宿主機磁盤繁忙導致的接口響應緩慢,TP99增高等影響服務性能的問題,其中比較有效的解決方案是開啓日誌的異步打印,可以有效避免同步日誌打印在磁盤IO高起的情況下拖慢業
本文分享自華爲雲社區《【華爲雲MySQL技術專欄】MySQL內存增長問題分析案例》,作者:GaussDB 數據庫。 前言 在現網環境中,偶爾會遇到客戶實例內存OOM(Out Of Memory,即內存耗盡或溢出)的情況。MySQL數據庫
1 前言 前文 《深入跨域 - 從初識到入門》 中,大家已經對同源與跨域的產生歷史與重要性等有了一個初步的瞭解了,那麼我們應該如何解決在日常開發中遇到的跨域引起的問題呢? 2 一覽圖 我們將日常開發中的跨域解決方案大體分爲兩類:if
LightningChart JS是Web上性能特高的圖表庫,具有出色的執行性能 - 使用高數據速率同時監控數十個數據源。 GPU加速和WebGL渲染確保您的設備的圖形處理器得到有效利用,從而實現高刷新率和流暢的動畫,常用於貿易,工程,航空
在當今數字化時代,社交媒體已成爲人們獲取信息、分享生活和進行商業推廣的重要平臺。隨着社交媒體內容的爆炸性增長,自動化抓取社交媒體上的媒體資源變得尤爲重要。本文將介紹如何使用Puppeteer這一強大的自動化工具來實現這一目標。 1. P
引言 在當今數字化時代,網絡數據採集已成爲獲取信息的重要手段之一。Symfony Panther,作爲Symfony生態系統中的一個強大工具,爲開發者提供了一種簡單、高效的方式來模擬瀏覽器行爲,實現網絡數據的採集和自動化操作。本文將通過