菜单

简单javascript代码实现简单的天时分秒倒计时功能效果

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

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...

TrueNAS Scale系统之DIY配置NAS家用存储服务器(一):选择硬件

TrueNAS Scale系统之DIY配置NAS家用存储服务器(一):选择硬件

今年早前偶然间了解到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盘...

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", ...