ju__ju的博客

关于html中使用wavesurfer音频文件相关

=>源码在此处ps:此富文本编辑器优点是可以直接通过js引入,便捷使用,缺点是教程太少,二次开发较为麻烦项目中导入图片时,ice编辑器默认是粘贴时图片多大,富文本内图片的显示多大,需求是添加一个自定义组件可以选中富文本内图片时可以去更改图片大小,此处参考的源码插件开发这一块,如下图根据插件开发的代码,弄好后如下图逻辑就是获取选中图片的html代码,然后通过replace转换成加上style样式代码的html,然后插到原来的位置,其实源码里面都写好了,就是找起来比较麻烦.

今天通过js引入插件时,发现一个很奇怪的bug,例如 此处.我直接通过相对路径引入相关js然后发现部署在根目录的网页可以正常显示该插件但是如果部署在非根目录就显示不出来同时会报错Uncaught SyntaxError: Unexpected token '<' 和相关js的方法defined处理后发现原因就在引入的地方,因为是相对路径引入,所以如果部署在非根目录下,那么js在根目录下就找不到.所以就会报上面的错误,处理方法为通过动态引入,然后就可以正常显示的...

Laya项目中要做一套类似表格的页面,负责收集数据,如果用laya的写法,个人感觉很麻烦,于是想采用laya中嵌套iframe的方法,然后将laya中的默认数据传到iframe中,作为默认数据填充,然后当iframe中数据更改后,点击提交按钮,再把iframe收集到的数据回传到laya,就此完成两者的通信.如上图//Laya(ts)界面部分代码init(){ //将 html文件夹和资源放到bin目录的res下,然后src引用 let iframe.src = "res/re

