JavaScript获取指定url的有效视频时长
对于网页上的<video></video>视频，可以通过通过监听对象的预加载元数据（loadedmetadata），然后获取视频对象的时长属性object.duration得到视频时长。如果只有一个视频url，也可以通过创建video元素，然后再监听预加载元数据。获取视频时长函数：async function getVideoDuration(url) {
...
通过execCommand命令实现一键复制文本的javascript代码
网页上实现一键复制的功能可以使用clipboardjs插件，也可以使用execCommand命令，但兼容性没有前者好。实现思路是创建一个表单文本输入框元素如input、textarea，然后使用select()方法选择文本，再使用execCommand命令复制文本到剪切板。
为了便于重复调用，写成一个函数
function tddx_copyText(ctext) {
var copyText = do...
javascript数组转换成字符串的代码方法join()
Javascript join()方法用于把一个数组中的所有元素通过指定的分隔符进行分隔转换为一个字符串。join()方法为JavaScript版本增加，所有主要浏览器都支持。
语法：
array.join(separator);
参数
separator：可选，指定要使用的分隔符（如,-|等），留空则自由使用逗号作为分隔符。
返回值
String：返回一个字符串，该字...
jquery左右拖拽对比前后效果图片的代码
新旧两张图片效果的不同对比，实现效果通过拖拽按钮对比相同位置的差异。
HTML代码：
<div class="compare">
<div class="pic before" style="background-image:url(before.jpg);"></div>
<div class="pic after" style="backgro...
TweenMax实现网页元素无缝循环跑马灯效果代码记录
炮马灯效果通过基础的js代码或HTML的marquee标签都能实现，如果想学习TweenMax插件不妨通过其跑马灯效果代码入手会比较容易理解。
1、下载插件：http://www.tweenmax.com.cn/source/
把压缩后文件夹里的src/minified/TweenMax.min.js和src/minified/plugins/ModifiersPlugin.min.js文件...
带完整省市json数据的jquery省市二级联动代码
做表单涉及到地址地区时，经常需要做地区联动，比如省市二级联动、省市县三级联动以及更深层次的省市县镇街道联运等，下面的代码是最常用到的省市二级联动，附带了完整的json数据，其实做地区联动不难，麻烦的是弄对应的地区数据。
引入省市数据文件
把json数据保存为area.js文件后，引入文件（json数据太长，放在文章末尾了，请在文章末复制）
<script src="area.js">&l...
支持IE/Chrome/Firefox浏览器的网页打印javascript代码
点击网页某个元素，调用window.print()方法，打印功能，打印指定元素内的内容，经测试支持Firefox、Chrome、IE9+浏览器。
提醒：IE需要在Internet选项的安全设置中【自定义级别】的“对标记为可安全执行脚本的 ActiveX 控制执行脚本*”设置为启用。
html代码
<div id="entry">
此处是要被打印的内容！
</di...
原生javascript获取指定对象所有子孙元素集合的代码
不限制层级、不区分标签名、不区分样式名，通过原生javascript代码获取所有子元素，包括子元素的子元素（孙元素）的集合，可以通过定义一个数组，然后多次嵌套使用javascript的children属性获取子元素存储到数组来实现，代码很简单，效率不详！
代码示例
HTML代码
<div id="tddx-entry">
<p>
<span></sp...
支持移动端图片放大缩小旋转的图片预览js插件viewer.js
淘宝网宝贝详情里的图片，点击后可以弹窗预览，且支持触摸放大缩小，体验非常好，viewer.js插件就是款可以实现类似效果、功能完善的图片预览js插件，有纯js版本和jQuery版本。
viewer.js插件可以实现点击图片弹窗显示，PC端支持鼠标键盘移动、放大缩小，移动端支持触摸移动缩放等，还支持旋转（类似微博图片的旋转）、水平/垂直翻转、全屏幻灯片、缩略图、标题以及多种自定义事件等，另外还提供了多种回调函数。...
vue 绑定style显示背景图片background-image的方法代码
HTML标签使用style background-image属性添加背景图片，需要和vue双向绑定。
HTML代码
<div id="app">
<div class="pic" v-bind:style="{backgroundImage:'url('+ bg + ')'}"></div>
</div>
这里需要注意的是：
在vu...
javascript获取对象数组中指定对象属性的对象下标的方法findIndex()
一个对象数组，已知其中一个对象属性的某个属性值，然后通过该属性值获取其所属对象的对象下标。
简单地说就是通过指定对象属性值获取对象的下标，可以通过 javascript 的 findIndex() 方法实现。
findIndex() 方法的作用是传入一个函数条件，然后返回符合条件的数组的第一个元素的位置（下标）。
示例代码：
var _name = 'tddx'; //已知属性值
var...
javascript实现点击递增递减改变字体字号大小的代码
网页中常见的效果，点击按钮改变内容的字体显示大小，方便眼睛视力不同的人阅读，提高网页的用户体验。
实现方法也比较简单，通过js修改元素css的font-size属性。
实现代码
HTML代码：
<a id="cut" href="javascript:void(0);">A-</a>
<a id="add" href="javascript:void(0);...
