1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style type="text/css"> 7 textarea { 8 display: block; 9 font-size: 1.4rem; 10 padding: 18px 14px; 11 color: #adadad; 12 box-sizing: border-box; 13 width: 80%; 14 height: 100px; 15 padding: 10px 14px; 16 line-height: 1.5; 17 -moz-box-sizing: border-box; 18 box-sizing: border-box; 19 border-color: #efefef;margin:50px; resize:vertical; 20 max-height: 400px; 21 } 22 /* resize:horizontal 宽度可调整 */ 23 </style> 24 </head> 25 <body> 26 <textarea class="comment-textarea" id="comment" placeholder="说点什么吧..." tabindex="4" ></textarea > 27 <script type="text/javascript"> 28 !(function webpackUniversalModuleDefinition(root, factory) { 29 if (typeof exports === 'object' && typeof module === 'object') module.exports = factory(); 30 else if (typeof define === 'function' && define.amd) define([], factory); 31 else if (typeof exports === 'object') exports["POWERMODE"] = factory(); 32 else root["POWERMODE"] = factory() 33 })(this, function() { 34 return (function(modules) { 35 var installedModules = {}; 36 37 function __webpack_require__(moduleId) { 38 if (installedModules[moduleId]) return installedModules[moduleId].exports; 39 var module = installedModules[moduleId] = { 40 exports: {}, 41 id: moduleId, 42 loaded: false 43 }; 44 modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 45 module.loaded = true; 46 return module.exports 47 } 48 __webpack_require__.m = modules; 49 __webpack_require__.c = installedModules; 50 __webpack_require__.p = ""; 51 return __webpack_require__(0) 52 })([function(module, exports, __webpack_require__) { 53 'use strict'; 54 var canvas = document.createElement('canvas'); 55 canvas.width = window.innerWidth; 56 canvas.height = window.innerHeight; 57 canvas.style.cssText = 'position:fixed;top:0;left:0;pointer-events:none;z-index:999999'; 58 window.addEventListener('resize', function() { 59 canvas.width = window.innerWidth; 60 canvas.height = window.innerHeight 61 }); 62 document.body.appendChild(canvas); 63 var context = canvas.getContext('2d'); 64 var particles = []; 65 var particlePointer = 0; 66 POWERMODE.shake = true; 67 68 function getRandom(min, max) { 69 return Math.random() * (max - min) + min 70 } 71 function getColor(el) { 72 if (POWERMODE.colorful) { 73 var u = getRandom(0, 360); 74 return 'hsla(' + getRandom(u - 10, u + 10) + ', 100%, ' + getRandom(50, 80) + '%, ' + 1 + ')' 75 } else { 76 return window.getComputedStyle(el).color 77 } 78 } 79 function getCaret() { 80 var el = document.activeElement; 81 var bcr; 82 if (el.tagName === 'TEXTAREA' || (el.tagName === 'INPUT' && el.getAttribute('type') === 'text')) { 83 var offset = __webpack_require__(1)(el, el.selectionStart); 84 bcr = el.getBoundingClientRect(); 85 return { 86 x: offset.left + bcr.left, 87 y: offset.top + bcr.top, 88 color: getColor(el) 89 } 90 } 91 var selection = window.getSelection(); 92 if (selection.rangeCount) { 93 var range = selection.getRangeAt(0); 94 var startNode = range.startContainer; 95 if (startNode.nodeType === document.TEXT_NODE) { 96 startNode = startNode.parentNode 97 } 98 bcr = range.getBoundingClientRect(); 99 return { 100 x: bcr.left, 101 y: bcr.top, 102 color: getColor(startNode) 103 } 104 } 105 return { 106 x: 0, 107 y: 0, 108 color: 'transparent' 109 } 110 } 111 function createParticle(x, y, color) { 112 return { 113 x: x, 114 y: y, 115 alpha: 1, 116 color: color, 117 velocity: { 118 x: -1 + Math.random() * 2, 119 y: -3.5 + Math.random() * 2 120 } 121 } 122 } 123 function POWERMODE() { 124 { 125 var caret = getCaret(); 126 var numParticles = 5 + Math.round(Math.random() * 10); 127 while (numParticles--) { 128 particles[particlePointer] = createParticle(caret.x, caret.y, caret.color); 129 particlePointer = (particlePointer + 1) % 500 130 } 131 } { 132 if (POWERMODE.shake) { 133 var intensity = 1 + 2 * Math.random(); 134 var x = intensity * (Math.random() > 0.5 ? -1 : 1); 135 var y = intensity * (Math.random() > 0.5 ? -1 : 1); 136 document.body.style.marginLeft = x + 'px'; 137 document.body.style.marginTop = y + 'px'; 138 setTimeout(function() { 139 document.body.style.marginLeft = ''; 140 document.body.style.marginTop = '' 141 }, 75) 142 } 143 } 144 }; 145 POWERMODE.colorful = false; 146 147 function loop() { 148 requestAnimationFrame(loop); 149 context.clearRect(0, 0, canvas.width, canvas.height); 150 for (var i = 0; i < particles.length; ++i) { 151 var particle = particles[i]; 152 if (particle.alpha <= 0.1) continue; 153 particle.velocity.y += 0.075; 154 particle.x += particle.velocity.x; 155 particle.y += particle.velocity.y; 156 particle.alpha *= 0.96; 157 context.globalAlpha = particle.alpha; 158 context.fillStyle = particle.color; 159 context.fillRect(Math.round(particle.x - 1.5), Math.round(particle.y - 1.5), 3, 3) 160 } 161 } 162 requestAnimationFrame(loop); 163 module.exports = POWERMODE 164 }, function(module, exports) { 165 (function() { 166 var properties = ['direction', 'boxSizing', 'width', 'height', 'overflowX', 'overflowY', 'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderStyle', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'fontStyle', 'fontVariant', 'fontWeight', 'fontStretch', 'fontSize', 'fontSizeAdjust', 'lineHeight', 'fontFamily', 'textAlign', 'textTransform', 'textIndent', 'textDecoration', 'letterSpacing', 'wordSpacing', 'tabSize', 'MozTabSize']; 167 var isFirefox = window.mozInnerScreenX != null; 168 169 function getCaretCoordinates(element, position, options) { 170 var debug = options && options.debug || false; 171 if (debug) { 172 var el = document.querySelector('#input-textarea-caret-position-mirror-div'); 173 if (el) { 174 el.parentNode.removeChild(el) 175 } 176 } 177 var div = document.createElement('div'); 178 div.id = 'input-textarea-caret-position-mirror-div'; 179 document.body.appendChild(div); 180 var style = div.style; 181 var computed = window.getComputedStyle ? getComputedStyle(element) : element.currentStyle; 182 style.whiteSpace = 'pre-wrap'; 183 if (element.nodeName !== 'INPUT') style.wordWrap = 'break-word'; 184 style.position = 'absolute'; 185 if (!debug) style.visibility = 'hidden'; 186 properties.forEach(function(prop) { 187 style[prop] = computed[prop] 188 }); 189 if (isFirefox) { 190 if (element.scrollHeight > parseInt(computed.height)) style.overflowY = 'scroll' 191 } else { 192 style.overflow = 'hidden' 193 } 194 div.textContent = element.value.substring(0, position); 195 if (element.nodeName === 'INPUT') div.textContent = div.textContent.replace(/s/g, "u00a0"); 196 var span = document.createElement('span'); 197 span.textContent = element.value.substring(position) || '.'; 198 div.appendChild(span); 199 var coordinates = { 200 top: span.offsetTop + parseInt(computed['borderTopWidth']), 201 left: span.offsetLeft + parseInt(computed['borderLeftWidth']) 202 }; 203 if (debug) { 204 span.style.backgroundColor = '#aaa' 205 } else { 206 document.body.removeChild(div) 207 } 208 return coordinates 209 } 210 if (typeof module != "undefined" && typeof module.exports != "undefined") { 211 module.exports = getCaretCoordinates 212 } else { 213 window.getCaretCoordinates = getCaretCoordinates 214 } 215 }()) 216 }]) 217 });
/* 调用*/ 218 POWERMODE.colorful = true;POWERMODE.shake = false;document.body.addEventListener('input', POWERMODE); 219 </script> 220 </body> 221 </html>