常见的功能，复制验证序列号粘贴自动分割填入当前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()方法用于把一个数组中的所有元素通过指定的分隔符进行分隔转换为一个字符串。join()方法为JavaScript版本增加，所有主要浏览器都支持。 语法： array.join(separator); 参数 separator：可选，指定要使用的分隔符（如,-|等），留空则自由使用逗号作为分隔符。 返回值 String：返回一个字符串，该字符串是通过把数组中的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入分隔符separator而生成的字符串。 示例： var...
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...
做一个点击指定元素切换指定内容的页面模块（TAB切换），要切换的内容是独立的swiper.js轮播插件模块，如果先swiper初始化轮播内容，然后实现tab切换就会出现各轮播模块冲突，比如前进后退按钮异常、分页器异常、切换时内容加载异常等。可以避免各轮播模块冲突的方法是点击切换时再初始化当前的swiper轮播，其它的swiper轮播则注销掉。 HTML代码： <script src="js/swiper-bundle.min.js"></script> <div class="videos"> <div class="ta...
偶尔会用到的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代...
图片高度超过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; ...
很简单的点击指定元素弹出层播放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...
今年早前偶然间了解到NAS存储，就诞生了组装台NAS家用存储服务器的想法，当然也有想过直接购买品牌厂家的成品NAS，了解过群晖nas等其它的品牌，也浏览了不少DIY NAS的文章，最后经过综合考虑，还是决定自己动手DIY NAS。阅读过一些DIY NAS的教程文章后，决定使用开源NAS系统TrueNAS Scale，然后便开始选择硬件。 TrueNAS Scale官方提供的硬件最低要求：双核64位CPU、8GB RAM（建议16GB）、16GB SSD系统、2个相同大小的硬盘。 NAS机箱 个人以小巧好看、品质做工较优为主，选择之初考虑的是2盘位或4盘...
cloud9carousel是一款与jQuery和Zepto配合使用、支持多个轮播实例、支持任何HTML元素、速度流畅、专注于性能的3D透视旋转木马插件，使用requestAnimationFrame方法固定FPS来实现平滑过渡动画、自动开启GPU来支持CSS 转换动画（自动判断是否支持），有onLoaded、onRendered、onAnimationFinished三个回调函数，支持元素倒影（需要reflection.js插件）、自动轮播、鼠标滚轮切换、点击切换。 演示：http://specious.git...
barGap用于设置不同系列的柱间距离，barCategoryGap用于设置同一系列的柱间距离，barWidth属性用于设置柱条的宽度，但把几个属性设置之后（如下代码设置），发现设置的值并没有生效。 series: [ { name: "类型", type: "bar", barGap: "30%", barCategoryGap:'54%', barWidth: "28", }, ] 原因：ECharts会根据barGap、barCategoryGap、barWidth三个属性其中的一个属性的值结合图表的高度进行平均分配，也就是说这...
Echarts官方文档给出的设置坐标轴名称文字样式的属性是nameTextStyle，但在yAxis标签中配置后并不生效，这是因为把坐标轴的name标签和axisLabel标签混淆了，nameTextStyle属性设置的是坐标轴的名称标签name，而要修改坐标轴核度data[]的文字样式，要使用的是坐标轴刻度标签axisLabel，两者虽然标签有不少相同的属性，但实际设置的东西是不一样的。 坐标轴名称 实现代码： yAxis: { type: "category", axisLabel: { color: "#333", ...
series-bar.barGap是series标签的一个参数，用于配置不同系列的柱与柱之间的柱间距离（数值为柱子宽度的百分比）。配置起来很简单的一个参数，但是会发现直接添加到series标签后不生效，原因是没有把grid标签的top、left、bottom、right四个参数设置完，缺少一个都会导致barGap的配置不生效。 不生效的代码： var option = { grid: { left: "2%", right: 0, top: 0, containLabel: true, }, series: [ { ...