javascript on

一笔一画：让照片在浏览器里变成手绘动画

Sun, 06 Sep 2026 00:00:00 +1200

之前做过一个古典油画动画，看照片从底色中一层层浮现。这次想试试另一种画法：从一张空白的纸开始，让轮廓、排线和阴影一笔一笔长出来。

于是有了这个「一笔一画」手绘工作室。选择一张图片，浏览器会分析画面的结构，把它转成许多条笔迹，再模拟铅笔落下、移动、抬起的过程。你可以看它慢慢画，也可以加速，或把进度拖回去看看某一片阴影是怎样形成的。

把一张照片逐层画出来：可上传图片的古典油画动画

Mon, 03 Aug 2026 15:30:00 +1200

最近做了一个小小的浏览器绘画实验：上传一张照片，程序便会模仿古典绘画的工作顺序，让画面从空白底色中一层层显现出来。它并不是真的懂得怎样画画，也不是生成一张新的 AI 图片，而是把原图处理成六个视觉阶段，再用许多带方向和透明度的笔触逐步揭开。这样看起来，就像有人正拿着画笔在画布上工作。在

學習的原則以及入微

Fri, 01 Mar 2019 00:26:15 +1300

持續多日的練眼，有了一定的進步，目前已經能看到字號8。字號8即使正常視力者也看得比較費力，現在隻要凝神一看，便能浮現出清晰的小字，並不是代表已經可以扔掉眼鏡了，因為這種狀態應是神識的作用，而非眼的物理結構發生變化。躺在床上看天花板的視力表，凝神看之，可以看到第五行，正常看，也已從

練耳力以及爐火關

Wed, 30 Jan 2019 00:26:15 +1300

前幾日整了練眼力程序。今天再介紹一個練耳力的鏈接。為何要常練眼耳，因眼耳口乃是外三寶。《周易參同契》有雲：耳目口三寶，閉塞勿發揚。《黃帝陰符經》：性有巧拙，可以伏藏，九竅之邪，在乎三要，可以動靜。元朝王道淵注解：“凡遇邪攻九竅，便當運三要以複之。夫惟三要，有內三要，有外三要。內之

兒子的售後服務-練眼力2.1、《童趣》以及假知關

Mon, 28 Jan 2019 00:26:15 +1300

兒子完成生成隨機大寫字符後，我覺得功能還不錯，10紐幣的報酬低了一點，故此又提出一個簡單的job offer。要求可以選擇小寫字母、數字、特殊字符組合生成一個隨機字符串，開價20紐幣。兒子欣然接受，半個小時的工作就完成了，歡喜的拿到報酬。應用過程中，又覺得不太完善，因為用戶選擇的結

練眼力2.0以及妝飾關

Thu, 24 Jan 2019 00:26:15 +1300

兒子完成練眼力javascript小程序後，運行了幾天。感覺有一個比較大的缺點，就是如果知道是什麼文字了，意識會幹擾自己的眼力觀察，從而得不到客觀的數據。基於此，我又提出20紐幣的job offer給12歲的兒子，要求隨機產生數個字母，如此可較準確的得到練眼力的進度。他磨了兩天完成

兒子實現的練眼javascript小程序以及虛度關

Sat, 19 Jan 2019 00:26:15 +1300

練習了幾天扔掉眼鏡計劃，眼力有了一些進步，以前躺在床上看天花板的視力表，擠眉弄眼也隻能看到第二行，今天擠眉弄眼甚至能看到第五行了。雖然仍然在近視人員範疇，但羅馬不是一天建成的，如果能持續進步，那就繼續下去。前幾天通過練眼，想起一個idea，就是通過網站小程序來持續改進，計劃是定製

兒子首個獨立完成的編程任務-javascript holiday以及任性關

Tue, 25 Dec 2018 00:26:15 +1300

兒子首個獨立完成的編程任務-javascript holiday 這段時間學go語言比較懈怠，好多天沒有學新的。兒子school holiday期間，給他布置了三個任務，前兩個我給了很大的提示。第三個基本都是他獨立完成，昨天完成了，樂滋滋的拿了報酬，給他的好朋友買了聖誕節禮物。因我需要一個簡單的功

反反廣告插件簡易實現以及詭詐關

Sat, 01 Dec 2018 00:26:15 +1300

反反廣告插件? 是的，標題沒有打錯。 IT man的寫法應該加個括號，反（反廣告插件）。昨天提到了廣告，多年以前對廣告很感興趣，看過好些部經典的寫廣告書籍，如《影響力》、《百萬美元信》等，前幾個月到美帝一遊，看到路邊的招牌，也感覺是個廣告之國。廣告對市場經濟高速發展起到了一定的作用。不過

歐盟cookie法律簡易應對以及患難關

Fri, 30 Nov 2018 00:26:15 +1300

昨天在Hugo w3 simple模板裏用簡單的代碼實現了基於歐盟cookie法律的瀏覽條提示。這個cookie law已經存在好幾年了，具體解釋google第一條結果就有一個網站cookielaw.org 其網站是英文的，簡單翻譯來說： Cookie Law Cookie法是一項隱私立法，要求網站獲得訪問者

共享條自適應設計以及冷熱關

Sat, 24 Nov 2018 00:26:15 +1300

之前寫個一個小帖子來介紹怎麼做左側共享條，我設計這個Hugo模板也采用了同樣的設計。前兩天有一位國際友人在github上open了一個issue，說是需要修改一下這個共享條的自適應。因為我當時很簡單的處理了一下，當屏幕寬度小於1024px時，自動取消固定在左側的屬性，就放在屏幕下

滑屏進度條實現以及誇揚關

Fri, 23 Nov 2018 00:26:15 +1300

