2020年11月_淘淘是只狗

12月 11月 10月 09月 08月 07月 06月 05月 04月 03月 02月

原创 canvas 基本知识点详解与案例分析---你确定不来看一下？

这次我整了个静态页面，大家就直接体会体会。代码写多了。容易烦, 随手画画，解解压<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <

2020-11-29 13:51:45 360 1

原创 NodeJS 实现文字转语音

npm init -y初始化项目main.jsnpm install httpnpm install querystringvar http = require('http'); // 通过http模块访问百度的接口var querystring = require('querystring'); // 处理请求参数的querystring模块var fs = require('fs'); // fs模块，用来保存语音文件var path = require

2020-11-29 08:51:01 3306 5

原创 vue 仿照抖音视频效果（滑动切换）

看个效果图，再决定学不学================好像还凑合吧那就学起来吧~~~~~~~~~~~~~~~~~~~~~~~<template> <div class="container_box" id="video_box"> <div class="van_swipe">  <van-swipe :show-indica

2020-11-27 19:15:39 8167 6

原创感恩节如何使用 HTML + CSS 绘制火鸡（Turkey）

上效果图！！！！快点学起来！！！（代码来自 codepen，已附上链接）先来一道香喷喷的火鸡吧再看萌萌的火鸡跳舞<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi

2020-11-26 14:14:22 33453

原创 H5 移动端开发知识及解决方案

移动开发基本知识点1、基础Meta基础知识：H5页面窗口自动调整到设备宽度，并禁止用户缩放页面<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui" />// width 设置viewport宽度，为一个正整数，或字符串‘device-width’// height 设置viewport高度，一般

2020-11-24 16:18:46 1051

转载 vue 中使用wavesurfer.js绘制音频图案

实现效果如下，包含后退，播放暂停，前进，指定播放，音量，播放倍速修改等功能1、常用的方法如下：playPause() //播放时暂停，播放时暂停skip(number) //从当前位置跳数秒（使用负值向后移动）stop() //重放setVolume(newVolume) //将播放音量设置为新值[0…1]（0 =静音，1 =最大）play([start[, end]]) //从当前位置开始播放。可选start且end以秒为单位可用于设置要播放的音频范围2、使用代码如下<tem

2020-11-24 16:11:50 2146 1

原创 VS Code精选插件，让你多出时间摸鱼

1.正则利器2.高亮显示你的 TODO、FIXME，支持自定义关键字和外观，可以起到良好的提示作用。3.Vetur + Prettier + ESLint解决冲突后配合使用完美格式化代码。3.Highlight Matching Tag实时高亮匹配标签，不用在 HTML 中眼花缭乱的找标签了。4.javascript console utils快速生成 console.log() ，调试利器。5.Code Runner一键运行代码，支持很多语言。6.Comment Tr.

2020-11-23 21:46:51 301

原创温故而知新的 CSS3 新特性学习

text-shadowtext-shadow：阴影1，阴影2…text-shadow: x y z color（x: 表示 x 轴的偏移，y：表示 y轴的偏移，z：表示模糊度，color：阴影的颜色）<style> #box1 { font-size: 100px; text-align: center; margin-top: 200px; color: aliceblue; text-shadow: 4px 4p.

2020-11-23 21:37:10 201

原创页面新手引导插件 driver.js

笔者较为熟悉 vue 框架，就在这个里面为大家演示吧。（主要是我也没试过 react 行不行）先上效果图（pc端和移动端均可使用，笔者这里是为了录制 gif 图，才把页面缩小）1.安装npm install driver.js虽然插件提供链接方式引入，但一般的开发中很少使用main.jsimport Driver from 'driver.js';import 'driver.js/dist/driver.min.css';Vue.prototype.$driver = new Dri

2020-11-22 14:00:34 1511 5

原创简陋版 MVVM 原理实现

笔者也是第一次学习这个原理，听不懂的东西还挺多的，所以代码能用的就用，视频文章尾部自取。视频中所讲的代码，大致如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</

2020-11-19 21:39:10 287

原创原生 JS 实现视频弹幕功能

