Web-极四维博客-思维部落格

离开页面动态网页标题JS

当用户离开含此JS页面窗口时触发事件更改标题内容<script>;(function () { var defaultTitle = document.title; var isRollTitle = 0; //为1时滚动标题 var rollTimeDelay = '500'; //滚动间隔 var step = 0; var titles = ["牛逼","武汉加油！","爱我"]; //随机语 var showStyle = 'random'; // 滚动标题 if (isRollTitle) setInterval(function() { document.title = document.title.substring(1, document.title.length) + document.title.substring(0, 1); }, rollTimeDelay); // 离开页面 document.addEventListener('visibilitychange', function () { if (document.visibilityState == 'hidden') { switch (showStyle) { case "random": step = parseInt(Math.random() * titles.length); break; default: case "order": if (step >= titles.length) step = 0; break; } document.title = titles[step]; step++; } else { document.title = defaultTitle; } });})();</script>

2020/03/16 12:27 193 0

Javascript给网站/博客添加复制代码功能纯JS

遍历pre标签给每个标签命名id，然后通过双击事件调用复制方法实现最简单代码复制：<script> window.onload = function () { let preItems = document.getElementsByTagName('pre'); for (let index in preItems) { let preItem = preItems[index]; preItem.setAttribute("id", index); preItem.setAttribute("ondblclick", 'copycode(' + index + ')'); preItem.setAttribute("title", '双击复制'); } } function copycode(i) { const range = document.createRange(); range.selectNode(document.getElementsByTagName('pre')[i]); const selection = window.getSelection(); if (selection.rangeCount > 0) selection.removeAllRanges(); selection.addRange(range); document.execCommand('copy'); Toast("复制成功".1000) } function Toast(msg, duration) { duration = isNaN(duration) ? 3000 : duration; var m = document.createElement('div'); m.innerHTML = msg; m.style.cssText = "max-width:60%;min-width: 150px;padding:0 14px;height: 40px;color: rgb(255, 255, 255);line-height: 40px;text-align: center;border-radius: 4px;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 999999;background: rgba(0, 0, 0,.7);font-size: 16px;"; document.body.appendChild(m); setTimeout(function () { var d = 0.5; m.style.webkitTransition = '-webkit-transform ' + d + 's ease-in, opacity ' + d + 's ease-in'; m.style.opacity = '0'; setTimeout(function () { document.body.removeChild(m) }, d * 1000); }, duration); }</script>

2020/03/14 15:26 199 0

JS简单函数实现页面元素文本复制功能

JSfunction copywx() { const range = document.createRange(); range.selectNode(document.getElementById('copy_content')); const selection = window.getSelection(); if (selection.rangeCount > 0) selection.removeAllRanges(); selection.addRange(range); document.execCommand('copy'); alert("复制成功！")}其中可以打印range出来看看复制的内容。

2020/03/12 20:55 180 0

一个精美手机端HTML下载单页

总体感觉还不错，可以做手机端下载单页面使用。预览图：代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>标题</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <style> * { font-family: '微软雅黑'; box-sizing: border-box; outline: none; margin: 0; padding: 0; border: 0; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: #3c3c3c; } html, body { height: 100%; margin: 0 auto; max-width: 760px; } header { position: fixed; top: 0; width: 100%; max-width: 760px; height: 56px; z-index: 1 } u { color: #fff; font-size: 18px; position: fixed; top: 60px; margin-left: 116px; z-index: 2; display: block; height: 56px; line-height: 56px; } header img { width: 56px; height: 56px; padding: 16px } header img:active { background: rgba(255, 255, 255, 0.4); } main { z-index: -1; position: fixed; top: 0; padding-top: 56px; height: 272px; background: url('http://wanqiu77.club/template/default/img/bg.jpg') 100%; width: 100%; max-width: 760px; } main img { width: 68px; height: 68px; margin: 24px; float: left } main b { margin-top: 56px; display: block; color: #fff; font-size: 12px } main p { color: #fff; font-size: 12px; margin-top: 4px } ul { padding-top: 172px } ul a { margin-top: -28px; margin-right: 24px; background: #009688; width: 56px; height: 56px; float: right; box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.4); border-radius: 56px; } ul a img { width: 56px; height: 56px; padding: 16px; } aside { display: block; background: #fff; height: 100%; border-left: solid 1px #e0e0e0; border-right: solid 1px #e0e0e0 } aside li { list-style: none; padding: 24px 16px; color: #009688; font-size: 14px; background: #fff; border-bottom: solid 1px #eee } aside li b { color: #d0d0d0; font-size: 10px; margin-left: 8px } aside ol { padding: 16px; font-size: 14px; color: #797979; background: #edf7ee; min-height: 196px } aside p { padding: 16px; } aside p cite { white-space: nowrap; overflow-x: auto; display: block; } aside p img { height: 300px; background: #eee; margin-right: 4px; } aside div { padding: 16px; font-size: 14px; color: #797979; min-height: 196px } </style></head><body><header><img src="http://wanqiu77.club/template/default/img/back.png" onclick="alert('！')"></header><u>寒论社区</u><main><img src="http://wanqiu77.club/template/default/img/guesthead.png"><b>V 1.3.2</b> <p>2.6MB / 2627下载 / 中文</p></main><ul><a href="https://www.lanzous.com/ia3ozah"><img src="http://wanqiu77.club/template/default/img/down.png"></a></ul><aside> <li>更新日志<b>(2020.3.10.4.30)</b></li> <ol>- 世界之大，无奇不有。这里有你所见或不见的广博奇闻；<br> - 天真烂漫，追忆童年。这里有各种的游戏任你挑战；<br> - 精彩花絮，制作天星。这里有可以帮助你生活乃至工作的精彩软件。<br></ol> <p><cite><img src="http://wanqiu77.club/template/default/img/han4.png"><img src="http://wanqiu77.club/template/default/img/han3.png"><img src="http://wanqiu77.club/template/default/img/han2.png"><img src="http://wanqiu77.club/template/default/img/han1.png"></cite></p> <li>应用介绍</li> <div>随时随地发现新鲜事！我们带你欣赏世界上的精彩瞬间，了解他们的幕后故事。分享你想表达的，让全世界都能听到你的心声。 </div></aside></body><script> var header = document.getElementsByTagName("header")[0]; var mian = document.getElementsByTagName("main")[0]; var u = document.getElementsByTagName("u")[0]; var a = document.getElementsByTagName("a")[0]; window.onscroll = function () { if (window.scrollY < 116) { mian.style.top = "-" + window.scrollY / 2 + "px"; u.style.top = 60 - window.scrollY / 1.9 + "px"; u.style.marginLeft = 116 - window.scrollY / 2.4 + "px"; a.style.display = ""; header.style.background = ""; header.style.boxShadow = "none"; } else { a.style.display = "none"; header.style.background = "#009688"; header.style.boxShadow = "0px 2px 8px rgba(0,0,0,0.2)"; if (u.style.top != "0px" || u.style.marginLeft != "68.0833px") { u.style.top = "0px"; u.style.marginLeft = "68.0833px"; } } }</script></html>

2020/03/12 20:23 319 1

苹果苹方字体网页CSS 让网站更有质感

提取自油猴脚本“质感字体”，可以添加到你的网站CSS中全局改变网站字体：<style type="text/css">*:not([class*='icon']):not(.fa):not(.fas):not(i) {font-family: 'PingFang SC','Heiti SC','myfont','Microsoft YaHei','Source Han Sans SC','Noto Sans CJK SC','HanHei SC', 'sans-serif' ,'icomoon','Icons' ,'brand-icons' ,'FontAwesome','Material Icons','Material Icons Extended','Glyphicons Halflings' !important;} *{font-weight:bold !important;font-family: 'PingFang SC','Microsoft YaHei';}</style>

2020/03/03 23:46 245 0

一行代码任意修改浏览器网页内容微博改图装逼神器

时常，我们会在网上看到王思聪微博语录的截图，一看就知道不是真的，但图片是P的么？其实并不是，只需一句代码就能达到此效果。浏览器按F12，在console中输入以下代码：document.body.contentEditable='true';输入后按回车即可，随后你就可以用鼠标修改任意网页内容了！解除编辑也很简单：document.body.contentEditable='false';附赠一个油猴脚本，可以通过快捷键开启页面编辑（脚本名“ctrl + alt + E切换页面可编辑”）：(function() { var flag=0; document.body.addEventListener('keydown',function(event){ var keynum; if(window.event) // IE { keynum = event.keyCode; } else if(event.which) // Netscape/Firefox/Opera { keynum = event.which; } if(keynum==69&&event.altKey&&event.ctrlKey){ //若想更改快捷键，请用需要的keyCode与keynum变量进行比较。altKey可以改为ctrlKey、shiftKey或metaKey。请务必注意尽量避免快捷键冲突！ if(!(flag%2)){ document.body.contentEditable = true; }else if(flag%2){ document.body.contentEditable = false; } flag++; } }); /* * 以下代码用于从键盘读取你需要的键的keyCode * 去掉注释后，在任意页面运行脚本，按下需要的键，页面会alert出该键的keyCode * 将判断条件改成你需要的快捷键 * 如： * 已知z的keyCode为229 * 则将第25行的判断条件改为 keynum==229 && event.altKey && event.ctrlKey 时，此时的快捷键为 ctrl + alt + z *//******************若想查询keyCode请去除以下注释*********************/ /* document.body.onkeydown=function(event){ alert(event.keyCode); }; *//******************若想查询keyCode请去除以上注释*********************/})();

2020/03/03 23:13 181 0

重大日子里让整个网站网页变灰方法/网站自动变灰

一般在公祭日或一些影响力很大的伟人逝世或纪念日，作为站长会将网站全站页面变成灰色，以表示我们对逝者的悼念。那今天讲讲几种让网站全站变灰的方法：1、修改CSS，无论是修改CSS文件，还是HTML内部写都可以<style type="text/css">html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}</style>或者body *{-webkit-filter: grayscale(100%); /* webkit */-moz-filter: grayscale(100%); /*firefox*/-ms-filter: grayscale(100%); /*ie9*/-o-filter: grayscale(100%); /*opera*/filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);filter:gray; /*ie9- */}2、HTML内嵌<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);">3、JS自动变灰<script type="text/javascript">$(function() { var myDate = new Date; var mon = myDate.getMonth() + 1; //获取当前月 var date = myDate.getDate(); //获取当前日 var days=['5.12','12,13']; //在这里自定义日期 for (var day of days) { var d=day.split('.'); if (mon == d[0] && date == d[1]) { //置html或body标签css皆可 $("html").css('filter','progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)') .css('-webkit-filter','grayscale(100%)'); } }})</script>

2020/03/02 16:13 599 1

给各类网站/博客文章添加字数统计与预计阅读时间

今日浏览别人博客时，看到别人博客每页都有字数统计与预计阅读时间，感觉有点用，只是其用PHP代码写的。也有Hexo网站的字数统计，但是是其自带的功能。于是用自己仅会的一点JS知识写个简单的文章字数统计与阅读时间预测。// 获取当前页面URI var pathName = window.location.pathname;// 通过URL中特征字符串判断当前浏览是不是文章页// 本站文章页URI含'post/'' if (pathName.indexOf('post/') > -1) { // 计算文章内容字符数 // .article-content为本站文章内容div var content_num=$(".article-content").text().replace(/\s/g, "").length; // 计算阅读时间很简单除以400取值就行了 // 400这个值可任意修改你觉得适合的 var content_min=Math.ceil(content_num/400); // 追加到文章内容最前显示 $('.article-content').prepend('<p class="putong">本文总共 <b>'+content_num+'</b> 字 · 阅读全文大约需要 <b>'+content_min+'</b> 分钟</p>'); }以上可部署在任意支持自定义HTML/JS的博客或网站上，只需更改上面css样式名即可。若获取不到值请将其放到onload或ready事件中即可。

2020/02/29 17:56 617 2

igfonts.io字体生成工具生成漂亮英文艺术文字

这个工具利用Unicode字符来制作类似于普通ASCII文本的“伪字母”。ASCII字符是Unicode的前128个符号。但是，Unicode中的符号远远超过128个，碰巧的是，有许多符号看起来有点像普通的拉丁字母。例如：𝕴 𝖑𝖔𝖛𝖊 𝖞𝖔𝖚 𝖙𝖍𝖗𝖊𝖊 𝖙𝖍𝖔𝖚𝖘𝖆𝖓𝖉 𝖙𝖎𝖒𝖊𝖘𝓘 𝓵𝓸𝓿𝓮 𝔂𝓸𝓾 𝓽𝓱𝓻𝓮𝓮 𝓽𝓱𝓸𝓾𝓼𝓪𝓷𝓭 𝓽𝓲𝓶𝓮𝓼 𝐼 𝓁☯𝓋𝑒 𝓎🍪𝓊 𝓉𝒽𝓇𝑒𝑒 𝓉𝒽💞𝓊𝓈𝒶𝓃𝒹 𝓉𝒾𝓂𝑒𝓈IGFonts官网：https://igfonts.io还有一个类似的项目：https://github.com/wind-liang/unicode

2020/02/11 19:09 306 0

一行代码为网站添加暗黑模式/夜间模式

Darkmode.Js使用CSS mix-blend-mode 来为网站添加暗黑模式。只需复制粘贴以下代码段到你的网站，即可获得一个小部件以打开和关闭暗黑模式。官网：https://darkmodejs.learn.uno项目：https://github.com/sandoche/Darkmode.js演示：https://darkmodejs.learn.uno将以下代码加到你网站即可<script src="https://cdn.jsdelivr.net/npm/darkmode-js@1.5.4/lib/darkmode-js.min.js"></script><script> new Darkmode().showWidget();</script>

2020/02/11 19:01 334 0