經過一個網站，看到滑屏的時候有個進度條提示，似乎挺有效果。記得w3school曾經講過這個。稍加修改，做在我這個模板裏麵。滑屏進度條實現先設置css .progress-container { display:none; position: fixed; top: 0; z-index: 1; width: 100%; background-color: #f1f1f1; width: 100%; height: 4px; background: #ccc; } .progress-bar { height: 4px; background: #f44336; width: 0%; } 再在頁麵弄個div <div class="progress-container" id="scrollbar"> <div class="progress-bar" id="progress-bar"></div> </div> 然後加入javascript來處理滑屏事件

網頁內嵌pdf文件以及生死關

Wed, 31 Oct 2018 23:17:26 +0000

打算在網站提供電子書在線閱讀，需要內嵌pdf文件。看了一下有挺簡單的解決方法，直接用embed采用瀏覽器自帶的pdf閱讀器。代碼如下： <embed src="https://yourwebsite.com/yourfile.pdf" width="100%" height="500px" type='application/pdf'> 此法簡單，但有以下弱點：手機瀏覽器不支持用戶可以隨意打印下載需要另尋他途。至從用了Linux係統，進入Open Source的世界，想找什

擁抱Bootstrap 4 --先整一個固定瀏覽條以及輕慢關

Tue, 30 Oct 2018 08:01:06 +0000

閑逛w3schools發現Bootstrap 4教程。一看開發的兩位大神也是開發twitter的。 Bootstrap是將javascript和css包裝起來的一個庫。有點像剛開始學編程時的微軟弄的Visual C++的MFC類庫。當年學這個類庫，將codeguru的MFC子類看得爛熟

Javascript實現左側共享條以及恥辱關

Mon, 29 Oct 2018 09:49:15 +0000

前帖話音未落，有點時間，就看看javascript怎麼做。也十分簡單。將php那段代碼更改如下： <script> shareurl=encodeURIComponent(location.protocol + '//' + location.host + location.pathname); sharetitle=encodeURIComponent(document.title); </script> <div class="icon-bar"> <script> document.write( '<a href="http://www.facebook.com/sharer.php?u='+shareurl+'" onclick="window.open(this.href, \'mywin\',\'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;" class="facebook"><i class="fa fa-facebook"></i></a> '); document.write( '<a href="https://twitter.com/share?url='+shareurl+'&text='+sharetitle+'" onclick="window.open(this.href, \'mywin\',\'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;" class="twitter"><i class="fa fa-twitter"></i></a> '); document.write( '<a href="https://plus.google.com/share?url='+shareurl+'" onclick="window.open(this.href, \'mywin\',\'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;" class="google"><i class="fa fa-google"></i></a>'); document.write( '<a href="http://www.linkedin.com/shareArticle?mini=true&url='+shareurl+'" onclick="window.open(this.href, \'mywin\',\'left=20,top=20,width=500,height=500,toolbar=1,resizable=0\'); return false;" class="linkedin"><i class="fa fa-linkedin"></i></a>'); </script> </div> 用javascript實現了這個功能，就可以隨意移植到其他後台程序如P

點擊搜索框顯示熱門搜索以及暴燥關

Wed, 24 Oct 2018 20:53:22 +0000

又想起一個idea，點擊搜索條顯示幾個推薦搜索。搜了幾個Wordpress插件，都不能滿足本人的要求。隻好自己解決了。從最本質的地方思考，觸發點擊搜索框的就是onfocus，然後做一個Div,平時是不顯示的，觸發onfocus的時候顯示。最開始搜到的解決方法是直接用css來觸發f

用DIVI按鈕令PDF文件鏈接強製下載以及妄想關

Fri, 19 Oct 2018 21:00:07 +0000

新項目中，提供免費PDF文件下載。然則放上一個PDF鏈接，直接點擊後仍然保持在瀏覽器中，用戶需要在瀏覽器再選擇下載。這個用戶體驗不佳，在UX的報告Top 10 Mistakes in Web Design排名第二。 Google了一下解決方案。用HTML5的download屬性加入到鏈接，就可以強製用戶下載了。但

Wordpress前端+Python後台有機結合做一個今日熱數的插件

Sat, 29 Sep 2018 04:37:03 +0000

今天是甲子日，打算開始進行財運的觀照之旅。擬借某在線平台的輪盤作為實驗對象，而根據本人的帖子幸存者偏差、彩票偏向是不可能根據實時出來的數字來頭上安頭來預測結果的。但是可以參考大數據的數字分布來設定一個固定的策略來盡量發揮自身的財運。想到一個方式，就是測試當天的隨機10000個數字

根據利潤因子Profit Factor、ROI推導交易係統的期望收益

Sat, 15 Sep 2018 08:02:27 +0000

解決了在網頁上放一個計算器的問題後，想起了不久前一個想法。做了一個期望收益計算器在本頁麵。外彙測試軟件沒有期望收益的計算，隻有利潤因子Profit Factor，這樣沒有辦法用到我15年前編的money軟件來模擬測試，選出最佳的頭寸管理方案。如果ROI不固定，確實很難在軟件裏麵算出

足彩賠率反推返現率、資金比例計算器以及在Wordpress頁麵添加javascript代碼

Fri, 14 Sep 2018 23:08:39 +0000

昨天寫100倍域名估值、幸存者偏差、彩票偏向及人定勝天時，有個足彩的賠率計算，一個個代入比較麻煩，打算用javascript做一個簡單的計算器。足彩賠率反推返現率、資金比例計算器如下：請輸入賠率：勝賠率: 平賠率: 負賠率: 計算代碼很簡單,但加入到wordpress出了些問題。 wor