前端
关注
分享
扫一扫
CopperDong
纯属巧合
展开
-
vue项目打包后本地index运行
vue-cli项目打包后直接在本机运行，config/index.js 中修改代码build: { // Paths assetsRoot: path.resolve(__dirname, '../dist'), assetsSubDirectory: 'static', //加了一个小点 assetsPublicPath: './', }打包后图标不能用？build / utils.js 中 return ExtractTextPlugin.ex...转载 2021-11-24 10:14:48 · 707 阅读 · 0 评论 -
JavaScript 实现一个简单的MVVM前端框架(ES6语法)
前言随着前端各大框架的崛起，为我们平时的开发带来了相当的便利，我们不能一直停留在应用层面，今天就自己动手实现一个乞丐版的MVVM小框架完整代码github地址效果<div id="app"> <p>{{a}}</p> <p>{{b.b}}</p> <input type="text" v-model="a"></div><script>const vm = ne转载 2020-08-02 17:17:38 · 835 阅读 · 1 评论 -
CSS3实现对话气泡效果
以前我们要实现对话气泡效果很麻烦，从有了CSS3以后就变得简单多了，我们就来看下CSS3如何实现对话气泡效果。CSS3开始改变我 们的生活了。现在要创建一个在个浏览器下面都看起来不错的对话浮层就简单了很多，一个HTML元素，一些CSS3代码，不需要图片，也不需要 Javascript。一点一点开始吧，先来看看HTML结构，只需要一个元素就可以了。我们使用p标签。 1 ...转载 2020-03-13 11:33:45 · 577 阅读 · 0 评论 -
使用d3.js创建关系图
本实例是在网络搜索的结果下，自己改了些东西创建而成。实现了关系图的移动、拖拽、放大功能。以及数据的分类等等。代码稍显繁琐，如有建议可以评论区讨论。另外案例中的d3.js为3.5.17版本，请注意安装。<!DOCTYPE html><html><head> <style> #divid { ...转载 2019-12-26 14:38:20 · 5403 阅读 · 3 评论 -
js获取元素的距离父元素、窗口的距离offsetTop,offsetHeight,clientHeight
前言相信很多项目中都会有这样一个小需求（PC端，移动端则是点击），鼠标移上某个菜单或者某个位置，显示一个弹出框，移开则隐藏弹出框，就是css中hover效果，这种通常做法是每个子菜单下都有一个弹框，父元素相对定位，子元素绝对定位，只需要控制的弹框的显示与隐藏即可，但是，当鼠标移动到边界的菜单上时，弹框可能会超出外部元素的范围，如下图：解决办法动态的计算弹框距离外部元素的位置，即获取...转载 2019-12-19 21:37:13 · 7413 阅读 · 0 评论 -
unicode字符集对应html/js/css（html特殊字符）
平时写代码很少用到HTML的特殊字符，最常用的可能是 了，但有时在移动端为了节省时间，可能会用这些字符实现某种特殊效果，现整理如下：使用方法：这些字符属于unicode字符集，所以，你的文档需要声明为UTF-8； 编号用在HTML中时，需要在前面加上&#符号； 用于CSS文件中，但是需要用反斜杠\转义； 用于JavaScript，和CSS用法一样，不过要用\...转载 2019-10-25 15:02:42 · 473 阅读 · 0 评论 -
vue element-ui scss 仿简书评论模块
一、前言最近开发项目需要用到评论模块，参考了多家平台，对比之后觉得简书的最漂亮，就它了。前端当然要先放图简书原图注意评论的输入框默认是隐藏的，点击回复才会显示出来本篇文章实现的效果同样输入框需要点击回复才会显示二、功能分析从 UI 上看，整个评论模块大致分为四个版块评论人信息。包括头像，昵称，评论时间 评论的内容。包括文字内容，赞的个数和回复按钮...转载 2019-10-24 11:33:49 · 1373 阅读 · 0 评论 -
使用html方式在博客中添加数学公式
使用在线latex公式编辑http://www.codecogs.com/latex/eqneditor.php编辑想要的数学公式 右键复制gif链接到图片完成转载 2018-07-26 09:31:24 · 970 阅读 · 0 评论 -
Vue.js实战（1）：简介
代码：https://github.com/icarusion/vue-book原创 2018-04-03 14:03:21 · 541 阅读 · 0 评论 -
深入React技术栈（1）：简介
本书从几个维度介绍了React。 一是作为View库，它怎么实现组件化，以及它背后的实现原理。 二是扩展到Flux应用架构及重要的衍生品Redux，它们怎么与React结合做应用开发。 三是对它与server的碰撞产生的一些思考。 四是讲述它在可视化方面有着怎样的优势与劣势。 代码https://gi原创 2018-04-02 20:34:16 · 690 阅读 · 0 评论 -
html5 Canvas画图教程26:用transform来实现位移,缩放,旋转等
本文属于《html5 Canvas画图系列教程》,本文有些长.前面我讲过在canvas中实现图形的变换,这是比较简单的,因为都是用的直观的函数.今天我还是要实现同样的图形变化效果,但不同的是我要用一个看起来就让人心碎的方法,就是transform,也就是矩阵matrix.其实我对Matrix的认识只限于他是一部很好看的电影(即黑客帝国),在没看此电影前,我根本不知道有矩阵这个名字,而且矩阵这名字又...转载 2018-03-14 09:43:42 · 3424 阅读 · 1 评论 -
HTML5骨骼动画Demo | 使用min2d、createjs、pixi播放spine动画
Spine做骨骼动画是比较流行的，使用起来可能相对复杂，但功能毕竟强大，所以市场占有率较大。在unity、cocos2d、starling中使用spine已经很成熟了，而HTML5这一块可能刚刚起步，暂时spine对这一块也没有做得非常完善。整理了一下，找了一些比较好的方法，分享一下。 createjs这是HTML5动画引擎比较好用，也比较小的一个，如果项目纯碎为了播放骨骼动画，而不是一个游戏，强...转载 2018-03-13 13:04:16 · 3212 阅读 · 1 评论 -
Live2D Web端实现
demo预览：http://www.kakinuma.date/l2d.html官方：http://www.live2d.com/en/sdk下载：https://link.zhihu.com/?target=http%3A//app2.live2d.com/cubism/sdk/bowiuex/webgl/Live2D_SDK_WebGL_2.0.05_1_en.zipsdk目录：framewo...转载 2018-03-13 10:19:26 · 7792 阅读 · 1 评论 -
微信小程序：nodejs+百度语音识别开发实践
今天，终于成功使用nodejs研究出百度语音识别了。目前使用小程序最新录音管理api测试，小程序录音只支持aac，mp3格式，并且保持的是临时地址。而百度语音识别目前只支持pcm，wav，amr格式。因此服务端需要先存储好录音文件并经过一次音频转换。具体步骤如下：1、安装ffmpeg插件。我使用的windows系统，具体安装方法看这里，该博主文章讲的非常详细，按照步骤走即可。这个插件是使用flue...转载 2018-02-25 18:07:26 · 1903 阅读 · 1 评论 -
支持语音识别、自然语言理解的微信小程序（“遥知之”智能小秘）完整源码分享
记录自己搭建https的silk录音文件语音识别服务的调用过程，所有代码可在文中找链接打包下载>>>>>>>>>>>>>>>>>>>>>>>> 欢迎转载 <&am转载 2018-02-25 17:32:38 · 557 阅读 · 0 评论 -
HTML5移动游戏开发高级编程 11：自建Quintus引擎（3）
11.1 引言 精灵是引擎用来在屏幕上显示图形和元素的主要可视游戏对象（GameObject），精灵使用一些基本资产或精灵表（SpriteSheet）把自身绘制到游戏中；场景（Scene）则提供了一种方式把诸如关卡一类的游戏的某个离散部分包装成一个既好用又可重用的包；最后，作为游戏状态的主要容器，舞台（Stage）负责跟踪GameObject列表，以及确保它们在每帧中的更新和绘制。1原创 2018-02-19 19:07:11 · 512 阅读 · 0 评论 -
HTML5移动游戏开发高级编程 10：自建Quintus引擎（2）
10.1 引言 本章将继续，使用类在屏幕上绘制控件、接受用户的输入以及加载资产10.2 访问游戏容器元素 就游戏而言，要在屏幕上渲染任何东西，它必须有一个可供其在上面进行绘制的对象。对于画布游戏来说，该对象就是Canvas元素；而对于其他类型的游戏来说，它或是一个普通的或是一个SVG元素。 10.3 捕捉用户输入 创建输入子系统：键盘、鼠标、触摸输入、游原创 2018-02-18 14:02:01 · 365 阅读 · 0 评论 -
HTML5移动游戏开发高级编程 9：自建Quintus引擎（1）
9.1 引言 现在的JavaScript非常适于当成一种交互式游戏开发语言使用9.2 创建可重用HTML5引擎的框架 该引擎将被命名成Quintus。 设计基本的引擎API：需要在同一页面上运行多个引擎实例，该需求确保引擎作为独立单元出现，不会干扰自身或页面的其他组成部分。在可能的情况下，引擎应提供合理的选项默认值，以此免去搭建运行环境所需的大量原创 2018-02-18 10:21:13 · 863 阅读 · 0 评论 -
HTML5移动游戏开发高级编程 3：试飞结束，向移动进发
3.1 引言 添加触摸控件以及根据设备调整游戏界面尺寸。3.2 添加触摸控件 绘制控件：为了使在移动设备上玩游戏称为可能，一种常见的解决方案是在屏幕上添加一些可视触摸控件，这些控件可由位于页面底部的三个方形按钮组成。 游戏需要处理不同的屏幕分辨率，因此，游戏不会绘制固定大小的输入方块，而会基于游戏界面的宽度调整方块的尺寸。根据一些非正式测试可知，把游戏的界面宽原创 2018-02-16 15:34:52 · 411 阅读 · 0 评论 -
CSS3世界
三、CSS边框盒子阴影四、CSS3背景五、CSS3文本六、CSS3颜色特性七、盒模式八、伸缩布局盒模式9、CSS3多列布局 ...原创 2018-09-26 18:54:42 · 418 阅读 · 0 评论 -
CSS3 背景
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"/> <title>shi</title> <style type="text/css"> .demo { w原创 2018-10-21 14:59:27 · 270 阅读 · 0 评论 -
CSS3 边框
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"/> <title>shi</title> <style type="text/css"> .tabs-box {原创 2018-10-21 15:07:05 · 439 阅读 · 0 评论 -
为wangEditor扩展,增加全屏 查看源码功能
wangEditorExt.js/** * wangEditor扩展,增加全屏 查看源码功能 * 传入均为 editor实例,非css选择器 * 依赖jquery 如果是layui之类的需要在layui.use方法中使用 * 全屏功能需要引入 wangEditor-fullscreen.css * @author mrzhou@miw.cn * @date 2018...转载 2019-10-09 09:14:07 · 1298 阅读 · 0 评论 -
Element-UI新手快速入门 通过拖拽式可视化开发ElementUi
关于ElementUi的详细文档欢迎大家访问官网，本节为大家介绍一款通过拖拽配置即可辅助我们开发ElementUI让你的开发之旅变得有趣起来，大大降低element开发门槛，提升开发效率等不及的可以直接访问 去体验http://lowcode.magicalcoder.com/element软件全貌提供了丰富的组件直接拖拽到右侧即可 涵盖大部分ElementUi官方提供的组件...转载 2019-08-29 17:07:22 · 1323 阅读 · 0 评论 -
Nuxt.js实战和配置
前段时间刚好公司有项目使用了Nuxt.js来搭建，而刚好在公司内部做了个分享，稍微再整理一下发出来。本文比较适合初用Nuxt.js的同学，主要讲下搭建过程中做的一些配置。建议初次使用Nuxt.js的同学先过一遍官方文档，再回头看下我这篇文章。一、为什么要用Nuxt.js原因其实不用多说，就是利用Nuxt.js的服务端渲染能力来解决Vue项目的SEO问题。二、Nuxt.js和纯Vue项目...转载 2019-08-28 19:26:22 · 3971 阅读 · 0 评论 -
github上vue项目汇总
飞冰https://ice.work/可视化工具https://vuematerial.io/https://pro.loacg.com/https://github.com/jaweii/Vue-Layouthttps://github.com/L-Chris/vue-designhttps://github.com/fireyy/vue-page-designer...原创 2019-08-28 16:26:11 · 1131 阅读 · 0 评论 -
vue企业级开发
实现一个购票网站安装node.js安装cnpm，$ npm install -g cnpm --registry=https://registry.npm.taobao.orgvue-cli脚手架，可用于快速搭建大型单页面应用。$ cnpm install vue-cli -g$ cnpm install webpack -g$ vue init webpack...原创 2019-08-06 14:45:37 · 1120 阅读 · 0 评论 -
vue基础
数据绑定：{{ data }}生命周期：比较常用的有 created，实例创建完成后调用 mounted，el挂载到实例上后调用，一般第一个业务逻辑会在这里开始 beforeDestroy，实例销毁之前调用 例：<div id="app">{{ date }}</div><script>var app = new Vu...原创 2019-07-23 19:06:43 · 245 阅读 · 0 评论 -
vue.js简单学习记录
<script src='http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js'></script>生命周期var vm = new Vue({ data: { a: 1 }, created: function() { }})init：开始初始化 created：实...原创 2019-07-09 17:05:16 · 236 阅读 · 0 评论 -
CSS 单行文字溢出点点点效果
效果的核心是text-overflow: ellipsis，必需的3个声明如下：.xxx { text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}这3个声明缺一不可...原创 2019-04-06 22:12:51 · 1329 阅读 · 0 评论 -
JavaScript 之 ArrayBuffer
JS里的ArrayBuffer还记得某个晚上在做 canvas 像素级操作，发现存储像素的数据格式并不是Array类型，而是ArrayBuffer，心想这是什么鬼？后来查了一些资料，发现自己这半年来的JS是白学了，竟然才知道还有这么个东东。首先，这个 ArrayBuffer 类型化数组，类型化数组是JavaScript操作二进制数据的一个接口。最初为了满足JavaScript与显卡之间大量...转载 2018-11-07 23:38:09 · 676 阅读 · 0 评论 -
CSS3渐变、变形、过渡和动画
<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"/> <title>shi</title> <style type="text/css" media="screen&quo原创 2018-10-21 17:51:43 · 1598 阅读 · 0 评论 -
CSS盒模式
CSS3内容溢出属性CSS3伸缩布局盒模式（Flexible Box） CSS3引入的布局模式Flexbox布局，主要思想是让容器有能力让其子项目能够改变其宽度、高度（甚至顺序），以最佳方式填充可用空间（主要是为了适应所有类型的显示设备和屏幕大小）。Flex容器会使子项目（伸缩项目）扩展来填满可用空间，或缩小它们以防止溢出容器。 最重要的是，Flexbox布局方向不...原创 2018-10-21 16:37:35 · 424 阅读 · 0 评论 -
CSS3 文本
在CSS文本功能上主要分为三大类：字体、颜色和文本。CSS3溢出文本属性原创 2018-10-21 15:30:24 · 322 阅读 · 0 评论 -
HTML5移动游戏开发高级编程 2：从玩具到游戏
2.1 引言 添加一些敌方飞船，并设置各种游戏元素，这样才能让敌我双方交战2.2 创建GameBoard对象 第一步是添加一种机制来同时处理页面上的一群精灵。 尽管Game对象提供了一种切换面板进出的机制，但在把任意数量的精灵添加至页面这方面，并未提供什么简易的做法。所以，我们要把GameBoard对象加进来。 GameBoard对象的作用更像是跳棋游戏原创 2018-02-15 23:09:35 · 530 阅读 · 0 评论 -
HTML5移动游戏开发高级编程 1：先飞后走，先难后易
1.1 引言 在HTML5上从头开始构建一个一次性游戏---一个名为Alien Invasion的纵向卷轴2D太空射击类游戏。1.2 用500行代码构建一个完整游戏 Alien Invasion秉承了游戏“1942”的精髓（但是在太空中），或可把它看成Galaga的一个简化版本。玩家控制出现在屏幕底部的飞船，操作飞船垂直飞过无边无际的太空领域，同时保卫地球，抵抗成群入侵的原创 2018-02-15 18:37:41 · 1095 阅读 · 0 评论 -
HTML5游戏开发进阶 3 ：物理引擎基础
Box2D最初是有Erin Catto用C++编写的。很多流行的物理仿真类游戏都使用了该引擎，包含《愤怒的小鸟》，该引擎已经被转化为几种不同语言的版本，包括Java，ActionScript，C#和JavaScript。JS版本又被称为Box2dWeb。 http://code.google.com/p/box2dweb3.1 Box2D基础 Box2D使用一些基本对象来原创 2018-02-09 20:40:22 · 885 阅读 · 0 评论 -
微信小程序开发详解 5 博客园客户端---新闻资讯类小程序
新闻开始通过精确推荐增强用户使用黏性，最终做到千人千面，完成“读新闻”到“消费内容”的转变。 虽然新闻资讯类的竞争已经白热化，但在各个垂直领域仍大有可为。如，程序员看IT新闻，星座爱好者研究每日运势，股民研究上市公司的动向。 具有以下特点：垂直分类，满足不同人群的兴趣和需求。内容时效性强，需及时更新。内容丰富，多种媒体共存（图片、视频、直播）。 根据新原创 2018-01-20 17:01:23 · 2104 阅读 · 0 评论 -
微信小程序开发详解 4 组件与API
遵循“开放是一种能力”的理念。4.1 组件 目前支持的组件有以下7种：视图容器：视图容器、可滚动视图容器、滑块视图容器。基础内容：图标、文字、进度条表单：按钮、表单、输入框、多项选择器、单项选择器、列表选择器、内嵌列表选择器、滚动选择器、开关选择器、标签导航：页面跳转与应用链接多媒体：音频、图片、视频。地图：地图map。画布：画布canvas。客服会话：进入客服会话按钮。原创 2018-01-20 15:32:46 · 1031 阅读 · 0 评论 -
微信小程序开发详解 3 ：开发框架视图层
3.1 样式语言WXSS WXSS实现了CSS的大部分特性，不同之处：app.wxss和每个page的WXSS的覆盖关系是：如果有同名rule，page就会覆盖app的样式。而在CSS中，同名rule的样式只是合并。选择器支持after、before伪类，但是不支持first-child、last-child、nth-child这类伪类。定义在app.wxss中的样式为全原创 2018-01-20 11:24:35 · 1278 阅读 · 0 评论