Gadget on Chang Luo https://www.luochang.ink/gadget/ Recent content in Gadget on Chang Luo Hugo zh-CN https://www.luochang.ink/gadget/algorithms/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/algorithms/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>算法集萃</title> <link rel="shortcut icon" type="image/png" href="https://www.luochang.ink/favicon.png"> <link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/github.min.css"> <link rel="stylesheet" href="https://www.luochang.ink/scss/hyde-hyde.6a83d62c39a364f036df4db1ecd564645635d6c7fc182425cb501218fec485f5.css" integrity="sha256-aoPWLDmjZPA2302x7NVkZFY11sf8GCQly1ASGP7EhfU="> </head> <body> <div id="header"> <div class="navbar"> <a href="https://www.luochang.ink/">Home</a> <a href="https://www.luochang.ink/portfolio/">Projects</a> <a href="https://www.luochang.ink/about/">About</a> </div> <!-- <div id="link"><a href="https://github.com/luochang212">© 2019 Chang Luo</a></div> --> </div> <div id="container"> <center> <br> <h1>算法集萃</h1> </center> <br> <h3>1. 分配货物</h3> <p>有四条船，有一堆货物。往每条船上分配货物，要求每条船上货物的重量相等。 列表中的元素表示每个货物的重量。 返回 Ture 或者 False 表示是否存在满足条件的装货方式。 </p> <p><b>示例：</b></p> <pre><code class="language-python">输入: [2,2,2,1,1] 输出: True 输入: [2,2,2,3] 输出: False</code></pre> <p><b>解答：</b></p> <pre><code class="language-python">None</code></pre> <br> <h3>2. 复原IP地址<a href="https://leetcode-cn.com/problems/restore-ip-addresses/solution/fu-yuan-ipdi-zhi-by-leetcode/">[LeetCode]</a></h3> <p>给定一个只包含数字的字符串，复原它并返回所有可能的 IP 地址格式。 </p> <p><b>示例：</b></p> <pre><code class="language-python">输入: "25525511135" 输出: ["255.255.11.135", "255.255.111.35"]</code></pre> <p><b>解答：</b></p> <pre><code class="language-python">None</code></pre> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script> <script type="text/javascript"> hljs.initHighlightingOnLoad(); </script> </body> </html> https://www.luochang.ink/gadget/attention-is-all-you-need/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/attention-is-all-you-need/ <!DOCTYPE html> <!-- saved from url=(0044)https://ar5iv.labs.arxiv.org/html/1706.03762 --> <html lang="en" data-theme="light"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>[1706.03762] Attention Is All You Need</title><meta property="og:description" content="The dominant sequence transduction models are based on complex recurrent or convolutional neural networks that include an encoder and a decoder. The best performing models also connect the encoder and decoder through a…"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Attention Is All You Need"> <meta name="twitter:image:src" content="https://ar5iv.labs.arxiv.org/assets/ar5iv_card.png"> <meta name="twitter:image:alt" content="ar5iv logo"> <meta property="og:title" content="Attention Is All You Need"> <meta property="og:site_name" content="ar5iv"> <meta property="og:image" content="https://ar5iv.labs.arxiv.org/assets/ar5iv_card.png"> <meta property="og:type" content="article"> <meta property="og:url" content="https://ar5iv.labs.arxiv.org/html/1706.03762"> <!--Generated on Sun Mar 3 23:17:54 2024 by LaTeXML (version 0.8.8) http://dlmf.nist.gov/LaTeXML/.--> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <script> function detectColorScheme(){ var theme="light"; var current_theme = localStorage.getItem("ar5iv_theme"); if(current_theme){ if(current_theme == "dark"){ theme = "dark"; } } else if(!window.matchMedia) { return false; } else if(window.matchMedia("(prefers-color-scheme: dark)").matches) { theme = "dark"; } if (theme=="dark") { document.documentElement.setAttribute("data-theme", "dark"); } else { document.documentElement.setAttribute("data-theme", "light"); } } detectColorScheme(); function toggleColorScheme(){ var current_theme = localStorage.getItem("ar5iv_theme"); if (current_theme) { if (current_theme == "light") { localStorage.setItem("ar5iv_theme", "dark"); } else { localStorage.setItem("ar5iv_theme", "light"); } } else { localStorage.setItem("ar5iv_theme", "dark"); } detectColorScheme(); } </script> <link media="all" rel="stylesheet" href="https://www.luochang.ink/[1706.03762] Attention Is All You Need_files/ar5iv-fonts.0.7.9.min.css"><link media="all" rel="stylesheet" href="https://www.luochang.ink/[1706.03762] Attention Is All You Need_files/ar5iv.0.7.9.min.css"><link media="all" rel="stylesheet" href="https://www.luochang.ink/[1706.03762] Attention Is All You Need_files/ar5iv-site.0.2.2.css"> </head> <body> <div class="ltx_page_main"> <div class="ltx_page_content"> <article class="ltx_document ltx_authors_1line"> <div id="p1" class="ltx_para"> <p id="p1.1" class="ltx_p ltx_align_center"><span id="p1.1.1" class="ltx_text" style="color:#FF0000;">Provided proper attribution is provided, Google hereby grants permission to reproduce the tables and figures in this paper solely for use in journalistic or scholarly works.</span></p> https://www.luochang.ink/gadget/baijiahao/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/baijiahao/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>百家号模拟器</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="header"> <div class="navbar"> <a href="https://www.luochang.ink/">Home</a> <a href="https://www.luochang.ink/portfolio/">Projects</a> <a href="https://www.luochang.ink/about/">About</a> </div> </div> <div id="container"> <center> <br><br> <h1>百家号模拟器</h1> <br><br> 主题：<input type="text" id="theme" value="老八秘制小憨堡"/> <br><br> 属性：<input type="text" id="attribute" value="梗"/> <br><br> <button class="btn" onclick="main()">生成文章</button> <br><br><br> </center> <div id="content"></div> <br><br> </div> <script src="./script.js"></script> </body> </html> https://www.luochang.ink/gadget/flockn-roll/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/flockn-roll/ <!DOCTYPE html> <html lang="en" class="gr__rocs_hu-berlin_de"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" href="https://www.luochang.ink/Flock'n Roll/style.css"> <link rel="stylesheet" type="text/css" href="https://www.luochang.ink/Flock'n Roll/slider.css"> <link href="https://www.luochang.ink/Flock'n Roll/css" rel="stylesheet" type="text/css"> <script src="https://www.luochang.ink/Flock'n Roll/d3.v4.min.js.download" type="text/javascript"></script> <script src="https://www.luochang.ink/Flock'n Roll/widget.2.2.js.download" type="text/javascript"></script> <title>Collective Motion</title> </head> <body data-gr-c-s-loaded="true"> <div id="content"> <div id="container"> <g id="sliders" transform="translate(10,30)"> <g class="slider" id="slider_speed" transform="translate(0,0)"> <line class="track" style="stroke-width: 5;" x1="0" x2="180"></line> <line class="track-inset" style="stroke-width: 4;" x1="0" x2="180"></line> <circle class="handle" cx="144" id="handle_speed" r="6"></circle> <line class="track-overlay" style="stroke-width: 12; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" x1="0" x2="180"></line> <text class="tag" style="text-anchor: start; alignment-baseline: middle; font-size: 12px; opacity: 1;" transform="translate(0,-12)"> Speed </text> </g> <g class="slider" id="slider_noise_heading" transform="translate(0,38)"> <line class="track" style="stroke-width: 5;" x1="0" x2="180"></line> <line class="track-inset" style="stroke-width: 4;" x1="0" x2="180"></line> <circle class="handle" cx="90" id="handle_noise_heading" r="6"></circle> <line class="track-overlay" style="stroke-width: 12; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" x1="0" x2="180"></line> <text class="tag" style="text-anchor: start; alignment-baseline: middle; font-size: 12px; opacity: 1;" transform="translate(0,-12)"> Wiggle </text> </g> <g class="slider" id="slider_rcoll" transform="translate(0,86)"> <line class="track" style="stroke-width: 5;" x1="0" x2="180"></line> <line class="track-inset" style="stroke-width: 4;" x1="0" x2="180"></line> <circle class="handle" cx="9" id="handle_rcoll" r="6"></circle> <line class="track-overlay" style="stroke-width: 12; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" x1="0" x2="180"></line> <text class="tag" style="text-anchor: start; alignment-baseline: middle; font-size: 12px; opacity: 1;" transform="translate(0,-12)"> Collision Radius </text> </g> <g class="slider" id="slider_ralign" transform="translate(0,124)"> <line class="track" style="stroke-width: 5;" x1="0" x2="180"></line> <line class="track-inset" style="stroke-width: 4;" x1="0" x2="180"></line> <circle class="handle" cx="45" id="handle_ralign" r="6"></circle> <line class="track-overlay" style="stroke-width: 12; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" x1="0" x2="180"></line> <text class="tag" style="text-anchor: start; alignment-baseline: middle; font-size: 12px; opacity: 1;" transform="translate(0,-12)"> Alignment Radius </text> </g> <g class="slider" id="slider_rattract" transform="translate(0,162)"> <line class="track" style="stroke-width: 5;" x1="0" x2="180"></line> <line class="track-inset" style="stroke-width: 4;" x1="0" x2="180"></line> <circle class="handle" cx="135" id="handle_rattract" r="6"></circle> <line class="track-overlay" style="stroke-width: 12; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" x1="0" x2="180"></line> <text class="tag" style="text-anchor: start; alignment-baseline: middle; font-size: 12px; opacity: 1;" transform="translate(0,-12)"> Attraction Radius </text> </g> <g class="slider" id="slider_blindspot" transform="translate(0,210)"> <line class="track" style="stroke-width: 5;" x1="0" x2="180"></line> <line class="track-inset" style="stroke-width: 4;" x1="0" x2="180"></line> <circle class="handle" cx="59.66573816155989" id="handle_blindspot" r="6"></circle> <line class="track-overlay" style="stroke-width: 12; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);" x1="0" x2="180"></line> <text class="tag" style="text-anchor: start; alignment-baseline: middle; font-size: 12px; opacity: 1;" transform="translate(0,-12)"> Blind Spot </text> </g> </g> <g transform="translate(320,67.5)"> <path d="M 0,0 L -40.59494080239556,23.437500000000004 A 46.875 46.875 0 1 1 40.59494080239556,23.437500000000004L 0,0" id="attract_scope"></path> <path d="M 0,0 L -13.531646934131853,7.812500000000002 A 15.625 15.625 0 1 1 13.531646934131853,7.812500000000002L 0,0" id="orient_scope"></path> <path d="M 0,0 L -12.940952255126042,-48.29629131445341 A 50 50 0 0 1 12.940952255126042,-48.29629131445341L 0,0" id="speed"></path> <path class="drop" d="M-10,0L-9.781476007338057,0.0000013559894431524102L-9.135454576426008,0.00016426943596341506L-8.090169943749475,0.0025590741750720378L-6.691306063588582,0.016823767664085196L-5.000000000000001,0.06765823467065922L-3.0901699437494745,0.19610489832639383L-1.0452846326765346,0.4463234694540685L1.0452846326765333,0.8375776926373233L3.0901699437494736,1.3332825570450615L4.999999999999998,1.8267723361077999L6.691306063588579,2.1598542120919086L8.090169943749473,2.1748366492414193L9.13545457642601,1.7811876213190558L9.781476007338057,1.0058541416985987L10,6.123233995736766e-16L9.781476007338057,-1.005854141698598L9.13545457642601,-1.7811876213190547L8.090169943749475,-2.17483664924142L6.691306063588584,-2.1598542120919086L5.000000000000004,-1.8267723361078005L3.0901699437494754,-1.3332825570450613L1.0452846326765424,-0.8375776926373246L-1.0452846326765388,-0.4463234694540675L-3.0901699437494723,-0.1961048983263941L-5.000000000000001,-0.06765823467065922L-6.691306063588584,-0.016823767664085165L-8.090169943749473,-0.0025590741750720447L-9.13545457642601,-0.00016426943596341506L-9.781476007338055,-0.0000013559894431524354" style="fill-opacity: 1; fill: black; stroke: black;" transform="scale(4)translate(0,6.25)rotate(-90)"></path> <circle id="repell_scope" r="3.125"></circle> </g> <g transform="translate(300,218.75)"> <g transform="translate(-60,0)"> <g class="button" id="button_b1"> <circle class="button-background" r="25"></circle> <path class="button-symbol" d="M12.5,0L-6.25,10.825317547305483L-6.25,-10.825317547305483Z"></path> <text class="tag" style="opacity: 1; text-anchor: middle; font-size: 12px; alignment-baseline: hanging;" transform="translate(0,30)"></text> </g> </g> <g transform="translate(0,0)"> <g class="button" id="button_b2"> <circle class="button-background" r="25"></circle> <path class="button-symbol" d="M-12.5,0L6.25,10.825317547305483L6.25,-10.825317547305483Z"></path> <text class="tag" style="opacity: 1; text-anchor: middle; font-size: 12px; alignment-baseline: hanging;" transform="translate(0,30)"></text> </g> </g> <g transform="translate(60,0)"> <g class="button" id="button_b3"> <circle class="button-background" r="25"></circle> <path class="button-symbol" d="M10.112712429686841,-7.347315653655917A12.5,12.5,0,1,0,10.112712429686843,7.347315653655914L5.056356214843421,3.673657826827957A6.25,6.25,0,1,1,5.0563562148434205,-3.6736578268279585L1.5169068644530264,-1.1020973480483878L11.992923714458682,0.5571407175701673L13.652161780077236,-9.918876132435487Z"></path> <text class="tag" style="opacity: 1; text-anchor: middle; font-size: 12px; alignment-baseline: hanging;" transform="translate(0,30)"></text> </g> </g> </g> </div> </div> <script src="https://www.luochang.ink/Flock'n Roll/sim.js.download" type="text/javascript"></script> </html> https://www.luochang.ink/gadget/font/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/font/ <blockquote class="style1"> Don't threaten me with a good time &#9834; </blockquote> <blockquote class="style2"> Don't threaten me with a good time &#9834; </blockquote> <blockquote class="style3"> Don't threaten me with a good time &#9834; </blockquote> <link rel="stylesheet" type="text/css" href="style.css"> https://www.luochang.ink/gadget/gallery/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/gallery/ <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> * { box-sizing: border-box; } body { margin: 0; font-family: Arial, Helvetica, sans-serif; } .header { text-align: center; padding: 32px; } .row { display: -ms-flexbox; /* IE 10 */ display: flex; -ms-flex-wrap: wrap; /* IE 10 */ flex-wrap: wrap; padding: 0 4px; } /* Create two equal columns that sits next to each other */ /* 列数初始化 */ .column { -ms-flex: 25%; /* IE 10 */ flex: 25%; padding: 0 4px; } .column img { margin-top: 8px; vertical-align: middle; } /* Style the buttons */ .btn { border: none; outline: none; padding: 10px 16px; background-color: #f1f1f1; cursor: pointer; font-size: 18px; } .btn:hover { background-color: #ddd; } .btn.active { background-color: #666; color: white; } </style> </head> <body> <!-- Header --> <div class="header" id="myHeader"> <h1>Gallery</h1> <p>Click on the buttons to change the grid view.</p> https://www.luochang.ink/gadget/happy-birthday/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/happy-birthday/ <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>┗|｀O′|┛</title> <link rel="stylesheet" href="./bulb.css"> <link rel="stylesheet" href="./style.css"> </head> <body> <div id="ttl" class="title"> Happy Birthday<br> To<br> 赵公公 </div> <img id="robot" class="robot-img" src="./assets/robot.png" /> <div id="dots-root"> <div id="dots"></div> </div> <div id="balloons-root"></div> <div id="bulbs-root"></div> <script src="./animation.js"></script> </body> </html> https://www.luochang.ink/gadget/how-old-are-you/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/how-old-are-you/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>年龄可视化</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="header"> <div class="navbar"> <a href="https://www.luochang.ink/">Home</a> <a href="https://www.luochang.ink/portfolio/">Projects</a> <a href="https://www.luochang.ink/about/">About</a> </div> <!-- <div id="link"><a href="https://github.com/luochang212">© 2019 Chang Luo</a></div> --> </div> <div id="container"> <center> <br> <h1>A 90-Year Human Life in Months</h1> <br><br> Your Age: <input type="text" id="your-age"> <input type="button" value="Submit" onclick="draw();"> <br><br><br> <div id="graph-container"></div> <br><br> Inspired by <a href="https://waitbutwhy.com/2014/05/life-weeks.html" target="_blank">Your Life in Weeks</a>. <br><br><br> </center> </div> <script src="./script.js"></script> </body> </html> https://www.luochang.ink/gadget/hydra/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/hydra/ <!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>Hydra</title> </head> hydra <body> <button class='glowing-btn'><span class='glowing-txt'>H</H1><span class='faulty-letter'>Y</span>DRA</span></button> </body> <style> @import url("https://fonts.googleapis.com/css?family=Raleway"); :root { --glow-color: hsl(186 100% 69%); } *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; width: 100%; overflow: hidden; } body { min-height: 100vh; display: flex; justify-content: center; align-items: center; background: black; } .glowing-btn { position: relative; color: var(--glow-color); cursor: pointer; padding: 0.35em 1em; border: 0.15em solid var(--glow-color); border-radius: 0.45em; background: none; perspective: 2em; font-family: "Raleway", sans-serif; font-size: 2em; font-weight: 900; letter-spacing: 1em; -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), 0px 0px 0.5em 0px var(--glow-color); -moz-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), 0px 0px 0.5em 0px var(--glow-color); box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), 0px 0px 0.5em 0px var(--glow-color); animation: border-flicker 2s linear infinite; } .glowing-txt { float: left; margin-right: -0.8em; -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color); -moz-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color); text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color); animation: text-flicker 3s linear infinite; } .faulty-letter { opacity: 0.5; animation: faulty-flicker 2s linear infinite; } .glowing-btn::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.7; filter: blur(1em); transform: translateY(120%) rotateX(95deg) scale(1, 0.35); background: var(--glow-color); pointer-events: none; } .glowing-btn::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; z-index: -1; background-color: var(--glow-color); box-shadow: 0 0 2em 0.2em var(--glow-color); transition: opacity 100ms linear; } .glowing-btn:hover { color: rgba(0, 0, 0, 0.8); text-shadow: none; animation: none; } .glowing-btn:hover .glowing-txt { animation: none; } .glowing-btn:hover .faulty-letter { animation: none; text-shadow: none; opacity: 1; } .glowing-btn:hover:before { filter: blur(1.5em); opacity: 1; } .glowing-btn:hover:after { opacity: 1; } @keyframes faulty-flicker { 0% { opacity: 0.1; } 2% { opacity: 0.1; } 4% { opacity: 0.5; } 19% { opacity: 0.5; } 21% { opacity: 0.1; } 23% { opacity: 1; } 80% { opacity: 0.5; } 83% { opacity: 0.4; } 87% { opacity: 1; } } @keyframes text-flicker { 0% { opacity: 0.1; } 2% { opacity: 1; } 8% { opacity: 0.1; } 9% { opacity: 1; } 12% { opacity: 0.1; } 20% { opacity: 1; } 25% { opacity: 0.3; } 30% { opacity: 1; } 70% { opacity: 0.7; } 72% { opacity: 0.2; } 77% { opacity: 0.9; } 100% { opacity: 0.9; } } @keyframes border-flicker { 0% { opacity: 0.1; } 2% { opacity: 1; } 4% { opacity: 0.1; } 8% { opacity: 1; } 70% { opacity: 0.7; } 100% { opacity: 1; } } @media only screen and (max-width: 600px) { .glowing-btn{ font-size: 1em; } } </style> </html> https://www.luochang.ink/gadget/live2d/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/live2d/ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Live2D！</title> <link rel="stylesheet" href="https://www.luochang.ink/gadget/live2d/live2d/css/live2d.css" /> </head> <body> <div id="landlord"> <div class="message" style="opacity:0"></div> <canvas id="live2d" width="280" height="525" class="live2d"></canvas> <div class="hide-button">隐藏</div> </div> <!-- <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> --> <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.3.min.js"></script> <script type="text/javascript"> var message_Path = '/live2d/' var home_Path = 'http://localhost' </script> <script type="text/javascript" src="https://www.luochang.ink/gadget/live2d/live2d/js/live2d.js"></script> <script type="text/javascript" src="https://www.luochang.ink/gadget/live2d/live2d/js/message.js"></script> <script type="text/javascript"> loadlive2d("live2d", "/gadget/live2d/live2d/model/live2d-widget-model-shizuku/assets/shizuku.model.json"); </script> </body> </html> https://www.luochang.ink/gadget/monaco-speech-editor/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/monaco-speech-editor/ <!DOCTYPE html> <html> <head> <title>Monaco Speech Editor</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <meta name="description" content="online code editor"> <meta name="keywords" content="speech,editor,code editor,blind,visually impaired,accessibility,JavaScript"> <meta name="author" content="Chang Luo"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./src/style.css"> <link rel="shortcut icon" type="image/png" href="./images/logo-1.jpeg"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> // Check before leave website window.addEventListener('beforeunload', function (e) { // Cancel the event e.preventDefault(); // Chrome requires returnValue to be set e.returnValue = 'Do you sure'; }); </script> </head> <body> <div id="header"> <div id="show-file-name"> <input class="textarea-readonly" id="editable-textarea" readonly value="Untitled-1" /> </div> </div> <div id="left-nav"> <div role=button class="left-nav-button" id="left-nav-button-1" onclick="clickLeftNav(event, 'sidebar-1')"> <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="file-alt" class="svg-inline--fa fa-file-alt fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"> <path fill="currentColor" d="M288 248v28c0 6.6-5.4 12-12 12H108c-6.6 0-12-5.4-12-12v-28c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm-12 72H108c-6.6 0-12 5.4-12 12v28c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-28c0-6.6-5.4-12-12-12zm108-188.1V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V48C0 21.5 21.5 0 48 0h204.1C264.8 0 277 5.1 286 14.1L369.9 98c9 8.9 14.1 21.2 14.1 33.9zm-128-80V128h76.1L256 51.9zM336 464V176H232c-13.3 0-24-10.7-24-24V48H48v416h288z"> </path> </svg> </div> <div role=button class="left-nav-button" id="left-nav-button-2" onclick="clickLeftNav(event, 'sidebar-2')"> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="upload" class="svg-inline--fa fa-upload fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"> </path> </svg> </div> <div role=button class="left-nav-button" id="left-nav-button-3" onclick="clickLeftNav(event, 'sidebar-3')"> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="tools" class="svg-inline--fa fa-tools fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M501.1 395.7L384 278.6c-23.1-23.1-57.6-27.6-85.4-13.9L192 158.1V96L64 0 0 64l96 128h62.1l106.6 106.6c-13.6 27.8-9.2 62.3 13.9 85.4l117.1 117.1c14.6 14.6 38.2 14.6 52.7 0l52.7-52.7c14.5-14.6 14.5-38.2 0-52.7zM331.7 225c28.3 0 54.9 11 74.9 31l19.4 19.4c15.8-6.9 30.8-16.5 43.8-29.5 37.1-37.1 49.7-89.3 37.9-136.7-2.2-9-13.5-12.1-20.1-5.5l-74.4 74.4-67.9-11.3L334 98.9l74.4-74.4c6.6-6.6 3.4-17.9-5.7-20.2-47.4-11.7-99.6.9-136.6 37.9-28.5 28.5-41.9 66.1-41.2 103.6l82.1 82.1c8.1-1.9 16.5-2.9 24.7-2.9zm-103.9 82l-56.7-56.7L18.7 402.8c-25 25-25 65.5 0 90.5s65.5 25 90.5 0l123.6-123.6c-7.6-19.9-9.9-41.6-5-62.7zM64 472c-13.2 0-24-10.8-24-24 0-13.3 10.7-24 24-24s24 10.7 24 24c0 13.2-10.7 24-24 24z"> </path> </svg> </div> <div role=button class="left-nav-button" id="left-nav-button-4" onclick="clickLeftNav(event, 'sidebar-4')"> <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="cog" class="svg-inline--fa fa-cog fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <path fill="currentColor" d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"> </path> </svg> </div> <div id="github-link"> <a href="https://github.com/luochang212/monaco-speech-editor" target="_blank"><img src="./images/GitHub-Mark-Light-64px.png" alt="github"></a> </div> </div> <div id="left-sidebar"> <div id="sidebar-1" class="tabcontent"> <div class="sidebar-top-title"> <p>Explorer</p> https://www.luochang.ink/gadget/mozi/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/mozi/ <!DOCTYPE html> <!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]--> <!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]--> <!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]--> <!--[if (gte IE 9)|!(IE)]><!--> <html lang="en"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="description" content="读书笔记"> <meta name="author" content="Chang Luo"> <meta name="keywords" content="墨子"> <title>墨子 | 读书笔记</title> <link rel="shortcut icon" href="https://www.luochang.ink/doc/images/favicon.ico" type="image/x-icon"> <link rel="stylesheet" type="text/css" href="https://www.luochang.ink/doc/fonts/font-awesome-4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="https://www.luochang.ink/doc/css/stroke.css"> <link rel="stylesheet" type="text/css" href="https://www.luochang.ink/doc/css/bootstrap.css"> <link rel="stylesheet" type="text/css" href="https://www.luochang.ink/doc/css/animate.css"> <link rel="stylesheet" type="text/css" href="https://www.luochang.ink/doc/css/prettyPhoto.css"> <link rel="stylesheet" type="text/css" href="https://www.luochang.ink/doc/css/style.css"> <link rel="stylesheet" type="text/css" href="https://www.luochang.ink/doc/js/syntax-highlighter/styles/shCore.css" media="all"> <link rel="stylesheet" type="text/css" href="https://www.luochang.ink/doc/js/syntax-highlighter/styles/shThemeRDark.css" media="all"> <!-- CUSTOM --> <link rel="stylesheet" type="text/css" href="https://www.luochang.ink/doc/css/custom.css"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <div id="wrapper"> <div class="container"> <section id="top" class="section docs-heading"> <div class="row"> <div class="col-md-12"> <div class="big-title text-center"> <h1>墨子</h1> <p class="lead">原文及读书笔记</p> </div> <!-- end title --> </div> <!-- end 12 --> </div> <!-- end row --> <hr> </section> <!-- end section --> <div class="row"> <div class="col-md-3"> <nav class="docs-sidebar" data-spy="affix" data-offset-top="300" data-offset-bottom="200" role="navigation"> <ul class="nav"> <li><a href="#line1">卷一</a> <ul class="nav"> <li><a href="#line1_1">亲士</a></li> <li><a href="#line1_2">修身</a></li> <li><a href="#line1_3">所染</a></li> <li><a href="#line1_4">法仪</a></li> <li><a href="#line1_5">七患</a></li> <li><a href="#line1_6">辞过</a></li> <li><a href="#line1_7">三辩</a></li> </ul> </li> <li><a href="#line2">卷二</a> <ul class="nav"> <li><a href="#line2_1">尚贤上</a></li> <li><a href="#line2_2">尚贤中</a></li> <li><a href="#line2_3">尚贤下</a></li> </ul> </li> <li><a href="#line3">卷三</a> <ul class="nav"> <li><a href="#line3_1">尚同上</a></li> <li><a href="#line3_2">尚同中</a></li> <li><a href="#line3_3">尚同下</a></li> </ul> </li> <li><a href="#line4">卷四</a> <ul class="nav"> <li><a href="#line4_1">兼爱上</a></li> <li><a href="#line4_2">兼爱中</a></li> <li><a href="#line4_3">兼爱下</a></li> </ul> </li> <li><a href="#line5">卷五</a> <ul class="nav"> <li><a href="#line5_1">非攻上</a></li> <li><a href="#line5_2">非攻中</a></li> <li><a href="#line5_3">非攻下</a></li> </ul> </li> <li><a href="#line6">卷六</a> <ul class="nav"> <li><a href="#line6_1">节用上</a></li> <li><a href="#line6_2">节用中</a></li> <li><a href="#line6_3">节葬下</a></li> </ul> </li> <li><a href="#line7">卷七</a> <ul class="nav"> <li><a href="#line7_1">天志上</a></li> <li><a href="#line7_2">天志中</a></li> <li><a href="#line7_3">天志下</a></li> </ul> </li> <li><a href="#line8">卷九</a></li> <li><a href="#line9">卷十</a></li> <li><a href="#line10">卷十一</a></li> <li><a href="#line11">卷十二</a></li> </ul> </nav > </div> <div class="col-md-9"> <section class="welcome"> <div class="row"> <div class="col-md-12 left-align"> <h2 class="dark-text">介绍<hr></h2> <div class="row"> <div class="col-md-12 full"> <div class="intro1"> <ul> <li><strong>作者 : </strong>墨翟</li> <li><strong>成书时间 : </strong>[春秋 - 战国] 公元前490年-公元前221年</li> <li><strong>篇目数量 : </strong>原有71篇，现存53篇</a></li> </ul> </div> <hr> <div> <p>墨家主张“兼爱”，和西方的“博爱”相似；墨家重视技术，这也与西方不谋而合。在诸子百家中，墨家可能是最接近西方文明的学派。因此，当近代中国在西方的坚船利炮下生灵涂炭之时，中国的学者们不由开始缅怀墨子。倘若当年汉武帝不尊儒而尊墨，或许就能引领中华文明走上一条科技之路，从而免于两千多年后落得一个被列强欺凌的下场。这当然是臆想，但这却让墨家在近代意外走红，引起了关注。</p> https://www.luochang.ink/gadget/my-first-try/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/my-first-try/ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> --> <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> <!-- <script src="react.js"></script> <script src="react-dom.js"></script> <script src="babel.min.js"></script> --> </head> <body> <div id="root"></div> <script src="./index.js"></script> </body> </html> https://www.luochang.ink/gadget/new-to-do-list/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/new-to-do-list/ <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; min-width: 250px; } /* Include the padding and border in an element's total width and height */ * { box-sizing: border-box; } /* Remove margins and padding from the list */ ul { margin: 0; padding: 0; } /* Style the list items */ ul li { cursor: pointer; position: relative; padding: 12px 8px 12px 40px; list-style-type: none; background: #eee; font-size: 18px; transition: 0.2s; /* make the list items unselectable */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } /* Set all odd list items to a different color (zebra-stripes) */ ul li:nth-child(odd) { background: #f9f9f9; } /* Darker background-color on hover */ ul li:hover { background: #ddd; } /* When clicked on, add a background color and strike out text */ ul li.checked { background: #888; color: #fff; text-decoration: line-through; } /* Add a "checked" mark when clicked on */ ul li.checked::before { content: ''; position: absolute; border-color: #fff; border-style: solid; border-width: 0 2px 2px 0; top: 10px; left: 16px; transform: rotate(45deg); height: 15px; width: 7px; } /* Style the close button */ .close { position: absolute; right: 0; top: 0; padding: 12px 16px 12px 16px; } .close:hover { background-color: #f44336; color: white; } /* Style the header */ .header { background-color: #f44336; padding: 30px 40px; color: white; text-align: center; } /* Clear floats after the header */ .header:after { content: ""; display: table; clear: both; } /* Style the input */ input { margin: 0; border: none; border-radius: 0; width: 75%; padding: 10px; float: left; font-size: 16px; } /* Style the "Add" button */ .addBtn { padding: 10px; width: 25%; background: #d9d9d9; color: #555; float: left; text-align: center; font-size: 16px; cursor: pointer; transition: 0.3s; border-radius: 0; } .addBtn:hover { background-color: #bbb; } </style> </head> <body> <div id="myDIV" class="header"> <h2 style="margin:5px">My To Do List</h2> <input type="text" onkeydown="handleEnter(event)" id="myInput" placeholder="Title..."> <span onclick="newElement()" class="addBtn">Add</span> </div> <ul id="myUL"> <!-- <li>Hit the gym</li> <li class="checked">Pay bills</li> <li>Meet George</li> <li>Buy eggs</li> <li>Read a book</li> <li>Organize office</li> --> </ul> <script> // Create a "close" button and append it to each list item var myNodelist = document.getElementsByTagName("LI"); var i; for (i = 0; i < myNodelist.length; i++) { var span = document.createElement("SPAN"); var txt = document.createTextNode("\u00D7"); span.className = "close"; span.appendChild(txt); myNodelist[i].appendChild(span); } // Click on a close button to hide the current list item var close = document.getElementsByClassName("close"); var i; for (i = 0; i < close.length; i++) { close[i].onclick = function() { var div = this.parentElement; div.style.display = "none"; } } // Add a "checked" symbol when clicking on a list item var list = document.querySelector('ul'); list.addEventListener('click', function(ev) { if (ev.target.tagName === 'LI') { ev.target.classList.toggle('checked'); } }, false); // Create a new list item when clicking on the "Add" button function newElement() { var li = document.createElement("li"); var inputValue = document.getElementById("myInput").value; var t = document.createTextNode(inputValue); li.appendChild(t); if (inputValue === '') { alert("You must write something!"); } else { document.getElementById("myUL").appendChild(li); } document.getElementById("myInput").value = ""; var span = document.createElement("SPAN"); var txt = document.createTextNode("\u00D7"); span.className = "close"; span.appendChild(txt); li.appendChild(span); for (i = 0; i < close.length; i++) { close[i].onclick = function() { var div = this.parentElement; div.style.display = "none"; } } } function handleEnter(event) { if (event.keyCode == 13 && !event.shiftKey) { newElement(); } } </script> </body> </html> https://www.luochang.ink/gadget/piano/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/piano/ <body> <section id="wrap"> <header> <h1>JS Piano</h1> <h2>Use your keyboard. Hover for hints.</h2> <style type="text/css"> html { background: #000; font-family: 'Noto Serif', serif; -webkit-font-smoothing: antialiased; text-align: center; } video#bgvid { position: fixed; top: 50%; left: 50%; min-width: 100%; min-height: 100%; width: auto; height: auto; z-index: -100; transform: translateX(-50%) translateY(-50%); background-size: cover; } header { position: relative; margin: 30px 0; } header:after { content: ''; width: 460px; height: 15px; background: url(images/intro-div.svg) no-repeat center; display: inline-block; text-align: center; background-size: 70%; } h1 { color: #fff; font-size: 50px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; margin: 0; } h2 { color: #fff; font-size: 24px; font-style: italic; font-weight: 400; margin: 0 0 30px; } .nowplaying { font-size: 120px; line-height: 1; color: #eee; text-shadow: 0 0 5rem #028ae9; transition: all .07s ease; min-height: 120px; } .keys { display: block; width: 100%; height: 350px; max-width: 880px; position: relative; margin: 40px auto 0; cursor: none; } .key { position: relative; border: 4px solid black; border-radius: .5rem; transition: all .07s ease; display: block; box-sizing: border-box; z-index: 2; } .key:not(.sharp) { float: left; width: 10%; height: 100%; background: rgba(255, 255, 255, .8); } .key.sharp { position: absolute; width: 6%; height: 60%; background: #000; color: #eee; top: 0; z-index: 3; } .key[data-key="87"] { left: 7%; } .key[data-key="69"] { left: 17%; } .key[data-key="84"] { left: 37%; } .key[data-key="89"] { left: 47%; } .key[data-key="85"] { left: 57%; } .key[data-key="79"] { left: 77%; } .key[data-key="80"] { left: 87%; } .playing { transform: scale(.95); border-color: #028ae9; box-shadow: 0 0 1rem #028ae9; } .hints { display: block; width: 100%; opacity: 0; position: absolute; bottom: 7px; transition: opacity .3s ease-out; font-size: 20px; } .keys:hover .hints { opacity: 1; } </style> </header> <section id="main"> <div class="nowplaying"></div> <div class="keys"> <div data-key="65" class="key" data-note="C"> <span class="hints">A</span> </div> <div data-key="87" class="key sharp" data-note="C#"> <span class="hints">W</span> </div> <div data-key="83" class="key" data-note="D"> <span class="hints">S</span> </div> <div data-key="69" class="key sharp" data-note="D#"> <span class="hints">E</span> </div> <div data-key="68" class="key" data-note="E"> <span class="hints">D</span> </div> <div data-key="70" class="key" data-note="F"> <span class="hints">F</span> </div> <div data-key="84" class="key sharp" data-note="F#"> <span class="hints">T</span> </div> <div data-key="71" class="key" data-note="G"> <span class="hints">G</span> </div> <div data-key="89" class="key sharp" data-note="G#"> <span class="hints">Y</span> </div> <div data-key="72" class="key" data-note="A"> <span class="hints">H</span> </div> <div data-key="85" class="key sharp" data-note="A#"> <span class="hints">U</span> </div> <div data-key="74" class="key" data-note="B"> <span class="hints">J</span> </div> <div data-key="75" class="key" data-note="C"> <span class="hints">K</span> </div> <div data-key="79" class="key sharp" data-note="C#"> <span class="hints">O</span> </div> <div data-key="76" class="key" data-note="D"> <span class="hints">L</span> </div> <div data-key="80" class="key sharp" data-note="D#"> <span class="hints">P</span> </div> <div data-key="186" class="key" data-note="E"> <span class="hints">;</span> </div> </div> <audio data-key="65" src="http://carolinegabriel.com/demo/js-keyboard/sounds/040.wav"></audio> <audio data-key="87" src="http://carolinegabriel.com/demo/js-keyboard/sounds/041.wav"></audio> <audio data-key="83" src="http://carolinegabriel.com/demo/js-keyboard/sounds/042.wav"></audio> <audio data-key="69" src="http://carolinegabriel.com/demo/js-keyboard/sounds/043.wav"></audio> <audio data-key="68" src="http://carolinegabriel.com/demo/js-keyboard/sounds/044.wav"></audio> <audio data-key="70" src="http://carolinegabriel.com/demo/js-keyboard/sounds/045.wav"></audio> <audio data-key="84" src="http://carolinegabriel.com/demo/js-keyboard/sounds/046.wav"></audio> <audio data-key="71" src="http://carolinegabriel.com/demo/js-keyboard/sounds/047.wav"></audio> <audio data-key="89" src="http://carolinegabriel.com/demo/js-keyboard/sounds/048.wav"></audio> <audio data-key="72" src="http://carolinegabriel.com/demo/js-keyboard/sounds/049.wav"></audio> <audio data-key="85" src="http://carolinegabriel.com/demo/js-keyboard/sounds/050.wav"></audio> <audio data-key="74" src="http://carolinegabriel.com/demo/js-keyboard/sounds/051.wav"></audio> <audio data-key="75" src="http://carolinegabriel.com/demo/js-keyboard/sounds/052.wav"></audio> <audio data-key="79" src="http://carolinegabriel.com/demo/js-keyboard/sounds/053.wav"></audio> <audio data-key="76" src="http://carolinegabriel.com/demo/js-keyboard/sounds/054.wav"></audio> <audio data-key="80" src="http://carolinegabriel.com/demo/js-keyboard/sounds/055.wav"></audio> <audio data-key="186" src="http://carolinegabriel.com/demo/js-keyboard/sounds/056.wav"></audio> </section> </section> <video playsinline autoplay muted loop id="bgvid" poster="http://carolinegabriel.com/demo/js-keyboard/video/bg.jpg"> <source src="http://carolinegabriel.com/demo/js-keyboard/video/bg.mp4" type="video/mp4"> </video> <script> const keys = document.querySelectorAll(".key"), note = document.querySelector(".nowplaying"), hints = document.querySelectorAll(".hints"); function playNote(e) { const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`), key = document.querySelector(`.key[data-key="${e.keyCode}"]`); if (!key) return; const keyNote = key.getAttribute("data-note"); key.classList.add("playing"); note.innerHTML = keyNote; audio.currentTime = 0; audio.play(); } function removeTransition(e) { if (e.propertyName !== "transform") return; this.classList.remove("playing"); } function hintsOn(e, index) { e.setAttribute("style", "transition-delay:" + index * 50 + "ms"); } hints.forEach(hintsOn); keys.forEach(key => key.addEventListener("transitionend", removeTransition)); window.addEventListener("keydown", playNote); </script> </body> https://www.luochang.ink/gadget/plan/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/plan/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Plan</title> <style> body { font-family: "Source Han Sans", "San Francisco", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", "sans-serif"; font-size: 17px; margin: 0; } #header { position: relative; top: 0px; left: 0px; width: 100%; height: 50px; background: #333333; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); z-index: 2; } .navbar { position: relative; margin-left: 10%; color: white; font-size: 1.25rem; } .figure { position: relative; width: 80%; } .container { position: relative; width: 80%; max-width: 960px; padding: 0 50px 0 50px; margin: 0 auto; overflow-x: hidden; text-align: center; } .container h3, p { text-align: left; } .container ol { text-align: left; font-family: 'Lato', san-serif; font-size: 17px; } .dropbtn { background-color: transparent; color: white; padding: 16px; font-size: 18px; border: none; outline: none; } .dropup { position: relative; display: inline-block; } .dropup-content { display: none; position: absolute; background-color: #f1f1f1; min-width: 150px; top: 50px; z-index: 1; } .dropup-content a { color: black; padding: 12px 16px; text-decoration: none; display: block; } .dropup-content a:hover { background-color: #ccc } .dropup:hover .dropup-content { display: block; } .dropup:hover .dropbtn { background-color: #2980B9; } </style> </head> <body> <div id="header"> <div class="navbar"> <div class="dropup"> <button class="dropbtn">MORE PLANS</button> <div class="dropup-content"> <a id="month-1">1月</a> <a id="month-2">2月</a> <a id="month-3">3月</a> </div> </div> </div> </div> <div id="container-2" class="container"> <h1>2020年2月计划</h1> <h3>一、计划内容</h3> <ol> <li>学习计划 📖</li> <br> <ul> <li>LeetCode (1 题/天)</li> <li>读书 (10 页/天)</li> </ul> <br> <li>运动计划 🏃</li> <br> <ul> <li>跑步 (1000 米/天)</li> <li>仰卧起坐 (10 次/天)</li> </ul> <br> </ol> <p>注：括号内是计量单位，不是计划数。</p> https://www.luochang.ink/gadget/react-lifecycle-demo/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/react-lifecycle-demo/ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="react.js"></script> <script src="react-dom.js"></script> <script src="jquery.js"></script> <script src="babel.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> class MyList extends React.Component { constructor(...args) { super(...args); this.state = { loading: true, error: null, data: null }; } componentDidMount() { const url = 'https://api.github.com/search/repositories?q=javascript&sort=stars'; $.getJSON(url) .done( (value) => this.setState({ loading: false, data: value }) ).fail( (jqXHR, textStatus) => this.setState({ loading: false, error: jqXHR.status }) ); } render() { if (this.state.loading) { return <span>Loading...</span>; } else if (this.state.error !== null) { return <span>Error: {this.state.error}</span>; } else { /* 你的代码填入这里 */ console.log(this.state.data) var projects = this.state.data.items; var result = []; projects.forEach(p => { var item = <li><a href={p.html_url}>{p.name}</a></li>; result.push(item); }); // console.log(result); return ( <div> <p>API 数据获取成功</p> https://www.luochang.ink/gadget/read-zip-file-by-url/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/read-zip-file-by-url/ <!DOCTYPE html> <html class="gr__gildas-lormeau_github_io"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Read a zip file demo</title> </head> <body data-gr-c-s-loaded="true"> <span style="color:#333;"> 操作方法： <ol> <li>选中下方文本框;</li> <li>按 Ctrl + v 粘贴链接;</li> <li>点击文本框外任意区域。</li> </ol> </span> <input id="file-input" style="margin-left: 25px;width: 150px;" /> <br><br> <hr> <div id="wait" style="color:#333; font-size: 15px; display: none;margin-left: 25px;"> Please wait. </div> <div id="file-list"> </div> <script type="text/javascript" async="" src="./lib/ga.js"></script> <script type="text/javascript" src="./lib/zip.js"></script> <script type="text/javascript" src="./lib/zip-ext.js"></script> <script type="text/javascript" src="./lib/demo2.js"></script> <audio controls="controls" style="display: none;"></audio> </body> <style> body { background-color: rgb(238, 224, 224); } </style> </html> https://www.luochang.ink/gadget/show-time/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/show-time/ <!DOCTYPE html> <html lang="zh-Hans" dir="ltr" class="gr__fiammanda_com"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>现在几点了？</title> <style type="text/css"> body { font-family: "Source Han Sans", "San Francisco", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif; font-size: 14px; color: #333; } a { text-decoration: none; color: #f66; transition-property: color; transition-duration: .2s; transition-timing-function: ease-in-out; } a:hover { color: #333; } p { margin: 1em 0; } p:empty { height: 1.5em; } main { margin: 0 5em; max-width: 48em; } h1 { margin: 1em 0; font-size: 24px; font-weight: 300; } textarea, article { width: 100%; height: 12em; margin: 2em 0; padding: .5em; overflow-y: scroll; border: 1px solid #999; border-radius: 2px; line-height: 1.5; text-align: justify; text-justify: inter-ideograph; } textarea { height: 9em; font-size: 14px; font-family: "Source Han Sans", "San Francisco", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif; color: #333; } article { cursor: pointer; } button { background: #fff; border: 1px solid #ccc; border-radius: 2px; line-height: 1; padding: .5em; color: #666; transition-property: color, background, border; transition-duration: .2s; transition-timing-function: ease-in-out; } button[id] { border: 1px solid #999; color: #333; cursor: pointer; } button[id]:hover { background: #666; border-color: #666; color: #fff; } ::selection { color: #fff; background: #666; } ::-moz-selection { color: #fff; background: #666; } </style> </head> <body data-gr-c-s-loaded="true"> <main> <h1>现在几点了？</h1> <p>© 2019 Chang Luo <a href="https://www.weibo.com/selina330" target="_blank">Weibo</a> | <a href="https://space.bilibili.com/27447758" target="_blank">Bilibili</a></p> https://www.luochang.ink/gadget/tic-tac-toe/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/tic-tac-toe/ <!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="https://www.luochang.ink/gadget/tic-tac-toe/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="https://www.luochang.ink/gadget/tic-tac-toe/logo192.png"/><link rel="manifest" href="https://www.luochang.ink/gadget/tic-tac-toe/manifest.json"/><title>React App</title><link href="https://www.luochang.ink/gadget/tic-tac-toe/static/css/main.0ebde3ef.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(e){function t(t){for(var n,a,p=t[0],l=t[1],i=t[2],c=0,s=[];c<p.length;c++)a=p[c],Object.prototype.hasOwnProperty.call(o,a)&&o[a]&&s.push(o[a][0]),o[a]=0;for(n in l)Object.prototype.hasOwnProperty.call(l,n)&&(e[n]=l[n]);for(f&&f(t);s.length;)s.shift()();return u.push.apply(u,i||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,p=1;p<r.length;p++){var l=r[p];0!==o[l]&&(n=!1)}n&&(u.splice(t--,1),e=a(a.s=r[0]))}return e}var n={},o={1:0},u=[];function a(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,a),r.l=!0,r.exports}a.m=e,a.c=n,a.d=function(e,t,r){a.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},a.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a.t=function(e,t){if(1&t&&(e=a(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(a.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)a.d(r,n,function(t){return e[t]}.bind(null,n));return r},a.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return a.d(t,"a",t),t},a.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},a.p="/gadget/tic-tac-toe/";var p=this["webpackJsonpmy-app"]=this["webpackJsonpmy-app"]||[],l=p.push.bind(p);p.push=t,p=p.slice();for(var i=0;i<p.length;i++)t(p[i]);var f=l;r()}([])</script><script src="https://www.luochang.ink/gadget/tic-tac-toe/static/js/2.718ed629.chunk.js"></script><script src="https://www.luochang.ink/gadget/tic-tac-toe/static/js/main.73c47c01.chunk.js"></script></body></html> https://www.luochang.ink/gadget/to-do-list/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/to-do-list/ <!DOCTYPE html> <html lang="zh-Hans" dir="ltr"> <head> <title>计划表生成工具</title> <script> "use strict"; function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } var Items = { 　　　　 name: "", 　　　　 isCheck: "false", isDelete: "false" }; var objArray = []; var subArray = []; var submit_flag = true; var delete_flag = true; function addElement() { submit_flag = true; var item = Object.create(Items); var v = document.getElementById("myTextarea").value; item.name = v objArray.push(item); var body = '<table><tr><th>#</th><th>Name</th></tr>' for (var i = 0; i < objArray.length; i++) { var index = i+1; body += '<tr>'; body += '<td>' + index.toString(10) + '</td>'; //body += '<td>' + '<input type="checkbox" id=\"cb' + i.toString(10) + '\" onclick="isChecked(this);">' + '</td>'; body += '<td>' + escapeHtml(objArray[i].name) + '</td>'; //body += '<td>' + objArray[i].isDelete + '</td>'; //body += '<td>' + '<input type="button" id=\"btn' + i.toString(10) + '\" onclick="isDeleted(this);">' + '</td>'; body += '</tr>'; } body += '</table></body></html>'; document.getElementById("object_list").innerHTML = body; document.getElementById("myTextarea").value = ''; } function submit() { if (submit_flag == true) { submit_flag = false; subArray = objArray; objArray = []; var body = '<table><tr><th>#</th><th>Check Box</th><th>Name</th><th>Delete</th></tr>' for (var i = 0; i < subArray.length; i++) { var index = i+1; body += '<tr>'; body += '<td>' + index.toString(10) + '</td>'; body += '<td>' + '<input type=\"checkbox\" id=\"cb' + i.toString(10) + '\" onclick=\"isChecked(this);\">' + '</td>'; body += '<td>' + escapeHtml(subArray[i].name) + '</td>'; body += '<td>' + '<input type=\"button\" id=\"btn' + i.toString(10) + '\" onclick=\"isDeleted(this);\">' + '</td>'; body += '</tr>'; } body += '</table></body></html>'; document.getElementById("object_list").innerHTML = body; } } function finalSheet() { var myDate=new Date(); var final_sheet = '<html><head></head><style>html{background-position:center top;background-repeat:no-repeat;width:800px;margin:auto;}table, th, td {border: 1px solid black;border-collapse: collapse;}th, td {padding: 5px;}th {text-align: center;}</style><body><h1>计划完成统计表</h1><h4>' + myDate + '</h2>' var body = '<table><tr><th>#</th><th>Name</th><th>Done</th></tr>' var i = 0; var index = 1; var showtext = ""; while (i < subArray.length) { if (subArray[i].isDelete != "true" ) { if (subArray[i].isCheck == "true") { showtext = "√"; }else { showtext = "×"; } body += '<tr>'; body += '<td>' + index.toString(10) + '</td>'; body += '<td>' + escapeHtml(subArray[i].name) + '</td>'; body += '<td>' + showtext + '</td>'; body += '</tr>'; index++; } i++; } body += '</table></body></html>'; document.getElementById("object_list").innerHTML = body; final_sheet += body download('计划完成统计表.html', final_sheet) } function handleEnter(event) { if (event.keyCode == 13 && !event.shiftKey) { addElement(); } } function clearText() { document.getElementById("myTextarea").value = ''; } function clearContents(element) { element.value = ''; } function isChecked(element) { var id_str = element.id id_str = id_str.replace("cb",""); var id_num = parseInt(id_str) if (element.checked == true){ subArray[id_num].isCheck = "true"; } else { subArray[id_num].isCheck = "false"; } } function isDeleted(element) { var id_str = element.id id_str = id_str.replace("btn",""); var id_num = parseInt(id_str) if (delete_flag == true) { delete_flag = false; subArray[id_num].isDelete = "true"; element.value="×" } else { delete_flag = true; subArray[id_num].isDelete = "false"; element.value="" } } function download(filename, text) { var element = document.createElement('a'); element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); element.setAttribute('download', filename); element.style.display = 'none'; document.body.appendChild(element); element.click(); document.body.removeChild(element); } </script> <style type="text/css"> body { font-family: "Source Han Sans", "San Francisco", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif; font-size: 14px; color: #333; } a { text-decoration: none; color: #f66; transition-property: color; transition-duration: .2s; transition-timing-function: ease-in-out; } a:hover { color: #333; } p { margin: 1em 0; } p:empty { height: 1.5em; } main { margin: 0 5em; max-width: 60em; } h1 { margin: 1em 0; font-size: 24px; font-weight: 300; } textarea, article { width: 100%; height: 12em; margin: 2em 0; padding: .5em; overflow-y: scroll; border: 1px solid #999; border-radius: 2px; line-height: 1.5; text-align: justify; text-justify: inter-ideograph; } textarea { height: 9em; font-size: 14px; font-family: "Source Han Sans", "San Francisco", "PingFang SC", "Hiragino Sans GB", "Droid Sans Fallback", "Microsoft YaHei", sans-serif; color: #333; } article { cursor: pointer; } button { background: #fff; border: 1px solid #ccc; border-radius: 2px; line-height: 1; padding: .5em; color: #666; transition-property: color, background, border; transition-duration: .2s; transition-timing-function: ease-in-out; } button[id] { border: 1px solid #999; color: #333; cursor: pointer; } button[id]:hover { background: #666; border-color: #666; color: #fff; } ::selection { color: #fff; background: #666; } ::-moz-selection { color: #fff; background: #666; } table, th, td { border: 1px solid black; border-collapse: collapse; text-align: center; } th, td { padding: 5px; } th { text-align: left; } </style> </head> <body data-gr-c-s-loaded="true"> <main> <h1>计划表生成工具</h1> <p>© 2019 Chang Luo | <a href="https://www.luochang.ink/">Home</a></p> https://www.luochang.ink/gadget/unzip/ Mon, 01 Jan 0001 00:00:00 +0000 https://www.luochang.ink/gadget/unzip/ <!DOCTYPE html> <!-- saved from url=(0056)https://gildas-lormeau.github.io/zip.js/demos/demo2.html --> <html class="gr__gildas-lormeau_github_io"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Read a zip file demo</title> <link rel="stylesheet" href="./lib/default.css"> <link rel="stylesheet" href="./lib/demo.css"> <link href="./lib/css" rel="stylesheet" type="text/css"> </head> <body data-gr-c-s-loaded="true"> <a href="https://github.com/gildas-lormeau/zip.js"><img style="position: absolute; top: 0; right: 0; border: 0;" src="./lib/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a> <div id="container"> <h1> <a href="https://gildas-lormeau.github.io/zip.js/">zip.js</a> <span class="small"></span> </h1> <div class="description"> A JavaScript library to zip and unzip files <hr> </div> <h2>Read a zip file demo</h2> <ol id="demo-container"> <li> <label> <span class="form-label">choose a zip file</span> <input type="file" accept="application/zip" id="file-input"> </label> </li> <li> <label> <span class="form-label">choose temporary storage</span> <select id="creation-method-input"> <option value="Blob">RAM</option> <option value="File">HDD</option> </select> </label> </li> <li> <span class="form-label">download zip content</span> <ul id="file-list"> </ul> </li> </ol> </div> <script type="text/javascript" async="" src="./lib/ga.js"></script> <script type="text/javascript" src="./lib/zip.js"></script> <script type="text/javascript" src="./lib/zip-ext.js"></script> <script type="text/javascript" src="./lib/demo2.js"></script> <script type="text/javascript"> var _gaq = _gaq || []; _gaq.push(['_setAccount', 'UA-15560121-15']); _gaq.push(['_trackPageview']); (function () { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); })(); </script> <audio controls="controls" style="display: none;"></audio> </body> <style type="text/css"> #yddContainer { display: block; font-family: Microsoft YaHei; position: relative; width: 100%; height: 100%; top: -4px; left: -4px; font-size: 12px; border: 1px solid } #yddTop { display: block; height: 22px } #yddTopBorderlr { display: block; position: static; height: 17px; padding: 2px 28px; line-height: 17px; font-size: 12px; color: #5079bb; font-weight: bold; border-style: none solid; border-width: 1px } #yddTopBorderlr .ydd-sp { position: absolute; top: 2px; height: 0; overflow: hidden } .ydd-icon { left: 5px; width: 17px; padding: 0px 0px 0px 0px; padding-top: 17px; background-position: -16px -44px } .ydd-close { right: 5px; width: 16px; padding-top: 16px; background-position: left -44px } #yddKeyTitle { float: left; text-decoration: none } #yddMiddle { display: block; margin-bottom: 10px } .ydd-tabs { display: block; margin: 5px 0; padding: 0 5px; height: 18px; border-bottom: 1px solid } .ydd-tab { display: block; float: left; height: 18px; margin: 0 5px -1px 0; padding: 0 4px; line-height: 18px; border: 1px solid; border-bottom: none } .ydd-trans-container { display: block; line-height: 160% } .ydd-trans-container a { text-decoration: none; } #yddBottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 22px; line-height: 22px; overflow: hidden; background-position: left -22px } .ydd-padding010 { padding: 0 10px } #yddWrapper { color: #252525; z-index: 10001; background: url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ab20.png); } #yddContainer { background: #fff; border-color: #4b7598 } #yddTopBorderlr { border-color: #f0f8fc } #yddWrapper .ydd-sp { background-image: url(chrome-extension://eopjamdnofihpioajgfdikhhbobonhbb/ydd-sprite.png) } #yddWrapper a, #yddWrapper a:hover, #yddWrapper a:visited { color: #50799b } #yddWrapper .ydd-tabs { color: #959595 } .ydd-tabs, .ydd-tab { background: #fff; border-color: #d5e7f3 } #yddBottom { color: #363636 } #yddWrapper { min-width: 250px; max-width: 400px; } </style> </html>