一、常见插件介绍js压缩：terser、uglifyjsjs混淆：javascript-obfuscatorcss压缩：postcss、clean-csshtml、css、js压缩：html-minifier这里我们使用 html-minifier（压缩html、css）、javascript-obfuscator（js混淆）二、开始吧运行环境：node（v14.17.6）安装依赖： npm i html-minifier javascript-obfuscator运行：根据自己的项目修改根目录、修改不进行处...
首页
前端技术
基于Zepto的移动端横向滑动点击并高亮居中显示导航条
有时候在移动网页中会有这样的需求，导航项目个数太多，然而手机屏幕的宽度是有限的，这个时候就希望导航项能横向排列左右滑动选择，当点击某个栏目之后这个栏目高亮显示并位于屏幕中间。今天我们就介绍一种解决这个需求的方案。我们采用zepto运行库来制作效果。Zepto是什么?Zepto是专门为现代智能手机浏览器退出的 Javascript 框架, 拥有和jQuery相似的语法, 但是和jQuery相比下来, 他有很多优点, Zepto是jQuery的精简，针对移动端去除了大量jQuery的兼容代码。大小方面, 压缩后的...
Pjax无刷新跳转页面实现，支持超链接与表单提交
什么是pjax？当你点击一个站内的链接的时候，不是做页面跳转，而是只是站内页面刷新。这样的用户体验，比起整个页面都闪一下来说， 好很多。 其中有一个很重要的组成部分， 这些网站的ajax刷新是支持浏览器历史的， 刷新页面的同时， 浏览器地址栏位上面的地址也是会更改， 用浏览器的回退功能也能够回退到上一个页面。 那么如果我们想要实现这样的功能， 我们如何做呢？ 我发现pjax提供了一个脚本支持这样的功能。 pjax项目地址在 https://github.com/defunkt/jquery-pjax 。 实...
JS判断访客终端是否为移动设备
第一种检测方法：var mobileAgent = new Array("iphone", "ipod", "ipad", "android", "mobile", "blackberry", "webos", "incognito", "webmate", "bada", "nokia", ...
利用JavaScript拒绝某地区或城市的IP访问网站
在工作中难免有时候网站受到来某些地域的恶意点击，或者上级部门检查，网站又要能提供服务，又要能应付检查。这个时候，我们就需要屏蔽某个地区的IP禁止访问网站，达到消除恶意点击的目的。虽然服务器配置也可以解决，但频繁改动服务器配置，有可能影响服务器稳定。因此我们采用js判断ip来路并跳转的方式来达到所需要的效果。示例代码如下：<script src="http://int.dpool.sina.com.cn/iplookup/iplookup.php?format=js" charset=...
JavaScript免费获取网站访客QQ号码方法
很多医疗网站都在做号码抓取的业务，应该99%都是花钱买的抓取业务。其实我们也可以自己做，当然了这是取巧，功能没有花钱的那么强大。有兴趣的可以试试，反正又不要钱是吧。找到网站访客QQ号码的原理原理很简单，当用户登录QQ的时候打开你的网站，网站会自动弹出你的QQ空间页面，之后在三秒钟左右自动关闭，这个时候，你打开你的QQ空间，查看你QQ空间的最近访客，这里的最近访客就是你网站的访客。这里给大家提醒一下，最好是申请一个新QQ，完全没有好友的QQ，另外如果网站访问量大于300，最好是开通黄钻，未开通黄钻的QQ空间只能...
伪类nth-child语法以及使用场景
nth-child主要用于列表或者排序分段文字的序号添加：把第3个LI的背景设为橙色li:nth-child(3){background:orange;}倍数写法：把第3、第6、第9、…、所有3的倍数的LI的背景设为橙色li:nth-child(3n){background:orange;}倍数分组匹配：匹配第1、第4、第7、…、每3个为一组的第1个LIli:nth-child(3n+1){background:orange;}匹配第5、第8、第11、…、从第5个开始每3个为一组的第1个LIli:nth-ch...
HTML5 audio音频播放全解析
html5 audio的语法以及属性和方法使用语法<audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay">亲 您的浏览器不支持html5的audio标签</audio>属性src 是歌曲的路径controls 播放控制 如果给标签里写了 controls="controls" 那么网页会显示audio自带的播放控...
手机网站页面与页头规范格式示例
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
<meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no...
JavaScript网页浏览历史记录
<fieldset id="xiaolin" style="border:1px red solid; width:300px; height:400px;line-height:25px; color:blue">
<legend style="color:red">您最近浏览过的新闻 </legend>
未找到您的最近浏览记录
</fieldset>
<script type="te...