简单javascript代码实现简单的天时分秒倒计时功能效果 常见的活动倒计时效果js代码,实现原理很简单,通过计算结束时间与当前的时间差实现倒计时,然后可以使用setInterval方法实现每隔1000毫秒(即1秒)变动一次剩余时间的动态倒计时效果。 HTML代码: <div class="countTime"> <span id="day"></span> <span>天</span> <sp... Web前端开发 / 2024-04-18 / 1363次阅读
javascript数组转换成字符串的代码方法join() Javascript join()方法用于把一个数组中的所有元素通过指定的分隔符进行分隔转换为一个字符串。join()方法为JavaScript版本增加,所有主要浏览器都支持。 语法: array.join(separator); 参数 separator:可选,指定要使用的分隔符(如,-|等),留空则自由使用逗号作为分隔符。 返回值 String:返回一个字符串,该字... Web前端开发 / 2024-01-09 / 1901次阅读
jquery实现tab切换内容为几个不同swiper.js轮播插件模块的代码 做一个点击指定元素切换指定内容的页面模块(TAB切换),要切换的内容是独立的swiper.js轮播插件模块,如果先swiper初始化轮播内容,然后实现tab切换就会出现各轮播模块冲突,比如前进后退按钮异常、分页器异常、切换时内容加载异常等。可以避免各轮播模块冲突的方法是点击切换时再初始化当前的swiper轮播,其它的swiper轮播则注销掉。 HTML代码: <script src="js/swiper-b... Web前端开发 / 2023-12-27 / 1355次阅读
Javascript监控页面指定DOM所有图片是否加载完成的代码 实现监控检测网页所有图片是否加载完成的思路:把网页所有img定义成一个数组变量,再实例化一个Image对象,然后遍历前面的数组变量,把每个src逐个附值给Image对象src,再逐个通过onload事件判断图片是否加载完成。 扩展:ready是指DOM结构加载完成后执行,不包括网页上的图片等媒体元素;onload则是DOM结构和页面资源(图片、视频、flash等)全部加载完成后执行。所以判断图片是否加载完成要用onlo... Web前端开发 / 2023-06-09 / 1549次阅读
通俗易懂的javascript动态创建svg的函数代码 js动态创建svg在制作网页时是经常使用到的,最简单最容易理解的用处就是如果需要多个相同的svg,如果一个一个地写<svg></svg>,即不好看,也多余,而动态创建,只需要创建一个,然后循环出来就可以了。 常规的动态创建svg var svgNS = 'http://www.w3.org/2000/svg'; //必须需要,否则可能会导致svg不显示 var svg = documen... Web前端开发 / 2022-04-16 / 3140次阅读
原生javascript获取屏幕、浏览器窗口、网页的各种不同高度代码 因为浏览器窗口包含的元素比较多(如工具栏、任务栏、滚动条等),所以浏览器窗口的高度会因为元素的不同而不同,因此javascript获取浏览器窗口相关的高度的属性也有多个,如height、avaiHeight、outerHeight、innerHeight、clientHeight、offsetHeight。 下面这张图可以直观地理解各个属性: 属性介绍 电脑屏幕高度... Web前端开发 / 2021-10-26 / 3744次阅读
原生javascript判断数组是否包含一个指定的值 方法一 array.indexOf()方法可以返回数组中某个指定的元素位置,该方法会从头到尾地检索数组,检测是否含有对应的元素,如果检索到,则返回元素第一次出现的位置,如果没有检索到,则返回-1。 示例: var _str = 'two'; var _arr = ['one', 'two', 'three', 'five']; if(_arr.indexOf(_str) > '-1'){... Web前端开发 / 2021-02-19 / 2224次阅读
js cancelAnimationFrame兼容低版本浏览器(支持IE9) 与 requestAnimationFrame() 方法一样,javascript window对象的 cancelAnimationFrame() 方法同样不支持IE9及其它低版本浏览器,毕竟 cancelAnimationFrame() 方法就是用来取消 requestAnimationFrame() 动画帧的。因此兼容IE9及其它低版本浏览器的方法也差不多。 代码如下: window.cancelAni... Web前端开发 / 2021-01-09 / 2909次阅读
javascript navigator.language所有语言的列表 javascript Web API接口navigator.language(只读属性)可以返回一个表示用户偏好语言的字符串,通常指浏览器UI的语言(即在浏览器设置中选择的语言),换个思路,使用navigator.language可以在一定程度上判断浏览访客来自哪个国家,至少能判断浏览器使用的是哪国语言(根据浏览器语言的选择)。 navigator.language语言列表: 来自stackoverflow... Web前端开发 / 2020-12-19 / 8945次阅读
原生javascript删除html标签属性的方法removeAttribute() jquery使用removeAttr()方法删除标签属性,原生javascript使用removeAttribute()方法删除标签属性。两个方法的名称差不多。 HTML代码: <div class="one" style="padding:50px"></div> <h2 style="padding:50px"></h2> <div id="two"... Web前端开发 / 2020-10-23 / 5316次阅读
jQuery的$().each方法和$.each()方法的区别 $().each和$.each()是两个名称相似的jquery方法,它们的区别是前者用于处理DOM对象,后者用于处理数据对象。 方法结构 $().each $(selector).each(function(index,element){ //执行代码 }); $.each() $.each(dataArray, function(index,element){ //执行代码... Web前端开发 / 2020-09-24 / 2963次阅读
最直观的理解javascript构造函数和普通函数的区别 区分javascript函数是构造函数还是普通函数的方法是看它们使用了哪种调用方式,无论是javascript构造函数还是javascript普通函数,它们总归是函数,它们的调用方式决定了它们是构造函数还是普通函数。 下面是一个函数的声明,它就是一个函数,但它后面的使用方式决定了它是构造函数还是普通函数: function website(name,url){ this.webName = name;... Web前端开发 / 2020-09-05 / 2551次阅读