菜单

jquery实现粘贴16位序列号自动分割填入input的代码

jquery实现粘贴16位序列号自动分割填入input的代码

常见的功能,复制验证序列号粘贴自动分割填入当前focus的input及后面input,每个框4个字符。同时实现当复制的内容自由分割后,某个input不足4个字符时,focus在那个input,超过4个字符则focus进入下一个input。 实现代码 HTML代码 <div class="serial"> <input type="text" class="text" id="input1" value="" maxlength="4" tabindex="1"> <input type="text" cl...

javascript数组转换成字符串的代码方法join()

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

解决HTML5 video不支持播放m3u8格式视频的方法

m3u8是一种基于HLS(HTTP Live Streaming)文件视频格式,HLS由苹果公司提出,使用<video></video>标签可以在Safari浏览器直接播放,但其它浏览器要借助hls.js或基于hls.js开发的html5播放器插件才能兼容播放m3u8格式视频,否则会提示不支持视频格式。 基础代码 HTML代码: <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script> <video id="video1" co...

jquery实现tab切换内容为几个不同swiper.js轮播插件模块的代码

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

支持跟随鼠标方向的Canvas 3D粒子波浪动画效果代码

支持跟随鼠标方向的Canvas 3D粒子波浪动画效果代码

偶尔会用到的3D效果,由粒子构成的波浪形状,并以波浪形态运动的3D动画效果,支持鼠标摆动方向。 该效果基于JavaScript 3D库three.js,一个易于使用、轻量级、跨浏览器、通用的3D库。three.js库地址:https://github.com/mrdoob/three.js HTML代码: <div id="particle"></div> 引入three.js: <script src="js/three.min.js"></script> Javascript代...

jquery鼠标悬浮元素时图片向上滚动的代码

图片高度超过DOM元素节点高度,且父元素添加了overflow:hidden;图片超过高度的部分不会显示,通过鼠标悬浮图片,图片向上滚动的方式显示被截取的部分。 HTML代码: <div class="scroll"> <img src="图片URL地址" alt="长图片"/> </div> CSS代码: .scroll {padding-bottom:50%; overflow:hidden;} .scroll img {display: block; position: absolute; left:0; ...

简易HTML5 video点击元素弹框播放视频的jQuery代码

很简单的点击指定元素弹出层播放video视频的代码,如果不喜欢很炫酷的弹框视频效果可以一用。 CSS代码: .popup{position:fixed;left:0;top:0;width:100%;height:100%;overflow-y:auto;background-color:rgba(0,0,0,0.75);z-index:10;-webkit-overflow-scrolling:touch;display:none;} .popup .video{width:100%;min-height:100%;justify-content:center;al...

jQuery/Zepto 3D透视圆形/椭圆形旋转木马轮播插件cloud9carousel

jQuery/Zepto 3D透视圆形/椭圆形旋转木马轮播插件cloud9carousel

cloud9carousel是一款与jQuery和Zepto配合使用、支持多个轮播实例、支持任何HTML元素、速度流畅、专注于性能的3D透视旋转木马插件,使用requestAnimationFrame方法固定FPS来实现平滑过渡动画、自动开启GPU来支持CSS 转换动画(自动判断是否支持),有onLoaded、onRendered、onAnimationFinished三个回调函数,支持元素倒影(需要reflection.js插件)、自动轮播、鼠标滚轮切换、点击切换。 演示:http://specious.git...

ECharts柱状图barGap、barCategoryGap、barWidth属性同时设置不生效的原因

barGap用于设置不同系列的柱间距离,barCategoryGap用于设置同一系列的柱间距离,barWidth属性用于设置柱条的宽度,但把几个属性设置之后(如下代码设置),发现设置的值并没有生效。 series: [ { name: "类型", type: "bar", barGap: "30%", barCategoryGap:'54%', barWidth: "28", }, ] 原因:ECharts会根据barGap、barCategoryGap、barWidth三个属性其中的一个属性的值结合图表的高度进行平均分配,也就是说这...

通过axisLabel属性设置Echarts横纵坐标轴核度名称的文字样式

通过axisLabel属性设置Echarts横纵坐标轴核度名称的文字样式

Echarts官方文档给出的设置坐标轴名称文字样式的属性是nameTextStyle,但在yAxis标签中配置后并不生效,这是因为把坐标轴的name标签和axisLabel标签混淆了,nameTextStyle属性设置的是坐标轴的名称标签name,而要修改坐标轴核度data[]的文字样式,要使用的是坐标轴刻度标签axisLabel,两者虽然标签有不少相同的属性,但实际设置的东西是不一样的。 坐标轴名称 实现代码: yAxis: { type: "category", axisLabel: { color: "#333", ...

Echarts柱状图barGap参数设置柱间距离不生效的问题

series-bar.barGap是series标签的一个参数,用于配置不同系列的柱与柱之间的柱间距离(数值为柱子宽度的百分比)。配置起来很简单的一个参数,但是会发现直接添加到series标签后不生效,原因是没有把grid标签的top、left、bottom、right四个参数设置完,缺少一个都会导致barGap的配置不生效。 不生效的代码: var option = { grid: { left: "2%", right: 0, top: 0, containLabel: true, }, series: [ { ...

Echarts给图形上的label标签数值添加单位或其它文本内容

Echarts给图形上的label标签数值添加单位或其它文本内容

Echarts图形上的文本标签label标签默认只显示数值,如果想显示更多的文本或者调整样式,可以通过配置label标签参数实现。如给图形的数值增加一个单位字符串。 给数值增加其它文本内容要用到的label标签参数是formatter(标签内容格式器),示例如下: 原代码: series: [ { name: 'Direct', type: 'bar', stack: 'total', label: { show: true, position: 'outside', }, dat...