菜单

javascript防止浏览器打开Web开发者工具查看或调试代码

不想网页被人通过浏览器审查元素或控制台调试网页代码,可以通过比较屏幕window.outerWidth和页面可见区域window.innerWidth的差距判断浏览器是否打开了Web开发者工具,如果检测到Web开发者工具被打就清空网页代码。 实现代码: ;(function () { 'use strict'; var devtools = { open: false, orientation: null } var threshold = 160;//outerWidth与innerWidth...

超简单的隐藏overflow:scroll滚动条的css代码

目前为止还没有单个css样式属性来隐藏overflow属性的默认滚动条,需要针对不同浏览器使用不同的专属css样式属性或css伪类来实现。如对于webkit内核的浏览器Chrome、Safari等使用css伪类;Firefox火狐浏览器使用scrollbar-width属性;IE 10+浏览器使用专属属性-ms-overflow-style。 Firefox浏览器 scrollbar-width 允许开发者设置滚动条出现时的厚度,可选值:auto、thin、none,支持Firefox 64+版本、Firefox for Android 64+版本 代...

Swiper幻灯片插件实现video视频播放结束再继续轮播的代码

使用Swiper.js轮播图插件实现当前活动块元素有video视频时swiper停止自动切换,监听视频播放结束再继续自动切换到下一个的效果。实现该效果需要用到swiper事件有slideChangeTransitionEnd(swiper)、用到swiper的方法有mySwiper.autoplay.stop()、mySwiper.autoplay.start()。 实现代码 HTML代码 <div class="swiper" id="slides"> <div class="swiper-wrapper"> <di...

百度编辑器UEditor单独调用附件上传功能组件的代码

UEditor编辑器有上传附件的组件,如果网站有使用UEditor编辑器,又想在编辑器窗口外单独调用UEditor的上传附件功能,可以参考下面的代码。 HTML代码 <div class="uploadfile"> <input name="file" id="file" type="text" class="uplod_file" value="" /> <span class="btn">上传附件</span> </div> 引用UEditor编辑器相关文件 <!-- 配置...

解决Less下使用CSS calc函数px按%计算导致结果错误的问题

在Less中使用CSS函数calc()动态计算长度值时出现错误,原本是px像素单位的数值被当成%百分比单位来计算,导致计算结果不正确。 Less代码: .calc { width:calc(100% - 90px); } 编译后的CSS代码: .calc { width:calc(10%); } 原因是less对代码进行了转换编译,解决方法是使用 “~''” 符合禁止对其编译,让其原样输出即可。 修改代码如下: .calc { width:~'calc(100% - 90px)'; } 编译后的代码如下:...

jQuery $.ajax请求本地文件数据的返回值是字符串的解决方法

使用 $.ajax 请求本地静态文件数据,数据明明是JSON格式,但返回值的数据类型却是字符串,这是因为在数据传输过程中,JSON是以文本(即字符串)的形式传递的,所以返回的值也就是字符串类型,因此在操作返回的JSON数据时,需要先把JSON字符串转换为JSON对象,也就是解析,即反序列化(简单地理解)。 涉及基础 简单地理解,序列化就是把JSON对象转化成JSON字符串类型的过程;反序列化则是把JSON格式的字符串转化为JSON对象的过程。 在jQuery中可以使用 $.parseJSON(data) 实现标准格式的JSON字符串反序列化为JSON对...

SuperSlide.js插件实现当video视频播放完后再切换下一张

在修改网页的焦点图效果:当前焦点是视频的时候,暂停焦点图的自动轮播,当视频播放完成后再启用焦点图的自动轮播。查看代码发现该焦点图使用的是 SuperSlide.js 插件,这是一款存在时间挺长的 jquery 焦点图插件,但多年的更新,插件的参数还是不够丰富全面,一些效果实现起来会比较麻烦。不过庆幸的是 SuperSlide.js 插件有提供 startFun 和 endFun 函数。 温馨提示:以下代码适用于 SuperSlide 2.1+版本。 实现代码: HTML代码 <div class="slides"> <...

控制CSS animation动画暂停或运行的样式属性animation-play-state代码

animation 动画是经常会使用到的CSS3样式属性,通常是用来运行 @keyframes 定义动画,在网页开发过程中,想暂停 animation 动画要怎么做?CSS3 提供了 animation-play-state 属性,该属性的作用是运行或者暂停动画,支持该属性的浏览器版本 Chrome 43+(4.0 -webkit-)、IE10+、Firefox 16+(5.0 -moz-)、Safari 9.0+、Opera 30+(12.0 -o-)。 语法 animation-play-state: paused|running; 参数 ...

带完整省市json数据的jquery省市二级联动代码

做表单涉及到地址地区时,经常需要做地区联动,比如省市二级联动、省市县三级联动以及更深层次的省市县镇街道联运等,下面的代码是最常用到的省市二级联动,附带了完整的json数据,其实做地区联动不难,麻烦的是弄对应的地区数据。 引入省市数据文件 把json数据保存为area.js文件后,引入文件(json数据太长,放在文章末尾了,请在文章末复制) <script src="area.js"></script> HTML代码: <form> <select name="province" onchange...

响应式javascript堆叠式轮播图切换的实现代码

响应式javascript堆叠式轮播图切换的实现代码

三张图堆叠式立体轮播图效果在网页前端开发过程中经常会做到,之前不想费心费力自己弄,习惯使用一些成熟的jquery轮播图插件(如slick.js、Owl-Carousel.js)改造实现,效果也算是差强人意。这次在bilibili上看到有人分享相同效果的代码,下载下来发现代码挺简单,效果也比较合适,于是就在原代码的基础上对html、css和js都进行了些小修改,结果比较符合自己的要求。 HTML代码: <div class="owl"> <div id="stacked"> <div class="item">...

给浏览器F12控制台添加提示文字的代码

给浏览器F12控制台添加提示文字的代码

通过审查元素或者直接F12键打开浏览器控制台默认是空白的,但可以通过javascript代码的console.log给它添加一个带样式的提示内容,支持Firefox、Chrome、Edge(不支持IE系列)等浏览器。 代码 if (window.console) { console.log("%c掏点东西(https://www.tddx.net)","color:#fff; background-color:#333333; padding:5px; border-radius: 10px; font-size:16px;"); ...

支持IE/Chrome/Firefox浏览器的网页打印javascript代码

支持IE/Chrome/Firefox浏览器的网页打印javascript代码

点击网页某个元素,调用window.print()方法,打印功能,打印指定元素内的内容,经测试支持Firefox、Chrome、IE9+浏览器。 提醒:IE需要在Internet选项的安全设置中【自定义级别】的“对标记为可安全执行脚本的 ActiveX 控制执行脚本*”设置为启用。 html代码 <div id="entry"> 此处是要被打印的内容! </div> <a href="javascript:void(0);" id="print">打印内容</a> javascr...