效果还行吧，大概就不到 150 行代码即可。快点学起来吧<!DOCTYPE html><html><head> <title>视频弹幕</title> <style> * { padding: 0; margin: 0; } /* 通过标签名称设置样式 */ body { background: rgb(245, 245, 245); .

2020-11-19 21:32:46 823

原创前端老土告白页面

为啥说老土，因为我觉得老土。作为一名 20 岁的小姑凉，感觉这页面确实老土。（虽然我写不出来，但这依然不妨碍我觉得它老土）这是我刚刚学习前端的时候收集，因为我喜欢花里胡哨的页面。今天整理文件夹的时候发现的。各位觉得有用的，就自取吧。（看看就好，千万别用。忠告哈~~~~）链接：https://pan.baidu.com/s/1pGuEbsRLq1mv0YHqLcKSIw提取码：nqrq...

2020-11-18 11:15:40 362

原创原生JS实现打砖块，贪吃蛇，弹球小游戏

来来来，先上效果图话不多说，放代码1.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge">

2020-11-18 09:32:23 440 2

原创 Vue-cli3.0 项目打包成安卓应用

1. 打包项目修改根目录下的 vue.config.js 文件（没有就新建一个），添加下面的代码，保证打包之后不会白屏module.exports = { publicPath: "./"}运行 npm run build，打包之后， dist 目录下的文件，如下所示2.使用一个神器，HbuildX，安装下载啥的，咱就不说了。新建一个 5+App 项目替换，将 dist 目录下的所有文件复制，粘贴到刚刚创建的 uniapp 项目中，全部替换。配置 manifest.json

2020-11-13 21:17:37 582

原创 11-11光棍节，用CSS如何画dog

为了狗狗不孤单，我们就画两只吧<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://s3.p..

2020-11-11 08:36:29 355

原创 Flex 实现可伸缩的图片墙

效果演示：CSS 部分CSS 在这个过程中占了重点，运用 flex 可以使各个元素按一定比例占据页面。在调试的时候，可以把边框显示出来方便查看效果。（border: 1px solid #f00;）将 .panels 设置为 display:flex设定每个子 panel 的 flex 值为 1针对每个子 panel，设为 display:flex，设置其 flex 主轴方向控制 .panle 的子元素 <p> 中的文字垂直、水平居中（单独看每个 panel，其中的文字也可以

2020-11-09 17:25:25 1000

原创产品经理：下班之前，实现一个瀑布流

这篇文章主要介绍，页面瀑布流布局的实现，主要包括瀑布流是什么瀑布流的实现原理瀑布流的使用场景瀑布流的的实现有哪些问题&如何解决1.瀑布流是什么瀑布流, 又称瀑布流式布局。是比较流行的一种网站页面布局，视觉表现为宽度相等高度不定的元素组成的参差不齐的多栏布局，随着页面向下滚动，新的元素附加到最短的一列而不断向下加载。2.瀑布流的实现原理寻找各列之中高度最小者，并将新的元素添加到该列上，然后继续寻找所有列的高度最小者，继续添加到高度最小列上，一直到所有元素均按要求排列完成为止。

2020-11-06 21:07:54 794

原创正则神器any-rule

正则神器：https://github.com/any86/any-rule火车车次/^[GCDZTSPKXLY1-9]\d{1,4}$/手机机身码(IMEI)/^\d{15,17}$/必须带端口号的网址(或ip)/^((ht|f)tps?:\/\/)?[\w-]+(\.[\w-]+)+:\d{1,5}\/?$/网址(url,支持端口和"?+参数"和"#+参数)/^(((ht|f)tps?):\/\/)?[\w-]+(\.[\w-]+)+([\w.,@?^=%&:\/~+#-]

2020-11-05 16:45:26 748

原创 CSS实现万圣节可爱鬼和南瓜专辑

科普一下万圣节，在每年的11月1日，是西方的传统节日；而万圣节前夜的10月31日是这个节日最热闹的时刻为庆祝万圣节的来临，小孩会装扮成各种可爱的鬼怪向逐家逐户地敲门，要求获得糖果，否则就会捣蛋。而同时传说这一晚，各种鬼怪也会装扮成小孩混入群众之中一起庆祝万圣节的来临，而人类为了让鬼怪更融洽才装扮成各种鬼怪。百鬼夜行，我们混入其中，比鬼还要开心下面为大家展示五个使用 CSS 编写的万圣节页面。（代码均来源于codepen，笔者只做收集），大家快来欣赏大佬的杰作吧（由于代码太多，所以均放在笔者的 g.

2020-11-02 10:58:23 454

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

qq_43477721的博客