不想网页被人通过浏览器审查元素或控制台调试网页代码，可以通过比较屏幕window.outerWidth和页面可见区域window.innerWidth的差距判断浏览器是否打开了Web开发者工具，如果检测到Web开发者工具被打就清空网页代码。 实现代码： ;(function () { 'use strict'; var devtools = { open: false, orientation: null } var threshold = 160;//outerWidth与innerWidth...
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数据，其实做地区联动不难，麻烦的是弄对应的地区数据。 引入省市数据文件 把json数据保存为area.js文件后，引入文件（json数据太长，放在文章末尾了，请在文章末复制） <script src="area.js"></script> HTML代码： <form> <select name="province" onchange...
三张图堆叠式立体轮播图效果在网页前端开发过程中经常会做到，之前不想费心费力自己弄，习惯使用一些成熟的jquery轮播图插件（如slick.js、Owl-Carousel.js）改造实现，效果也算是差强人意。这次在bilibili上看到有人分享相同效果的代码，下载下来发现代码挺简单，效果也比较合适，于是就在原代码的基础上对html、css和js都进行了些小修改，结果比较符合自己的要求。 HTML代码： <div class="owl"> <div id="stacked"> <div class="item">...
点击网页某个元素，调用window.print()方法，打印功能，打印指定元素内的内容，经测试支持Firefox、Chrome、IE9+浏览器。 提醒：IE需要在Internet选项的安全设置中【自定义级别】的“对标记为可安全执行脚本的 ActiveX 控制执行脚本*”设置为启用。 html代码 <div id="entry"> 此处是要被打印的内容！ </div> <a href="javascript:void(0);" id="print">打印内容</a> javascr...
制作网页时，需要判断鼠标向上滚动还是向下滚动，首先想到的是通过 jquery.mousewheel.js 插件实现，但如果浏览器滚动条是正常状态，也可以通过滚动条的滚动位置来检测鼠标是向上滚动还是向下滚动，实现思路比较简单，就是比例滚动条滚动前后的位置变化即可。 函数代码： function mouseScrollDirection ( fn ) { var beforeScrollTop = document.documentElement.scrollTop || document.body.scrollTop, fn = fn || fun...
不限制层级、不区分标签名、不区分样式名，通过原生javascript代码获取所有子元素，包括子元素的子元素（孙元素）的集合，可以通过定义一个数组，然后多次嵌套使用javascript的children属性获取子元素存储到数组来实现，代码很简单，效率不详！ 代码示例 HTML代码 <div id="tddx-entry"> <p> <span></span> </p> <h2> <i></i> </h2> <h3&g...
js动态创建svg在制作网页时是经常使用到的，最简单最容易理解的用处就是如果需要多个相同的svg，如果一个一个地写<svg></svg>，即不好看，也多余，而动态创建，只需要创建一个，然后循环出来就可以了。 常规的动态创建svg var svgNS = 'http://www.w3.org/2000/svg'; //必须需要，否则可能会导致svg不显示 var svg = document.createElementNS(svgNS, svg); //因为需要命名空间，所以使用createElementNS var path = docume...
一个对象数组，已知其中一个对象属性的某个属性值，然后通过该属性值获取其所属对象的对象下标。 简单地说就是通过指定对象属性值获取对象的下标，可以通过 javascript 的 findIndex() 方法实现。 findIndex() 方法的作用是传入一个函数条件，然后返回符合条件的数组的第一个元素的位置（下标）。 示例代码： var _name = 'tddx'; //已知属性值 var _object = [ { name: 'tddx', age: '10' }, { name: 'neirong', a...
网页中常见的效果，点击按钮改变内容的字体显示大小，方便眼睛视力不同的人阅读，提高网页的用户体验。 实现方法也比较简单，通过js修改元素css的font-size属性。 实现代码 HTML代码： <a id="cut" href="javascript:void(0);">A-</a> <a id="add" href="javascript:void(0);">A+</a> <div id="entry"> 这里是内容 </div> Javascript代码...
Tab切换是网页制作中常用的效果，通过jquery很容易实现，使用原生javascript代码则稍微有点繁锁。 HTML代码： <div id="tabmenu"> <span class="current>普通会员</span> <span>超级会员</span> </div> <div id="tabbox"> <div class="item"> 普通会员权限 </div> <div class="item"> ...
因为浏览器窗口包含的元素比较多（如工具栏、任务栏、滚动条等），所以浏览器窗口的高度会因为元素的不同而不同，因此javascript获取浏览器窗口相关的高度的属性也有多个，如height、avaiHeight、outerHeight、innerHeight、clientHeight、offsetHeight。 下面这张图可以直观地理解各个属性： 属性介绍 电脑屏幕高度 Window Screen对象包含有关用户屏幕的信息。 screen.height：屏幕分辨率的高 screen.avai...