
javascript
文章平均质量分 73
百里狂生
道可道,非恒道;名可名,非恒名;有名天地之始,无名万物之母。
展开
-
使用原生JS的内置函数Date制作一个基础版的万年历
设定每个月的最后一天的星期的位置并补全区域与定位每个月的第一天的星期位置并补全区域基本相同,唯一不同的地方是此处需要找到最后一天是星期几。// 2024年11月最后一天是30号是星期六,已经是最后一行的最后一格了,无需添加新的空单元格i++) {原创 2024-11-11 22:32:06 · 1313 阅读 · 0 评论 -
jquery笔记
选择器$('#div')$('.div')$('div')$("ul li:eq(1)")$('div[class=none]')$('input:checked')$('input').is(':checked')$('input:hidden')$('div:visible')//选取 属性title值不等于 test 的div元素$('div[title!=test]'...原创 2024-01-22 12:08:30 · 461 阅读 · 1 评论 -
Vue + JS + tauri 开发一个简单的PC端桌面应用程序
Tauri是一款应用构建工具包,让您能够为使用 Web 技术的所有主流桌面操作系统构建软件。tauri 框架与 electron 非常相似。原创 2024-01-15 20:55:56 · 3464 阅读 · 1 评论 -
使用jspdf插件将网页中的内容导出为高保真的pdf文件
中文乱码时因为 JsPDF 中没有中文字体可以解析html中中文内容,解决的方法也很简单,只需要下载中文字体,然后在 JsPDF 中添加字体即可,需要注意的是,下载的字体必须是.ttf后缀的。这种方式有一个问题就是中文乱码,英文内容导出不受影响,解决中文乱码的方式也很简单,下面会详细说到。如果想要修改打印出来的样式,也可以使用CSS3媒体查询的方式,对打印内容的样式进行单独处理。这种方式的一个缺陷就是图片会被压缩或放大,导致图片上的内容会失真出现模糊的现象。方法一共有两个参数。方法一共有两个参数。.....原创 2022-08-19 00:09:53 · 3622 阅读 · 0 评论 -
从零到一实现m3u8文件转成mp4文件
文章目录m3u8 文件转换为 MP4 文件1. 技术栈2. 环境要求2.1 安装 Nodejs2.2 安装 ffmpeg3. 新建一个 Node 项目3.1 初始项目3.2 编写程序逻辑3.3 启动程序3.4 完成m3u8 文件转换为 MP4 文件1. 技术栈Nodejs2. 环境要求windows10Nodejsffmpeg2.1 安装 Nodejs下载地址:nodejs下载成功后,双击node-v16.14.2-x64.msi文件进行安装,安装过程中不需要其他操作,只需依原创 2022-04-23 21:25:20 · 2448 阅读 · 0 评论 -
Echarts中自定义坐标轴指示器之时间坐标轴
Echarts中自定义坐标轴指示器之时间坐标轴示例如下:配置如下:const option = { tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985', // 自定义坐标轴指示器之时间格式 .原创 2020-05-26 07:29:49 · 2872 阅读 · 0 评论 -
JS 删除数组中某个元素的几种方式
目录第一种:删除最后一个元素pop 删除slice 删除splice 删除for 删除length 删除第二种: 删除第一个元素shift 删除slice 删除splice 删除第三种:删除数组中某个指定下标的元素splice删除for 删除第四种:删除数组中某个指定元素splice 删除filter删除forEach、m...原创 2020-04-01 17:57:45 · 280145 阅读 · 6 评论 -
常用数据类型校验和设备识别工具
目录值类型校验手机号校验密码校验中文校验邮箱校验检测设备系统检测是否是手机设备检测 ios检测 android检测 Mac系统检测 Windows 系统检测 Safari 浏览器检测 flash 插件检测数据类型检测 Null检测 Undefined检测 String检测 Number检测 NaN检测 Ob...原创 2020-03-31 15:12:15 · 1638 阅读 · 0 评论 -
常见的表格数据结构
常见的表格数据结构目录常见的表格数据结构第一种表格数据结构第二种表格数据结构第三种表格数据结构第一种表格数据结构<template></template>// javascriptexport default { name: 'app', data () { return { data: [ ...原创 2019-12-02 22:14:59 · 2545 阅读 · 1 评论 -
前端JS实现图片质量压缩
前端JS实现图片质量压缩用户在选择图片文件进行上传的时候是不会考虑文件的大小的,比如场景:某用户只是想更换一下自己的用户头像,于是用自己的手机拍了一张照片,上传到应用中更换用户头像,然而现在的手机拍照功能保存的图片大多都超过3MB,而头像只是一个占用空间很小的显示区域,所以上传一个很大的图片会浪费资源和消耗不必要的性能目的:降低流量的消耗 降低http请求性能消耗 降低服...原创 2019-09-04 17:25:50 · 2334 阅读 · 0 评论 -
vue实现简单数字滚动特效
vue实现简单数字滚动特效今日项目中要求要做一个数字滚动的特效,增加页面的丰富度期望是一个价格数量中的每个数组都可以滚动显示的特效,如下图:下面是一个简单的例子:知识点:CSS动画<template> <div class="scroll-warpper"> <div class="scroll-item" v-for...原创 2019-08-31 14:47:13 · 3315 阅读 · 1 评论 -
滚动楼层导航定位
动态楼层导航目录动态楼层导航页面布局数据模型滚动事件监听监听窗口滚动楼层导航动态定位设置楼层导航事件驱动方法设置楼层向上滚动设置楼层向下滚动完整代码在vue中使用v-for动态渲染楼层和楼层导航,然后使用原生JavaScript实现楼层导航动态更新与楼层滚动定位1、页面初始化时定位首个楼层2、页面滚动楼层导航自动定位到相应的楼层并高亮显示3、...原创 2018-11-24 22:35:53 · 4531 阅读 · 7 评论 -
vue与vue-router搭配设置TDK
vue与vue-router搭配设置TDK参考链接:使用Vue.js和vue-router更新页面标题和元数据目录vue与vue-router搭配设置TDKTDK配置meta.js路由配置index.js设置main.js启动应用程序文档结构:|- src|-- components|--- index.vue|--- about.vue|-- ...原创 2018-11-24 15:12:33 · 1903 阅读 · 0 评论 -
关于vue中使用laydate时间插件的问题
vue中使用laydate时间插件之前在做vue项目时使用iviewUI库中的DatePicker组件,发现DatePicker使用起来比较麻烦,尤其是对时间精确度上的限制不尽人意,操作起来也比较繁琐,总之在处理一系列时间组件相互联动上存在一大堆问题,比如DatePicker时间组件时间精确到分,组件1的value等于组件2的最小值,组件2的vlaue等于组件3的最小值,。。。依次类推,如...原创 2018-10-21 15:18:28 · 10542 阅读 · 1 评论 -
node+mysql+ajax+javascript搭建一套服务接口,实现前后台数据请求
node+mysql+ajax+javascript搭建一套服务接口,实现前后台数据请求效果图如下所示:启动服务get请求查询mysql数据库express介绍Express 基于 Node.js 平台,快速、开放、极简的 web 开发框架。Web 应用Express 是一个基于 Node.js 平台的极简、灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各...原创 2018-08-26 00:36:23 · 2913 阅读 · 0 评论 -
JavaScript的FormData+Ajax实现文件上传+图片上传
JavaScript的FormData+Ajax实现文件上传+图片上传在很多网页开发中会存在文件上传,图片上传的操作,有的使用form表单默认功能提交文件,有的采用Ajax提交如果采用form表单的提交方式,恰恰又需要添加额外的参数或者需要设置特定的请求头信息,那么这种方式就显得有些单调了以下采用第二种方式:采用JavaScript+Ajax来实现文件上传如果希望在选择文件确认...原创 2018-08-29 22:33:25 · 675 阅读 · 0 评论 -
填写表单分步步骤进度条
填写表单分步步骤进度条使用原生JS实现填写表单分步步骤进度条效果图如下所示:步骤进度条<div id="step"> <div class="step-wrap"> <div class="step-bg"></div> <div class="step-pro原创 2018-08-19 17:45:49 · 7853 阅读 · 1 评论 -
自定义封装时间轴纵向滚动
自定义封装时间轴纵向滚动时间轴滚动以前没写过,今天写着玩,只实现了鼠标纵向滑动时间轴的效果,暂时没做三列联动效果效果图如下:鼠标纵向滚动时间轴具体实现的代码如下:<div id="container"> <div id="select"></div> <div class="year column"><原创 2018-08-02 23:27:30 · 1108 阅读 · 0 评论 -
原生封装自定义滚动条
原生封装自定义滚动条有时候在开发过程中,为了一些美化效果,往往需要修改浏览器上一些默认的样式或者事件,让整个页面看起来更和谐,舒畅。比如在开发过程中就遇到修改该浏览器默认滚动条的需求,当然使用CSS的伪元素也可以修改浏览器滚动条的默认样式,但是存在兼容性问题,由于各大浏览器厂商对浏览器的设计略有不同,比如说浏览器内核,再加上浏览器高低版本的兼容,所以实现出来的效果并不尽人意。下面是针对...原创 2018-08-02 08:26:03 · 820 阅读 · 0 评论