网站添加好看的下雪特效代码 把下面的代码直接放到你网站的里面即可<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>

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)); }); };

一款很漂亮的一天只弹窗一次的公告 一款很漂亮的可设置时间的弹窗公告，可自定义HTML代码的公告。CSS代码/* 核客互动公告 - blog.hackeus.cn */ .btn-large,.load-all,.popup-btn,.popup-btn-o,.page-number { padding:0 15px; line-height:40px; font-size:14px; display:inline-block; border-radius:10px } .btn-gray:hover,.more:hover,.load-all:hover,.module-tab-item:hover,.module-blocklist a:hover,.video-info-aux .tag-link:hover,.page-number:hover { background:#eaedf1 } .btn-main,.popup-btn { background:#4e7cf2; color:#fff } .popup { box-shadow:0 .25rem .5rem rgba(0,0,0,.05),0 1.5rem 2.2rem rgba(0,0,0,.1)!important; padding:0 30px; background:#fff; width:400px; position:fixed; top:50%; left:50%; z-index:999999; transform:translateX(-50%) translateY(-50%); margin:0 auto; border-radius:18px } .popup::after { content:''; height:80px; width:100%; background:#eaedf1; position:absolute; top:0; left:0; z-index:-1; border-radius:18px 18px 0 0 } .popup-header { line-height:40px; text-align:center } .popup-title { position:relative; font-size:18px; font-weight:900; display:inline-block } .popup-title::after { content:''; position:absolute; width:100%; height:30%; background:#fde6dd; border-radius:5px; left:0; bottom:5px; z-index:-1 } .close-popup:hover { background:#fff } .close-popup i { transform:scale(.88); font-size:12px; color:#fff } .close-popup:hover i { color:#ff2a14 } .popup-icon { width:100%; text-align:center; height:220px; margin:-60px 0 0 } .popup-icon img { height:220px } .popup-main { padding-bottom:20px } .popup-main p { padding:12px 0 0 } .popup-main p a { color:#ff2a14 } .popup strong { color:#ff2a14 } .popup-footer { padding:10px 0 30px; text-align:center } .popup-footer p { margin-top:10px } .popup-btn { font-weight:700; border-radius:50px; width:100%; cursor:pointer } .popup-btn-o { color:#ff2a14; font-weight:700; width:50%; margin:5px 5px; cursor:pointer } .popup-btn-o::after { border-color:#ff2a14; border-radius:50px } .popup-msg { position:fixed; width:280px; z-index:9999999; height:auto; padding:30px; top:50%; left:50%; margin:-50px 0 0 -140px; text-align:center; color:#fff; background-color:rgba(7,7,10,.92); border-radius:10px } .popup-tips::after { background:0 0 }JS代码/* 核客互动公告 - blog.hackeus.cn */ function cookiesave(n, v, mins, dn, path) { if (n) { if (!mins) { mins = 24 * 60; } if (!path) { path = "/"; } var date = new Date(); date.setTime(date.getTime() + (mins * 60 * 1000)); var expires = "; expires=" + date.toGMTString(); if (dn) { dn = "domain=" + dn + "; "; } document.cookie = n + "=" + v + expires + "; " + dn + "path=" + path; } } function cookieget(n) { var name = n + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1, c.length); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return "" } function closeclick() { document.getElementById('note').style.display = 'none'; cookiesave('closeclick', 'closeclick', '', '', '') } function clickclose() { if (cookieget('closeclick') == 'closeclick') { document.getElementById('note').style.display = 'none' } else { document.getElementById('note').style.display = 'block'; } } window.onload = clickclose;调用<div class="popup" id="note" style="display:none;"> <div class="popup-icon"><img src="https://lib.hackeus.cn/static/svg/blogannouncement.svg"></div> <div class="popup-header"> <h3 class="popup-title">同一个世界，同一个梦想</h3> </div> <div class="popup-main"> <p>核客互动欢迎你！</p> <p>程序大门常打开，开放怀抱等你 。拥抱过就有了默契，你会爱上这里 ！不管远近都是客人，请不用客气 ，相约好了在一起，我们欢迎你……</p> <p>哇！终于等到你啦！此公告单纯的只是为了表示感谢！ <strong>天气炎热</strong>，小心中署； <strong>感恩有你</strong> ，不离不弃！</p> <p>建议使用 <strong>Ctrl + D</strong> 收藏本站，让你不再错过任何篇优秀文章哟！</p> <p>愿你有诗有梦，有坦荡的远方；愿你历遍山河，仍觉得人间值得!</p></div> <div class="popup-footer"><span class="popup-btn" onclick="closeclick()">我记住啦</span></div> </div>

font-family常用字体大集合 中文字体font-family常用列表Windows：新細明體：PMingLiU細明體： MingLiU標楷體： DFKai-SB黑体： SimHei新宋体： NSimSun仿宋： FangSong楷体： KaiTi仿宋_GB2312：FangSong_GB2312楷体_GB2312：KaiTi_GB2312微軟正黑體： Microsoft JhengHei微软雅黑体： Microsoft YaHei宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 DFKai-SB仿宋 FangSong楷体 KaiTi仿宋_GB2312 FangSong_GB2312楷体_GB2312 KaiTi_GB2312宋体：SimSuncss中中文字体（font-family）的英文名称Mac OS的一些：华文细黑：STHeiti Light [STXihei]华文黑体：STHeiti华文楷体：STKaiti华文宋体：STSong华文仿宋：STFangsong儷黑 Pro：LiHei Pro Medium儷宋 Pro：LiSong Pro Light標楷體：BiauKai蘋果儷中黑：Apple LiGothic Medium蘋果儷細宋：Apple LiSung Light装Office：隶书： LiSu幼圆： YouYuan华文细黑：STXihei华文楷体：STKaiti华文宋体：STSong华文中宋：STZhongsong华文仿宋：STFangsong方正舒体：FZShuTi方正姚体：FZYaoti华文彩云：STCaiyun华文琥珀：STHupo华文隶书：STLiti华文行楷：STXingkai华文新魏：STXinwei

自定义网站鼠标右建菜单美化代码 将下面的代码放入相面页面中，如页脚文件foot.php或者footer.php里即可。配合弹窗提醒食用更佳， 在适当的位置引入 layer.js官方CDN源：https://cdn.staticfile.org/layer/3.1.1/layer.js引用 Font Awesome 图标官方CDN源：https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css<!-- 右键美化 --> <style type="text/css"> a {text-decoration: none;} div.usercm{background-repeat:no-repeat;background-position:center center;background-size:cover;background-color:#fff;font-size:13px!important;width:130px;-moz-box-shadow:1px 1px 3px rgba (0,0,0,.3);box-shadow:0px 0px 15px #333;position:absolute;display:none;z-index:10000;opacity:0.9; border-radius: 8px;} div.usercm ul{list-style-type:none;list-style-position:outside;margin:0px;padding:0px;display:block} div.usercm ul li{margin:0px;padding:0px;line-height:35px;} div.usercm ul li a{color:#666;padding:0 15px;display:block} div.usercm ul li a:hover{color:#fff;background:rgba(170,222,18,0.88)} div.usercm ul li a i{margin-right:10px} a.disabled{color:#c8c8c8!important;cursor:not-allowed} a.disabled:hover{background-color:rgba(255,11,11,0)!important} div.usercm{background:#fff !important;} </style> <div class="usercm" style="left: 199px; top: 5px; display: none;"> <ul> <li><a href="https://blog.hackeus.cn/"><i class="fa fa-home fa-fw"></i><span>网站首页</span></a></li> <li><a href="javascript:void(0);" onclick="getSelect();"><i class="fa fa-copy fa-fw"></i><span>复制文字</span></a></li> <li><a href="javascript:history.go(1);"><i class="fa fa-arrow-right fa-fw"></i><span>前进一页</span></a></li> <li><a href="javascript:history.go(-1);"><i class="fa fa-arrow-left fa-fw"></i><span>后退一页</span></a></li> <li style="border-bottom:1px solid gray"><a href="javascript:window.location.reload();"><i class="fa fa-refresh fa-fw"></i><span>刷新页面</span></a></li> <li><a href="javascript:void(0);" onclick="baiduSearch();"><i class="fa fa-paw fa-fw"></i><span>百度搜索</span></a></li> <li><a href="javascript:void(0);" onclick="googleSearch();"><i class="fa fa-google fa-fw"></i><span>谷歌搜索</span></a></li> <li style="border-bottom:1px solid gray"><a target="_blank" href="//www.hackeus.cn/"><i class="fa fa-refresh fa-fw"></i><span>官网地址</span></a></li> </ul> </div> <script type="text/javascript"> (function(a) { a.extend({ mouseMoveShow: function(b) { var d = 0, c = 0, h = 0, k = 0, e = 0, f = 0; a(window).mousemove(function(g) { d = a(window).width(); c = a(window).height(); h = g.clientX; k = g.clientY; e = g.pageX; f = g.pageY; h + a(b).width() >= d && (e = e - a(b).width() - 5); k + a(b).height() >= c && (f = f - a(b).height() - 5); a("html").on({ contextmenu: function(c) { 3 == c.which && a(b).css({ left: e, top: f }).show() }, click: function() { a(b).hide() } }) }) }, disabledContextMenu: function() { window.oncontextmenu = function() { return !1 } } }) })(jQuery); function getSelect() { "" == (window.getSelection ? window.getSelection() : document.selection.createRange().text) ? layer.msg("请选择需要复制的内容！") : document.execCommand("Copy") } function baiduSearch() { var a = window.getSelection ? window.getSelection() : document.selection.createRange().text; "" == a ? layer.msg("请选择需要百度的内容！") : window.open("https://www.baidu.com/s?wd=" + a) } function googleSearch() { var a = window.getSelection ? window.getSelection() : document.selection.createRange().text; "" == a ? layer.msg("请选择需要谷歌的内容！") : window.open("https://www.google.com/search?q=" + a) } $(function() { for (var a = navigator.userAgent, b = "Android;iPhone;SymbianOS;Windows Phone;iPad;iPod".split(";"), d = !0, c = 0; c < b.length; c++) if (0 < a.indexOf(b[c])) { d = !1; break } d && ($.mouseMoveShow(".usercm"), $.disabledContextMenu()) }); </script> <!-- 右键美化结束 -->

CSS文本超出多行就隐藏并且显示省略号 如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来，当然还需要加宽度width属来兼容部分浏览。单行溢出隐藏overflow:hidden; //文字长度超出限定宽度，则隐藏超出的内容 text-overflow:ellipsis; //规定当文本溢出时，显示省略符号来代表被修剪的文本 white-space:nowrap; //设置文字在一行显示，不能换行//上面是一行内容的时候，当有两行的内容时候多行溢出隐藏overflow: hidden; //文本溢出限定的宽度就隐藏内容 text-overflow: ellipsis; //多行文本的情况下，用省略号“…”隐藏溢出范围的文本 display:-webkit-box; //和1结合使用，将对象作为弹性伸缩盒子模型显示 -webkit-box-orient:vertical; //和1结合使用 ，设置或检索伸缩盒对象的子元素的排列方式。设置伸缩盒子的子元素排列方式--从上到下垂直排列 -webkit-line-clamp:2; //用来限制在一个块元素显示的文本的行数,2表示最多显示2行。 为了实现该效果，它需要组合其他的WebKit属性

PHP获取每日BING图 并且缓存URL链接到本地JSON 将获取的BING图链接进行缓存，减少服务器负担，提升访问速度。<?php $filename = "./bing.json"; if (file_exists($filename) === false) { file_put_contents($filename, ""); } $handle = fopen($filename, "r"); $contents = fread($handle, filesize($filename)); fclose($handle); $contents = json_decode($contents, true); if (filesize($filename) === 0) { getBingImg(); } else { if ($contents['time'] === date("Ymd")) { Header("Location: " . $contents['url']); } else { getBingImg(); } } function getBingImg() { $str = json_decode(file_get_contents('https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1')); if (isset($str->images[0])) { $impurely = 'https://cn.bing.com' . $str->images[0]->url; } else { $impurely = false; } if ($impurely) { global $contents; if ($contents['url'] !== $impurely) { global $filename; $data = array( "time" => date("Ymd"), "url" => $impurely ); $data = json_encode($data); file_put_contents($filename, $data); } Header("Location: " . $impurely); exit(); } else { exit('error'); } } ?>