前端可视化代码在线生成工具

http://lowcode.magicalcoder.com/ 支持elementUI、layUI、bootstrap等多种前段框架布局代码生成,想省事的可以试试

给自己网站添加图片预览 大小缩放功能

网站没有图片放大预览功能,当自己在文章中插入大尺寸图片时,在网页看图片细节会看不清,这种情况要不右键保存图片到本地,要不复制图片链接在新窗口打开才能看到图片中细节。其实只需要小小的js插件即可实现图片预览效果。今天介绍的插件Viewer.js,效果可尝试下图。点击图片预览,鼠标滚轮或键盘方向键上下可放大缩小,左右方向键可切换图片,ESC或点击X键退出预览,并且支持幻灯片播放。实现方法:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" href="css/viewer.min.css"> <script src="js/viewer.min.js"></script> </head> <body> <img src="./img/tibet-1.jpg" alt="图片1"> <img src="./img/tibet-2.jpg" alt="图片2"> </body> <script> // 这里选创建浏览对象所在范围的元素,body全通用: // 本页采用的是document.getElementsByClassName("article-content")[0]) // 即根据文章内容class获取文章内容元素 然对其进行创建预览对象 var viewer = new Viewer(document.body); </script></html>其实也就是简单调用其js与css,然后利用new Viewer()调用即可。JQ版本调用为:$('#id').viewer();参数配置:名称类型默认值说明inline布尔值false启用 inline 模式button布尔值true显示右上角关闭按钮(jQuery 版本无效)navbar布尔值/整型true显示缩略图导航title布尔值/整型true显示当前图片的标题(现实 alt 属性及图片尺寸)toolbar布尔值/整型true显示工具栏tooltip布尔值true显示缩放百分比movable布尔值true图片是否可移动zoomable布尔值true图片是否可缩放rotatable布尔值true图片是否可旋转scalable布尔值true图片是否可翻转transition布尔值true使用 CSS3 过度fullscreen布尔值true播放时是否全屏keyboard布尔值true是否支持键盘interval整型5000播放间隔,单位为毫秒zoomRatio浮点型0.1鼠标滚动时的缩放比例minZoomRatio浮点型0.01最小缩放比例maxZoomRatio数字100最大缩放比例zIndex数字2015设置图片查看器 modal 模式时的 z-indexzIndexInline数字0设置图片查看器 inline 模式时的 z-indexurl字符串/函数src设置大图片的 urlbuild函数null回调函数,具体查看演示built函数null回调函数,具体查看演示show函数null回调函数,具体查看演示shown函数null回调函数,具体查看演示hide函数null回调函数,具体查看演示hidden函数null回调函数,具体查看演示view函数null回调函数,具体查看演示viewed函数null回调函数,具体查看演示配置也很简单,把参数配置写在new Viewer第二个参数中即可: new Viewer(document.body, { url: 'data-original', button: true, navbar: true });下载:点击下载Viewer.js

给自己网站添加图片预览 大小缩放功能

离开页面动态网页标题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>

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>

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出来看看复制的内容。

一个精美手机端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.lanzoux.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>

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

苹果苹方字体网页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>

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

时常,我们会在网上看到王思聪微博语录的截图,一看就知道不是真的,但图片是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请去除以上注释*********************/})();

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

一般在公祭日或一些影响力很大的伟人逝世或纪念日,作为站长会将网站全站页面变成灰色,以表示我们对逝者的悼念。那今天讲讲几种让网站全站变灰的方法: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>

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

今日浏览别人博客时,看到别人博客每页都有字数统计与预计阅读时间,感觉有点用,只是其用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事件中即可。