搜索到
119
篇与
Hackeus
的结果
-
一款炫彩文字好看的滚动跑马灯 跑马灯在网站某些位置，用做广告、公告等，非常好看又实用把以下代码放到你想放的位置即可，大小、文字均可更改哦~<!--跑马灯公告--> <style> #nr{font-size:20px; margin: 0; background: -webkit-linear-gradient(left, #ffffff, #ff0000 6.25%, #ff7d00 12.5%, #ffff00 18.75%, #00ff00 25%, #00ffff 31.25%, #0000ff 37.5%, #ff00ff 43.75%, #ffff00 50%, #ff0000 56.25%, #ff7d00 62.5%, #ffff00 68.75%, #00ff00 75%, #00ffff 81.25%, #0000ff 87.5%, #ff00ff 93.75%, #ffff00 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; animation: masked-animation 2s infinite linear;} @keyframes masked-animation{0%{background-position: 0 0;} 100%{background-position: -100%, 0;} } </style> <div style="background-color:#333;border-radius:25px;box-shadow:0px 0px 5px #f200ff;padding:5px;margin-bottom:0px;"> <marquee> <b id="nr">欢迎访问核客互动博客 blog.hackeus.cn</b> </marquee></div>
网站添加复制提示框信息 当我们去某个网站复制内容的时候，会显示一个复制提示框，提示内容格式各样，有的是暖心句子，有的是版权出处，看起来非常漂亮。马上把代码给大家!首先，把以下JS代码放到里面，文字可更改<script language="JavaScript" type="text/javascript"> document.body.oncopy = function(){Swal.fire({allowOutsideClick:false,type:'success',title: '复制成功,如转载请注明出处！',showConfirmButton: false,timer: 2000});}; </script>然后，然后把下面代码放到前边即可<script src="https://lib.hackeus.cn/static/js/sweetalert.js"></script>
一款好看的站点关闭维护通知代码 样式图片： 下面代码也可以PHP或者Html<!DOCTYPE html> <html lang="zh-CN"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>站点维护 -核客互动</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <style> body{height:100vh;margin:0;display:grid;place-items:center;background-color:#fafafa} .container{width:800px;height:480px;position:relative;top:15%} .container .lamp-holder{left:35%;top:-20%;width:30%;height:2px;background:#2d2d2d;position:absolute} .container .lamp-holder::after{left:calc(50% - 1px);top:0;width:2px;height:60px;background:#2d2d2d;position:absolute;content:""} .container .lamp{left:calc(50% - 26px);top:-10%;width:50px;height:25px;background:#ebebeb;position:absolute;z-index:3;border:1px solid #2d2d2d;border-radius:50px 50px 0 0} .container .lamp::after{left:calc(50% - 10px);top:26px;width:20px;height:10px;background:#ffd53d;position:absolute;content:"";border:1px solid #2d2d2d;border-radius:0 0 20px 20px;border-top:none} .container .light{left:50%;top:-10%;width:278px;height:229px;background:linear-gradient(#fff1bd,transparent);position:absolute;z-index:2;transform:translateX(-50%);clip-path:polygon(50% 0,0 100%,100% 100%)} .container .wall{left:22%;top:5%;width:70px;height:25px;background:#ebebeb;position:absolute;border-radius:2px;box-shadow:calc(75px * 1) 0 0 #d6d6d6,calc(75px * 2) 0 0 #ebebeb,calc(75px * 3) 0 0 #ebebeb,calc(75px * 4) 0 0 #d6d6d6,calc(75px * 5) 0 0 #ebebeb,calc(75px * 1 - 120px) 30px 0 #d6d6d6,calc(75px * 2 - 120px) 30px 0 #ebebeb,calc(75px * 3 - 120px) 30px 0 #ebebeb,calc(75px * 4 - 120px) 30px 0 #ebebeb,calc(75px * 5 - 120px) 30px 0 #d6d6d6,calc(75px * 6 - 120px) 30px 0 #ebebeb,calc(75px * 7 - 120px) 30px 0 #ebebeb,calc(75px * 1 - 70px) 60px 0 #d6d6d6,calc(75px * 2 - 70px) 60px 0 #ebebeb,calc(75px * 3 - 70px) 60px 0 #d6d6d6,calc(75px * 4 - 70px) 60px 0 #ebebeb,calc(75px * 5 - 70px) 60px 0 #ebebeb,calc(75px * 6 - 70px) 60px 0 #d6d6d6,calc(75px * 1 + 0px) 90px 0 #ebebeb,calc(75px * 2 + 0px) 90px 0 #ebebeb,calc(75px * 3 + 0px) 90px 0 #d6d6d6,calc(75px * 4 + 0px) 90px 0 #ebebeb} .container .desk{left:5%;top:initial;width:90%;height:5px;background:#2d2d2d;position:absolute;bottom:31.3%;margin:auto;border-radius:32px} .container .screen{left:50%;top:initial;width:22%;height:21%;background:#535353;position:absolute;transform:translateX(-50%);bottom:38%;border:4px solid #2d2d2d;border-radius:5px;display:flex} .container .screen::after{left:50%;top:initial;width:10%;height:27%;background:#fff;position:absolute;content:"";bottom:-31%;transform:translateX(-50%);border-right:2px solid #2d2d2d;border-left:2px solid #2d2d2d} .container .screen .sidebar{position:relative;width:15%;height:100%;background:#51586a} .container .screen .sidebar .h1{left:10%;top:5%;width:75%;height:3%;background:rgba(250,250,250,.7);position:absolute} .container .screen .sidebar .h2{left:10%;top:15%;width:65%;height:1%;background:#0ebeff;position:absolute;box-shadow:0 5px 0 0 rgba(250,250,250,.7),0 10px 0 0 rgba(250,250,250,.7),0 15px 0 0 rgba(250,250,250,.7),0 20px 0 0 rgba(250,250,250,.7),0 30px 0 0 #ffdd40,0 10px 0 0 rgba(250,250,250,.7),0 35px 0 0 rgba(250,250,250,.7),0 40px 0 0 rgba(250,250,250,.7),0 45px 0 0 rgba(250,250,250,.7),0 50px 0 0 rgba(250,250,250,.7),0 60px 0 0 #47cf73,0 65px 0 0 rgba(250,250,250,.7),0 70px 0 0 rgba(250,250,250,.7),0 75px 0 0 rgba(250,250,250,.7)} .container .screen .main{width:85%;height:100%;position:relative} .container .screen .main .search{left:5%;top:5%;width:85%;height:3%;background:rgba(45,45,45,.4);position:absolute} .container .screen .main .pen{border-radius:2px;cursor:pointer;transition:transform .2s ease-in-out} .container .screen .main .pen:hover{transform:scaleY(1.3)} .container .screen .main .pen1{left:15%;top:20%;width:15%;height:14%;background:rgba(37,40,48,.6);position:absolute} .container .screen .main .pen2{left:35%;top:20%;width:15%;height:14%;background:rgba(37,40,48,.6);position:absolute} .container .screen .main .pen3{left:55%;top:20%;width:15%;height:14%;background:rgba(37,40,48,.6);position:absolute} .container .screen .main .pen4{left:15%;top:40%;width:15%;height:14%;background:rgba(37,40,48,.6);position:absolute} .container .screen .main .pen5{left:35%;top:40%;width:15%;height:14%;background:rgba(37,40,48,.6);position:absolute} .container .screen .main .pen6{left:55%;top:40%;width:15%;height:14%;background:rgba(37,40,48,.6);position:absolute} .container .screen .main .pen7{left:15%;top:60%;width:15%;height:14%;background:rgba(37,40,48,.6);position:absolute} .container .screen .main .pen8{left:35%;top:60%;width:15%;height:14%;background:rgba(37,40,48,.6);position:absolute} .container .screen .main .pen9{left:55%;top:60%;width:15%;height:14%;background:rgba(37,40,48,.6);position:absolute} .container .mouse{left:58%;top:initial;width:15px;height:7.5px;background:#ebebeb;position:absolute;bottom:32.3%;border:1px solid #2d2d2d;border-top-left-radius:15px;border-top-right-radius:15px} .container .mouse::after{left:calc(50% - .5px);top:0;width:1px;height:2px;background:#2d2d2d;position:absolute;content:""} .container .keyboard{left:40%;top:initial;width:40px;height:3px;background:#ebebeb;position:absolute;bottom:32.3%;border:1px solid #2d2d2d;border-top-left-radius:5px;border-top-right-radius:5px} .container .keyboard::after{left:15%;top:-2px;width:4px;height:2px;background:#2d2d2d;position:absolute;content:"";box-shadow:6px 0 0 #2d2d2d,12px 0 0 #2d2d2d,18px 0 0 #2d2d2d,24px 0 0 #2d2d2d} .container .cup{left:72%;top:initial;width:25px;height:30px;background:#3d8ab6;position:absolute;bottom:32.3%;border-radius:5px 5px 8px 8px;border:1px solid #2d2d2d} .container .cup::after{left:80%;top:calc(50% - 9px);width:15px;height:18px;background:#3d8ab6;position:absolute;content:"";box-sizing:border-box;border:1px solid #2d2d2d;border-radius:50%;z-index:-2} .container .cup::before{left:90%;top:calc(50% - 6.5px);width:10px;height:13px;background:#fafafa;position:absolute;content:"";box-sizing:border-box;border:1px solid #2d2d2d;border-radius:50%;z-index:-1} .container .cup .tea{left:4px;top:7px;width:7px;height:7px;background:#ebebeb;position:absolute;box-sizing:border-box;border-radius:1px;border:.5px solid #2d2d2d} .container .cup .tea::before{left:2.5px;top:-8px;width:1px;height:8px;background:#2d2d2d;position:absolute;content:"";box-sizing:border-box} .container .cup .steam{left:25%;top:-2px;width:2px;height:10px;background:#adadad;position:absolute;z-index:-1;box-shadow:5px -10px 0 #adadad,10px -5px 0 #adadad;animation:steam 3s infinite} .container .plant{left:20%;top:initial;width:35px;height:40px;background:#f8f4ad;position:absolute;bottom:32.3%;border:1px solid #2d2d2d;border-radius:0 0 12px 12px} .container .plant .leaf1{left:15%;top:-55%;width:9px;height:45px;background:#38b64c;position:absolute;border:1px solid #2d2d2d;border-radius:90% 70% 70% 70%;transform-origin:0 50%;z-index:-2;animation:wave-leaf1 1.5s infinite ease-in-out} .container .plant .leaf2{left:35%;top:-85%;width:9px;height:55px;background:#38b64c;position:absolute;border:1px solid #2d2d2d;border-radius:80% 60% 70% 70%;transform-origin:0 50%;z-index:-3;animation:wave-leaf2 1.7s infinite ease-in-out} .container .plant .leaf3{left:60%;top:-45%;width:9px;height:25px;background:#38b64c;position:absolute;border:1px solid #2d2d2d;border-radius:80% 75% 70% 70%;transform-origin:0 50%;z-index:-2;animation:wave-leaf3 2s infinite ease-in-out} @keyframes steam{0%{top:-2px;opacity:1} 100%{top:-25px;opacity:0} } @keyframes wave-leaf1{0%,100%{transform:rotateZ(-14deg)} 50%{transform:rotateZ(-16deg)} } @keyframes wave-leaf2{0%,100%{transform:rotateZ(5deg)} 50%{transform:rotateZ(2deg)} } @keyframes wave-leaf3{0%,100%{transform:rotateZ(8deg)} 50%{transform:rotateZ(13deg)} } .text{text-align:center;position:relative} </style> <div class="container"> <div class="lamp-holder"></div> <div class="lamp"></div> <div class="light"></div> <div class="wall"></div> <div class="desk"></div> <div class="screen"> <div class="sidebar"> <div class="h1"></div> <div class="h2"></div> </div> <div class="main"> <div class="search"></div> <div class="pen pen1"></div> <div class="pen pen2"></div> <div class="pen pen3"></div> <div class="pen pen4"></div> <div class="pen pen5"></div> <div class="pen pen6"></div> <div class="pen pen7"></div> <div class="pen pen8"></div> <div class="pen pen9"></div> </div> </div> <div class="mouse"></div> <div class="keyboard"></div> <div class="cup"> <div class="tea"></div> <div class="steam"></div> </div> <div class="plant"> <div class="leaf1"></div> <div class="leaf2"></div> <div class="leaf3"></div> </div> <div class="text"> <h3>闭站声明</h3> <p>本站在更新维护！请稍后访问</p> <p>官网地址：www.hackeus.cn</p> </div> </div> </body> </html>
网站添加好看的下雪特效代码 把下面的代码直接放到你网站的里面即可<canvas id="Snow" style="position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 99999;background: rgba(125,137,95,0.1);pointer-events: none;"></canvas> <script> if(true){ (function() { var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60); }; window.requestAnimationFrame = requestAnimationFrame; })(); (function() { var flakes = [], canvas = document.getElementById("Snow"), ctx = canvas.getContext("2d"), flakeCount = 200, mX = -100, mY = -100; canvas.width = window.innerWidth; canvas.height = window.innerHeight; function snow() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < flakeCount; i++) { var flake = flakes[i], x = mX, y = mY, minDist = 150, x2 = flake.x, y2 = flake.y; var dist = Math.sqrt((x2 - x) * (x2 - x) + (y2 - y) * (y2 - y)), dx = x2 - x, dy = y2 - y; if (dist < minDist) { var force = minDist / (dist * dist), xcomp = (x - x2) / dist, ycomp = (y - y2) / dist, deltaV = force / 2; flake.velX -= deltaV * xcomp; flake.velY -= deltaV * ycomp; } else { flake.velX *= .98; if (flake.velY <= flake.speed) { flake.velY = flake.speed } flake.velX += Math.cos(flake.step += .05) * flake.stepSize; } ctx.fillStyle = "rgba(255,255,255," + flake.opacity + ")"; flake.y += flake.velY; flake.x += flake.velX; if (flake.y >= canvas.height || flake.y <= 0) { reset(flake); } if (flake.x >= canvas.width || flake.x <= 0) { reset(flake); } ctx.beginPath(); ctx.arc(flake.x, flake.y, flake.size, 0, Math.PI * 2); ctx.fill(); } requestAnimationFrame(snow); }; function reset(flake) { flake.x = Math.floor(Math.random() * canvas.width); flake.y = 0; flake.size = (Math.random() * 3) + 2; flake.speed = (Math.random() * 1) + 0.5; flake.velY = flake.speed; flake.velX = 0; flake.opacity = (Math.random() * 0.5) + 0.3; } function init() { for (var i = 0; i < flakeCount; i++) { var x = Math.floor(Math.random() * canvas.width), y = Math.floor(Math.random() * canvas.height), size = (Math.random() * 3) + 2, speed = (Math.random() * 1) + 0.5, opacity = (Math.random() * 0.5) + 0.3; flakes.push({ speed: speed, velY: speed, velX: 0, x: x, y: y, size: size, stepSize: (Math.random()) / 30 * 1, step: 0, angle: 180, opacity: opacity }); } snow(); }; document.addEventListener("mousemove", function(e) { mX = e.clientX, mY = e.clientY }); window.addEventListener("resize", function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; }); init(); })(); } </script>
网站https提示不安全，显示小黄锁、红色感叹号的解决方法 从https的推出到现在，已经有很多站长开始使用https了，本站也在使用https，因为https不仅有利于网站SEO优化，https还可以有效的防止网站劫持，并且保证网站的安全连接性，更能给予用户足够的安全感，然而https如果配置的不正确，也会出现很多的问题。https显示小黄锁 红色感叹号 “锁开了”这种情况是最常见的，如果你的网站https显示小黄锁，那就说明你的ssl证书没问题，问题是出在你网站本身 https显示小黄锁主要原因是因为网站页面里面调用了http资源，因为https是属于绝对安全的加密连接方式，而http却是未加密的纯文本连接方式，也就是说https网页里面绝对不能出现http资源，例如网页里面调用的图片是http网站的，就会导致网站https提示小黄锁，这种情况只需要删掉网站里面的http资源即可。强行解决https小黄锁的方法在网站的 标签之间，加入以下代码，这串代码的意思是将网站里面所有的http资源强制换成https资源，从而达到完全安全的https连接。<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
通过QQ邮箱显示获取QQ头像，不暴露QQ号码 实现原理是获取json数据进行分割得出k值再进行重组，比较简单。function Authorimg($email) { $a='cdn.v2ex.com/gravatar';//gravatar头像源 $b=str_replace('@qq.com','',$email);//替换qq邮箱 if(stristr($email,'@qq.com')&&is_numeric($b)&&strlen($b)<11&&strlen($b)>4){ $nk = 'http://ptlogin2.qq.com/getface?&imgtype=1&uin='.$b;//qq头像api $q = file_get_contents($nk);//读入文件 $q = json_encode($nk);//编码json $k = explode("&k=",$q)[1];//分割出k值 echo 'https://q.qlogo.cn/g?b=qq&k='.$k.'&s=100';//重组 }else{ $email= md5($email); echo 'https://'.$a.'/'.$email.'?'; } }此方法实际使用貌似会影响效率，实测加载比较慢，于是就研究了下，得出第二种方法，获取HTTP请求所发送的标头的数组，不用读入整个文件不会影响效率。function Authorimg($email) { $a='cdn.v2ex.com/gravatar';//gravatar头像源 $b=str_replace('@qq.com','',$email); if(stristr($email,'@qq.com')&&is_numeric($b)&&strlen($b)<11&&strlen($b)>4){ $nk = 'https://s.p.qq.com/pub/get_face?img_type=3&uin='.$b; $c = get_headers($nk, true); $d = $c['Location']; $q = json_encode($d); $k = explode("&k=",$q)[1]; echo 'https://q.qlogo.cn/g?b=qq&k='.$k.'&s=100'; }else{ $email= md5($email); echo 'https://'.$a.'/'.$email.'?'; } }使用方法：<?php Authorimg($comments->mail); ?>
JS代码实现压缩图片并保留图片元信息 JS实现图片压缩比较简单，但是图片经过压缩后，压缩后的图片的元信息（拍摄时间、设备、地点）等会丢失掉，如果在特殊场景中需要使用这些元信息的话，就会出现问题了，因此需要将未压缩前的图片元信息填充至压缩后的图片中，以下是实现代码// 封装一个获取变量的数据类型函数 const getType = (data: unknown): string => { const toStingResult = Object.prototype.toString.call(data); const type = toStingResult.replace(/^\[object (\w+)\]$/, "$1"); return type.toLowerCase(); }; // 封装一个将 Base64 的字符串转换成 Blob 流的函数 const dataURLtoBlob = (dataURL: string): Blob | null => { const dataType = getType(dataURL); if (dataType !== "string") return null; const arr = dataURL.split(","); if (!arr[0] || !arr[1]) return null; const code = window.atob(arr[1]); const mimeExpRes = arr[0].match(/:(.*?);/); if (!mimeExpRes) return null; let len = code.length; const mime = mimeExpRes[1]; if (!mime) return null; const ia = new Uint8Array(len); while (len--) ia[len] = code.charCodeAt(len); return new Blob([ia], { type: mime }); }; // 利用规律编码格式把里面的标记以及值等分割开来，传原图片的 ArrayBuffer 进来 const getSegments = (arrayBuffer: ArrayBuffer): number[][] => { if (!arrayBuffer.byteLength) return []; let head = 0; let length, endPoint, seg; const segments = []; const arr = [].slice.call(new Uint8Array(arrayBuffer), 0); while (1) { if (arr[head] === 0xff && arr[head + 1] === 0xda) break; if (arr[head] === 0xff && arr[head + 1] === 0xd8) { head += 2; } else { length = arr[head + 2] * 256 + arr[head + 3]; endPoint = head + length + 2; seg = arr.slice(head, endPoint); head = endPoint; segments.push(seg); } if (head > arr.length) break; } return segments; }; // 传入上面 getSegments 的返回值，取出EXIF图片元信息 const getEXIF = (segments: number[][]): Array<number> => { if (!segments.length) return []; let seg: Array<number> = []; for (let i = 0; i < segments.length; i++) { const item = segments[i]; if (item[0] === 0xff && item[1] === 0xe1) { seg = seg.concat(item); } } return seg; }; // 将 getEXIF 获取的元信息，插入到压缩后的图片的 Blob 中，传 压缩图片后的 Blob 流 const insertEXIF = (blob: Blob, exif: number[]): Promise<Blob> => { return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = () => { const arr = [].slice.call(new Uint8Array(fileReader.result as ArrayBuffer), 0); if (arr[2] !== 0xff || arr[3] !== 0xe0) { return reject(new Error("Couldn't find APP0 marker from blob data")); } const length = arr[4] * 256 + arr[5]; const newImage = [0xff, 0xd8].concat(exif, arr.slice(4 + length)); const uint8Array = new Uint8Array(newImage); const newBlob = new Blob([uint8Array], { type: "image/jpeg" }); resolve(newBlob); }; fileReader.readAsArrayBuffer(blob); }); }; // 压缩图片逻辑 const compressImage = (file: File, quality: number): Promise<Blob | null> => { return new Promise((resolve, reject) => { const fileReader = new FileReader(); fileReader.onload = () => { const img = new Image(); img.src = fileReader.result as string; img.onload = () => { const { width, height } = img; const canvas = window.document.createElement("canvas"); const ctx = <CanvasRenderingContext2D>canvas.getContext("2d"); canvas.width = width; canvas.height = height; ctx.drawImage(img, 0, 0, width, height); const fileData = canvas.toDataURL("image/jpeg", quality); const fileBlob = dataURLtoBlob(fileData); resolve(fileBlob); }; img.onerror = (err) => reject(err); }; fileReader.onerror = (err) => reject(err); fileReader.readAsDataURL(file); }); }; /** * @description: 完整的压缩图片，最终对外暴露的函数 * @param {File} file * @param {number} quality 0 - 1 * @return {Promise<File>} */ export default (file: File, quality = 0.5): Promise<File> => { return new Promise((resolve, reject) => { const dataType = getType(file); if (dataType !== "file") return reject(new Error(`Expected parameter type is file, You passed in ${dataType}`)); if (file.type.indexOf("image") === -1) return resolve(file); // 压缩图片 compressImage(file, quality) .then((compressdBlob) => { if (!compressdBlob) return resolve(file); const fileReader = new FileReader(); fileReader.onload = () => { // 获取图片元信息 const segments = getSegments(fileReader.result as ArrayBuffer); const exif = getEXIF(segments); // 没有元数据的时候, 直接抛出压缩后的图片 if (!exif.length) return resolve(new File([compressdBlob], file.name, { type: file.type, lastModified: file.lastModified })); // 有元数据的时候, 将元信息合并到压缩图片里 insertEXIF(compressdBlob, exif) .then((newBlob) => resolve(new File([newBlob], file.name, { type: file.type, lastModified: file.lastModified }))) .catch(() => resolve(file)); }; fileReader.onerror = () => resolve(file); fileReader.readAsArrayBuffer(file); }) .catch(() => resolve(file)); }); };
