JavaScript prototype用法示例

prototype 属性使您有能力向对象添加属性和方法。语法object.prototype.name=value控制台直接输入Number.prototype可打印出Number的所有属性,若需要获得某个对象属性这是个不错的选择。示例:<script> function employee(name,job,born) { this.name=name; this.job=job; this.born=born; } var bill=new employee("Bill Gates","Engineer",1985); // prototype 属性使您有能力向对象添加属性和方法。 employee.prototype.salary=null; bill.age=18; bill.salary=20000; bill['like']='playGame'; document.write(bill.salary); document.write("<br>"+bill.age); document.write("<br>"+bill.like); // 也可给自带对象添加属性 String.prototype.addEndStr=function(d){ return this+'?'+d; }; // 输出“你好么?世界” alert("你好么".addEndStr("世界"));</script>

layui开源后台管理系统模板集锦

LayUI官方LayAdmin是付费软件:https://www.layui.com/admin/因此在这里简单介绍几款免费开源的基于layui的后台管理系统:很赞后台 http://ok-admin.xlbweb.cn/LayuiMini http://layuimini.99php.cn/X-admin http://x.xuebingsi.com/WeAdmin https://lovetime.gitee.io/weadmin/index.html                 https://lovetime.gitee.io/weadmin/index.html

三个超实用的移动端触摸滑动js插件

主要有详细文档介绍的还是swiper官网:https://www.swiper.com.cn/其他参考:https://www.25xt.com/html5css3/10868.html

ajax中dataType和contentType的区别

contentType: 告诉服务器,我要发什么类型的数据dataType:告诉服务器,我要想什么类型的数据,如果没有指定,那么会自动推断是返回 XML,还是JSON,还是script,还是String。

LayUI表单自定义验证/校验

https://www.layui.com/doc/modules/form.html#verify

几款不错的开源HTML可视化布局项目

https://github.com/alibaba-fusion/coolhttps://github.com/0123cf/auto-layouthttps://github.com/ascoders/gaea-editor其他生成工具可参考之前文章

一段代码实现Aplayer+网易云音乐接口

将其嵌入HTML中即可<!-- require APlayer --><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css"><script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script><!-- require MetingJS --><script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script><meting-js        id="2614827308"//网易的上https://music.163.com/登陆自己的号找一个喜欢的歌单,复制地址栏上面的ID就可以啦!!!        lrc-type="0"        server="netease"//qq音乐或者其他上面有账号的小伙伴可以参考https://github.com/metowolf/MetingJS哦!!!        order="list"//这里是歌单加载的排列顺序,list:按照原歌单排列;random:打乱顺序排列        type="playlist"        fixed="true"        list-olded="true"></meting-js>其他的参数请参考https://github.com/metowolf/MetingJS 离线JS下载:https://lanzous.com/icaeuxe

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

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>