常见的活动倒计时效果js代码，实现原理很简单，通过计算结束时间与当前的时间差实现倒计时，然后可以使用setInterval方法实现每隔1000毫秒（即1秒）变动一次剩余时间的动态倒计时效果。 HTML代码： <div class="countTime"> <span id="day"></span> <span>天</span> <span id="hour"></span> <span>时</span> <span id="min"&g...

Javascript join()方法用于把一个数组中的所有元素通过指定的分隔符进行分隔转换为一个字符串。join()方法为JavaScript版本增加，所有主要浏览器都支持。 语法： array.join(separator); 参数 separator：可选，指定要使用的分隔符（如,-|等），留空则自由使用逗号作为分隔符。 返回值 String：返回一个字符串，该字符串是通过把数组中的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入分隔符separator而生成的字符串。 示例： var...

做一个点击指定元素切换指定内容的页面模块（TAB切换），要切换的内容是独立的swiper.js轮播插件模块，如果先swiper初始化轮播内容，然后实现tab切换就会出现各轮播模块冲突，比如前进后退按钮异常、分页器异常、切换时内容加载异常等。可以避免各轮播模块冲突的方法是点击切换时再初始化当前的swiper轮播，其它的swiper轮播则注销掉。 HTML代码： <script src="js/swiper-bundle.min.js"></script> <div class="videos"> <div class="ta...

实现监控检测网页所有图片是否加载完成的思路：把网页所有img定义成一个数组变量，再实例化一个Image对象，然后遍历前面的数组变量，把每个src逐个附值给Image对象src，再逐个通过onload事件判断图片是否加载完成。 扩展：ready是指DOM结构加载完成后执行，不包括网页上的图片等媒体元素；onload则是DOM结构和页面资源（图片、视频、flash等）全部加载完成后执行。所以判断图片是否加载完成要用onload事件。（注意：jquery对象以及使用querySelectorAll、getElementsByTagName、getElementsByClassNam...

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获取浏览器窗口相关的高度的属性也有多个，如height、avaiHeight、outerHeight、innerHeight、clientHeight、offsetHeight。 下面这张图可以直观地理解各个属性： 属性介绍 电脑屏幕高度 Window Screen对象包含有关用户屏幕的信息。 screen.height：屏幕分辨率的高 screen.avai...

方法一 array.indexOf()方法可以返回数组中某个指定的元素位置，该方法会从头到尾地检索数组，检测是否含有对应的元素，如果检索到，则返回元素第一次出现的位置，如果没有检索到，则返回-1。 示例： var _str = 'two'; var _arr = ['one', 'two', 'three', 'five']; if(_arr.indexOf(_str) > '-1'){ alert('数组中存在该值'); } //_arr.indexOf(_str) 返回结果是1 方法二 array.include...

与 requestAnimationFrame() 方法一样，javascript window对象的 cancelAnimationFrame() 方法同样不支持IE9及其它低版本浏览器，毕竟 cancelAnimationFrame() 方法就是用来取消 requestAnimationFrame() 动画帧的。因此兼容IE9及其它低版本浏览器的方法也差不多。 代码如下： window.cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame || w...

目前使用canvas画布绘制椭圆形的方法有 ellipse()、 scale()、贝塞尔曲线以及 lineTo()，其中比较推荐 ellipse()，但是该方法尚未纳入标准，IE全系列浏览器都不支持，其它浏览器目前比较好。 如果想兼容IE浏览器，可以考虑使用 lineTo() 方法，但是如果要绘制的椭圆像素较大，会存在很大的效率问题，甚至浏览器崩溃，但是小又少的椭圆影响不大。 HTML代码 <canvas id="canvas"> 浏览器不支持Canvas </canvas> javascript代码 ...

javascript Web API接口navigator.language（只读属性）可以返回一个表示用户偏好语言的字符串，通常指浏览器UI的语言（即在浏览器设置中选择的语言），换个思路，使用navigator.language可以在一定程度上判断浏览访客来自哪个国家，至少能判断浏览器使用的是哪国语言（根据浏览器语言的选择）。 navigator.language语言列表： 来自stackoverflow（不知道是不是齐全的） ["af", "sq", "ar-SA", "ar-IQ", "ar-EG", "ar-LY", "ar-DZ", ...

jquery使用removeAttr()方法删除标签属性，原生javascript使用removeAttribute()方法删除标签属性。两个方法的名称差不多。 HTML代码： <div class="one" style="padding:50px"></div> <h2 style="padding:50px"></h2> <div id="two" style="padding:50px"></div> 分别删除上面HTML代码中的style属性。 document.getE...

$().each和$.each()是两个名称相似的jquery方法，它们的区别是前者用于处理DOM对象，后者用于处理数据对象。 方法结构 $().each $(selector).each(function(index,element){ //执行代码 }); $.each() $.each(dataArray, function(index,element){ //执行代码 }); 方法示例 使用$().each处理DOM HTML代码 <ul> <li>北京<...