菜单

支持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...

javascript通过浏览器滚动条滚动方向判断鼠标上下滚动的函数代码

制作网页时,需要判断鼠标向上滚动还是向下滚动,首先想到的是通过 jquery.mousewheel.js 插件实现,但如果浏览器滚动条是正常状态,也可以通过滚动条的滚动位置来检测鼠标是向上滚动还是向下滚动,实现思路比较简单,就是比例滚动条滚动前后的位置变化即可。 函数代码: function mouseScrollDirection ( fn ) { var beforeScrollTop = document.documentElement.scrollTop || document.body.scrollTop, fn = fn || fun...

原生javascript获取指定对象所有子孙元素集合的代码

不限制层级、不区分标签名、不区分样式名,通过原生javascript代码获取所有子元素,包括子元素的子元素(孙元素)的集合,可以通过定义一个数组,然后多次嵌套使用javascript的children属性获取子元素存储到数组来实现,代码很简单,效率不详! 代码示例 HTML代码 <div id="tddx-entry"> <p> <span></span> </p> <h2> <i></i> </h2> <h3&g...

通俗易懂的javascript动态创建svg的函数代码

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()

一个对象数组,已知其中一个对象属性的某个属性值,然后通过该属性值获取其所属对象的对象下标。 简单地说就是通过指定对象属性值获取对象的下标,可以通过 javascript 的 findIndex() 方法实现。 findIndex() 方法的作用是传入一个函数条件,然后返回符合条件的数组的第一个元素的位置(下标)。 示例代码: var _name = 'tddx'; //已知属性值 var _object = [ { name: 'tddx', age: '10' }, { name: 'neirong', a...

javascript实现点击递增递减改变字体字号大小的代码

网页中常见的效果,点击按钮改变内容的字体显示大小,方便眼睛视力不同的人阅读,提高网页的用户体验。 实现方法也比较简单,通过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代码...

原生javascript实现tab切换效果的代码

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获取屏幕、浏览器窗口、网页的各种不同高度代码

原生javascript获取屏幕、浏览器窗口、网页的各种不同高度代码

因为浏览器窗口包含的元素比较多(如工具栏、任务栏、滚动条等),所以浏览器窗口的高度会因为元素的不同而不同,因此javascript获取浏览器窗口相关的高度的属性也有多个,如height、avaiHeight、outerHeight、innerHeight、clientHeight、offsetHeight。 下面这张图可以直观地理解各个属性: 属性介绍 电脑屏幕高度 Window Screen对象包含有关用户屏幕的信息。 screen.height:屏幕分辨率的高 screen.avai...

jquery避免setInterval setTimeout首次执行延迟的方法

javascript 的 setInterval(fn, delay) 方法和 setTimeout(fn, delay) 方法的作用是按设置的 delay 间隔时间执行 fn 函数,所以首次执行时就会有 delay 时长的延迟,如果不想首次执行有延时,那么就在这两个方法执行前,先执行一次 fn 函数。 setInterval() 方法 var num = 0; var at = function(){ console.log(num++); return at; } setInterval(at, 1000); setTimeout() 方法 ...

jquery判断scroll()是否停止滚动的代码

scroll()函数没有回调函数,没办法直接检测是否停止了滚动,但是可以换个思路,使用 setTimeout 定时器检测滚动状态。 var status = null; //定义一个定时器,默认为空,表示没滚动运 $(window).scroll(function(){ if(status != null){ clearTimeout(status); alert('正在滚动'); } //一直滚动就会一直触发 setTimeout,触了 status 就不等于null,不等于 null 就会一直执行上面那一句 status =...

javascript解决Firefox浏览器不支持zoom等比例缩放方法

由于Firefox浏览器不支持CSS3属性 zoom,所以前面jQuery + CSS属性zoom实现web页面等比例缩放的代码不支持火狐浏览器,要兼容Firefox浏览器,目前想到的方法是借且CSS3属性 transform,但是有点麻烦,适合缩放元素少的网页使用。 1、给每一个需要等比缩放的元素添加class="scale" 2、然后使用下面的js代码 (function(doc, win){ var scal = 1, obj = doc.getElementsByClassName('scale'); var res = functi...

javascript判断视频音频是否播放结束的代码

HTML DOM ended 事件在 HTML video(视频)或 audio(音频)播放完成后触发,因此通过监听 ended 事件就可以判断视频或音频是否已经播放完在,然后执行其它操作。 以下代码支持IE9+浏览器。如果是音频则把 HTML 代码改成 audio 标签的内容即可。 HTML代码: <video id="video1" src="upload/video.mp4" poster="upload/poster.jpg" webkit-playsinline="true" playsinline="tr...