- 博客(23)
- 资源 (1)
- 收藏
- 关注
RSS订阅
原创 js+canvas+html实现抖音同款樱花特效
效果传送门最开始这个效果我是在steam的一款壁纸软件wallpaper engine上看到的，我是18年就看到了，溯源的话可能还得往前。有一部分动态墙纸是js+css+html实现的，其中便有樱花飘落的。拉下资源后整理js,css出来合并到一起的源码如下,直接复制粘贴到新建的HTML文件便可使用了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/x
2021-03-31 14:45:43
2415
原创 搜索关键词标红组件
今年做的一个需求，先看效果图。先讲一下实现方式，前端输入关键词查询，后端返回html模板，前端通过v-html渲染查到的数据是分页式，v-html的样式需要使用/deep/声明下面是组件代码
2023-09-18 15:06:48
672
原创 随笔-console.log()输出
[[][0] + []][0][5]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][8]+[[[] == []][0] + []][0][2]+[[][[[][0] + []][0][4]+[[][0] + []][0][5]+[[][0] + []][0][1]+[[][0] + []][0][2]] + []][0][6]+[[][[[][0] + []][0][4]+[
2021-12-23 15:10:55
494
原创 前端导出Excel表格
效果图放最后1、安装两个依赖npm install -S file-saver xlsxnpm install -D script-loader2、在自己项目新建一个文件夹，放入以下两个jsblod.js /* eslint-disable *//* Blob.js* A Blob implementation.* 2014-05-27** By Eli Grey, http://eligrey.com* By Devin Samarin, https://gi
2021-10-29 14:48:41
483
原创 记录一下今年自己的前端面试
今年6月总的面试下来感觉问的比较多的是项目经历，对于技术的话基础考察不是那么多，很基础很基础的那些一般不会问了，除非是没有工作经验的小白吧。会从项目下手，问到具体用到的技术栈。1、数组、字符串相关的操作，比如两个数组去重生成一个新数组等2、css布局，flex布局，盒模型3、HTML5新增元素4、js基本类型5、vue生命周期，路由，vuex，vue-cli等6、同源策略----跨域的解决方案，为什么会出现跨域7、promise相关8、js原型原型链（一般不会很深入，了解，能讲出来不会往下问
2021-09-13 18:01:03
114
原创 几个好看的echarts表格效果
option代码 init3() { let myChart = this.$echarts.init(document.getElementById("main3")); let option = { backgroundColor: "rgba(0,0,0,0)", title: { text: "单位/kg", textStyle: { color: "#a8aab0....
2021-09-10 17:55:30
4664
15
原创 收入支出正负柱状图
最近大屏项目用了echarts，先贴一个比较好的网站，有很多素材模板可选https://www.makeapie.com/explore.html来看一下实现后的效果图正负值的话数值正负就行了，关键是设置stack属性–柱状堆叠图具体代码 init3() { let myChart = this.$echarts.init(document.getElementById("main7")); // Generate data let category =
2021-09-07 09:40:44
457
2
原创 大屏数据展示组件库dataV
最近有做大屏数据的需求，先自己试试这个组件库的效果了，如图。文档链接在此 dataV简单试了一下效果，可以搭配echart一起使用效果更佳。注意一下index页面的布局就行，没太多难度。
2021-08-19 09:34:04
1256
原创 超详细的vue+element后台项目搭建教程，你要悄悄学习，然后秃头，震惊所有人
xxx管理后台；本模板适用于大部分中小型后台1、项目框架选择准备工作2、 使用脚手架构建项目本次项目基于vue.js，后续补上react.js。1、项目框架选择前端框架：vue.js，element-ui/iview，脚手架工具vue-cli3.0+准备工作1.官网下载安装node.js，一路回车默认安装就好。附链接：node.js官网安装完成后打开cmd/powershell查看2.安装脚手架工具vue-cli，现在的话使用3.0以上版本的偏多。vue3.0以上有vite支持，有兴趣的可.
2021-08-10 17:14:53
795
3
原创 vue移动端项目使用rem记载
项目结构如图在App.vue文件配置<template> <div id="app"> <transition name="fade" mode="out-in"> <router-view /> </transition> </div></template><script>export default { name: 'App', components:
2021-07-30 14:45:02
158
2
原创 Vue+vant仿抖音滑动浏览视频
浏览器视频不支持自动播放，所以第一个视频需要手动触发播放，仅供参考<style lang="less" scoped>.main { width: 100%; height: 100%; background: #fff; .my-swipe .van-swipe-item { color: #fff; font-size: 0.2rem; text-align: center; background-color: #39a9ed;
2021-04-29 15:58:52
1549
2
原创 js页面滚动到指定div
记录一下<div class="main"> <div id="box1">内容1</div> <div id="box2">内容2</div> <div id="box3">内容3</div> <div id="box4">内容4</div> <div id="box5">内容5</div> <div id="box6"
2021-04-27 16:51:45
1483
2
原创 css字体描边技巧
要实现一个比较粗的字体描边用到的css属性-webkit-text-stroke: 0.22rem #BF6C2F;直接使用没有达到理想的效果，采用两层div，给其中一层添加描边样式并加粗；用absolute布局覆盖描边层<div class="my-score-1"> {{myScore}}<span>分</span></div><div class="my-score-2"> {{myScore}}<span&
2021-04-23 18:22:20
494
原创 css实现switch开关
.main-page { width: 100%; height: 100%; background: #fff; .box-container { width: 74px; height: 38px; background: #333; border-radius: 18px; padding: 1px; box-sizing: border-box; transition: all 0.7s ease; -webkit-..
2021-03-18 15:06:17
154
原创 js实现视频定点时间段截屏
前段时间做的一个需求，根据字幕文件提供的每一句字幕开始时间对该时间的视频画面截屏，记录一下实现。不过感觉还是交给后端做比较好，<template> <div class="home-page"> <div class="upload"> <Upload multiple type="drag" style="width:200px" :before-upload="Upload
2020-09-27 10:15:43
1134
原创 vue仿移动端音乐播放器
工作之余查了很多资料一步步摸索出来的，先感谢各位大佬。仿QQ音乐做的，不是100%还原，不过基本原理都在这了，结合之前的歌词滚动组件一起使用页面布局拆分总体分为1顶部歌名+歌手的top-bar模块+模糊背景2专辑+歌词滚动模块3进度条+时间模块4播放控件模块，播放，暂停，上一曲，下一曲。第一部分需要定一个固定在页面的div做模糊背景，然后平铺一个APP-bar<template> <div class="main-page" ref="MainRef">
2020-09-17 14:45:20
1123
原创 移动端歌词滚动组件封装
页面引用import LScroll from "../../../components/lyricScroll/scroll.vue"; components: { LScroll, }, <div class="lyric-container"> <l-scroll ref="lyric" :color="color" .
2020-09-09 11:50:21
321
原创 登录按钮的禁用和可用
效果图如下这里只讲登录按钮的问题。HTML部分如下：<button :class="{enter:username.length == 0 || password.length == 0,enter2:username.length != 0 & password.length != 0}" @click="gopage"> 登录</button>u...
2019-04-09 15:15:01
600
原创 点击图片放大再点击变小（超简单）
效果图：<a v-on:click="show = !show"> <img :class="{jy:show,jy2:!show}" src="/static/bh/jy.png"></a>data里面默认show为truedata: function() { return { show: true, }; },...
2019-04-09 11:10:41
2760
原创 vue提示Module not found
我新建了一个项目，拷贝一个vue文件进去配置路由后有了右下角的提示，报错了，不能启动，有没有大佬知道？
2019-03-28 11:14:56
6281
原创 点击图片或div，图片位移一段距离，再点击回到原处
效果预览：金色按钮是目标按钮；用到的vue样式绑定和过度动画；前端代码： <a v-on:click="show = !show"> <img :class="{btn:show,btn1:!show}" src="/static/bh/btn2.png"> </a>css样式如下 .btn { ...
2019-03-25 16:58:22
684
原创 一个简易的vue留言栏制作
vue中留言栏的制作效果图如下：这块是HTML部分，样式美化就不说了，调css样式。<div class="right" v-show="show"> <textarea class="textarea" placeholder="输入留言" maxlength="500" v-model="text"> </textarea>...
2019-03-25 15:46:46
757
4
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人