Laya项目中有需求,通过读取XML文件,然后转化成JSON对象存储到本地xmlToJson(xml) { // Create the return object var obj = {}; if (xml.nodeType == 1) { // element // do attributes if (xml.attributes.length > 0) { obj["@attributes"] = {};

<div class="notices"> <el-card class="notices-item" shadow="never" v-for="notice in list" :key="notice.id"> <h4 class="notice-title" v-text="notice.n...

控制台打印如下let time = +new Date() //获取当前时间戳export function getFamtterTimer(time) { //传入时间 let date = new Date(time), Y = date.getFullYear(), // 年 M = date.getMonth() + 1, //月 D = date.getDate(), //日 h = dat

___今天是8月5日,离8月25日七夕还有20天,最近项目不太多,闲暇时间找了一套JQuery代码 ------- 超级好看的花瓣表白网页源码,___然后通过gitee(码云)搭建了一套个人网页,因为使用了valine公共评论平台,怕一些人发布不良言论,所以项目地址还不能公开.1.这套代码效果挺不错的,缺点就是bug太多,应该是作者阉割过很多的,有一些cavans绘制的特效都阉掉了,修复起来难度比较大.就把相关js注释了.2.之前使用的评论模块应该是多说(duoshuo)第三方公开评论平台,但是这个.

点击此链接—>查看项目展示步骤一:点击此链接–>参考了这位博主通过github搭建个人主页的步骤,非常详细搭建完成后的项目结构,如上图所示步骤二:1.打开编辑器(此处拿vscode举例),2.ctrl+~,打开控制台,输入指令git clone https://github.com/xxxx(上图箭头所示,你自己的项目路径)3.此处提供2个网站,方便我们找到适合自己的源码https://github.com/ http://www.jq22.com/4.如果是jque

我使用的编辑器是vscode,不知道做了什么操作,不管哪个项目的哪个分支都不能暂存代码,一点图上的加号,就提示这个信息,尝试了很多方法都没用,包括卸载编辑器,删除编辑器本地的所有配置信息,然后重装都无法解决,最后尝试了用git指令提交,因为我遇到的问题是不能点击图上的加号,所以,使用了git add ./这一步指令来代替图上(加号)暂存的操作,然后可以正常的上传代码了.希望对兄弟萌有帮助....

显示效果如上图所示,点击开始测试后,会默认测30次连接当前网址,然后根据状态给出时延和丢包结果(平均速度,最大速度,最小速度也可以得出),<template> <div class="speed-test"> <el-dialog title="测试网络环境" :visible.sync="speedOpen" width="30%" :close-o...

项目中需求:后台上传一些doc或者pdf等文件,需要前端实现这些文件的在线预览.思路:接口会返回一个路径,结合<embed/>标签,实现文件的在线预览其中type是指定类型,src绑定的是我通过文件UID过去文件详情时,拿到的文件路径,filterUrl是项目中main.js中设置的过滤器,根据自己需要设置,各个项目均不同使用效果如上,需要自己调整embed...

在开发后台管理项目中,经常会通过软件自动生成接口,比如(add,updata,remove等),然而,有的页面需要同时引用两个不同的add接口.又不方便单独改这个方法的名称,下面是处理办法...

参考了博客https://blog.youkuaiyun.com/chern1992/article/details/102857119let arr = [ { name: '实验文档？', children: [ { name: '全景', children: null }, { name: '视频', children:...

首先这个是承接上个博客中创建的china.json,并在main.js的注册一下.initCityDataPic () { let obj = dark this.$echarts.registerTheme('dark', obj) //上面的两段是我自己设置的暗色系主题，不需要可以注释掉 let...

项目中需要使用类似的地图,需要引入地图或者地区的JSON数据,因此查阅多番文档后总结出一套方法,确保可用.1.点击DATAV.GeoAtolas.点击此处直接复制或者复制链接打开后复制,然后百度搜索JSON,打开第一个链接在线JSON格式化校验然后复制校验后的内容,创建china.json文件,将内容粘贴进去下面是在vue中使用echarts引入中国地图的方法.在main.js中...

UI给的设计图,要求黑色背景的table和矩形进度条,首先考虑的是切换elementUI的主题,但是这个一切换就是全局切换,而需求是只有一个页面需要用到这种黑色主题,所以采用最粗暴的方法,直接修改elementUI中table组件和progress组件的样式<style lang="less"> //table样式 .el-table th.is-leaf, ....

项目需要接入这样的图1.引入echarts等,就不用多说了.2.copy代码3.我们会发现浏览器报错,⑴第一种错误[Vue warn]: Error in nextTick: "TypeError: api.coord is not a function"在echarts中搜索api,然后打印,找到这个coord方法然后在项目代码中打印这个api然后看接着找问题,看配置代码...

项目中遇到这种需求,有两种解决方法,一.在echarts的配置手册中搜graphic属性,并配置,可以在圈内显示固定的文字graphic: [ { //环形图中间添加文字 type: 'text', //通过不同top值可以设置上下显示 left: 'center', top...

<div class="hot-top"> <p> <el-date-picker v-model="dataValue" :type="type" :picker-options="pickerOptions" :value-format="type==='year'?'yyyy':type==='month'?'yyyy...

项目需求:使这两个按键可以上下拖动,而且这两个按钮还有点击事件<span class="action-btn" ref="showDoc" :class="showDoc ? 'hide': 'show'" @click="handShowDoc" @mousedown="mouseDownHandDoc($event)" @mouseup="mouseUpHandDoc($event)...

项目中后端传过来的值是以秒为单位,但是渲染是需要将格式转为1.超过一天则以天时分秒显示,不超过一天则以时分秒显示2.超过一小时则以时分秒显示,不超过一天则以分秒显示3.超过一分钟则以分秒显示,不超过一天则以秒显示于是做了以下处理一.定义一个getDuration()方法methods: { getDuration(second) { var duration var ...

// var rotate = document.querySelector('#rotate') //此方法是找到动画属性名 function findKeyframesRule(animName) { var rule; var ss = document.styleSheets; for (var i = 0; i < ss...

首先,watch监听的是data中的属性,并不能直接监听window,如图先定义data中一个screenwidth属性,然后这个时候我们可以用watch监听到screenWidth,但是当改变窗口大小时,并不会打印改变之后的值,即只监听了一次,不能持续监听,于是在mounted中调用window.onresize方法,然后就可以持续监听了...

项目中有需求,需要在table+分页的情况下做一个倒序排列的table表格弹窗,但是这个分页是每点击一次拿5条数据,如果做倒序只能做这5条数据的倒序.不符合需求,问了一下同事之后发现有一个字段"sidx"可以控制排序,以id为例子,sidx: 'id desc’表示逆向排序sidx: ‘id asc’ 为默认,表示正向排序通过查elementUI组件的列表属性及方法可以得到sort...

手贱,升级了node.js到12.x版本,结果项目跑起来就报一大片错,网上一搜node历史版本,结果不会安装,心拔凉拔凉的,后来用nvm解决了node版本控制工具,并且在此立下flag,以后再手贱就把手给剁了.1、NVM下载直接进入安装包下载地址：https://github.com/coreybutler/nvm-windows/releases，选择nvm-setup.zip，下载后直接安...

项目有个地方需要在form中使用select下拉选择框,选择的时候同时传两个数据,例如我选择软件名称,需要我同时传form.softId和form.softName.这两个select的数据都是动态获取的.解决方法是给这两个select框添加change事件,当下拉选项改变时,使用filter()方法返回包含这个值的对象,然后再给form赋值,如:...

在该项目中websocket 就是一个接口,通过字符串的拼接拼一些参数let url = `${wsUrl}/api/io/lineup/${id}/${uid}?TENANT_CODE=${tenantCode}&USERNAME=${username}&LAB_LESSION_UID=${labLessionUid}&LAB_LESSION_NAME=${labLes...

项目中需要加一个预约功能,需要周一至周日期间,在老师指定的固定时间内学生才可以预约,但是不需要指定日期.首先需要下载Fullcalendar以及相关配置npm install @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/moment @fullcalendar/interactio...

项目中经常有遇到级联选择的问题,于是总结一下使用方法这边可以看到当选择完之后会以一个数组的形式保存在form中,但是,其实我们只需要数组的最后一位.发现可以正常显示,注意此处classifyId的取值一定要为字符串,如果为数字,则不显示当我们提交表单时,需要处理一下将classify这个数组转为字符串(取数组的最后一位),不然编辑时可能有问题submit () { ...

let arr = [ //创建一个数组对象 { name: '张三', age: 66 }, { name: '李四', age: 88 }, { name: '王五', ...

项目中做了一个排行榜但是需要分页的功能,因为是分页所以点击分页时都是重新发送请求,index就不会累加,而是每次都重新计算,于是做了以下处理![在0)主要用到了一个公式,(当前的页码数-1)x当前的每一页中的总条数+1(因为index从0开始计算)做好处理后即便翻页index也是不会重新开始计算...

使发送表单之前即做一次验证,是否为原密码一样.以及确认新密码是否错误.<template> <el-form class="user-account-key" ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item label="原密码" prop...

需要实现的效果是图标为svg,可以根据选中状态变色.首先我们需要下包npm install vue2-svg-icon --save-dev//下包操作然后你的package.json里面就会出现这个配置.然后main.js里面注册一下import Icon from 'vue2-svg-icon/Icon'Vue.component('icon',Icon);然后在sr...

后台传过来的数据需要用到v-html解析,但是使用了过滤器后发现报错,原来v-html不能使用过滤器,我们可以写一个过滤器函数,把要v-html解析的数据当作参数放到函数中进行操作,代码如下methods: { // 过滤器函数 ellipsis(value) { if (!value) return ""; ...

当选择题库时,获取到章和节的列表,章节才能够被选择现在要实现的效果是当题库发生改变时,章节列表也发生改变,需要清空当前选择项如图,题库改变了,章节列表的数据也发生改变了<el-form ref="form" :model="form" label-width="50px" :rules="rules"> <el-form-item label="章节:"> ...

朋友写的代码,觉得很好分享一下点昵称搜索昵称,点队伍名称搜索队伍名称<div class="participant-header"> <span>精确查找</span> <ul> <li v-for="(value, key) in screen" :key="key" :class="{ 'activeClass' : ...

computed: { searchData: function() { var search = this.search; //此处的etquestions均为data, 这个etquestions.content.title是根据自己的需要写,一般写data if (search) { return this.etquestions...

这是之前写的代码当翻到第二页时,序列号又从1开始于是使用了这样的代码打印了一下item后发现新增了一个index字段然后直接使用index字段做序号就行了...

原理 setInterval定时器+substring()方法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0...