- 博客(358)
- 收藏
- 关注
RSS订阅原创 十分钟上手-搭建vue2.0开发环境（新手教程一）
想写一些关于vue的文章已经很久了，因为这个框架已经火了很久，在公司里用的框架都比较老旧，但怎么也得跟上前端发展变化的潮流，这不，开始使用vue开发项目了，一遍开发一边踩坑中，今天要记录的是五分钟搭建vue开发环境，运行GitHub上的开源项目。步骤很简单，只是在搭建环境的过程中会遇到各种各样奇怪的报错，十分让人头疼。官方文档：https://cn.vuejs.org/###1：安装node...
2020-03-19 15:54:31
293
原创 五分钟上手-微信小程序组件库 iView Weapp
微信UI组件库 iView Weapp介绍：iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库。https://weapp.iviewui.com/使用步骤1：首先在github上面下载组件库代码https://github.com/TalkingData/iview-weapp2...
2019-06-24 16:06:09
421
1
原创 小程序iView Weapp实现一个倒计时
昨天把组件库 iView Weapp研究了一下，里面确实有很多不错的组件，对于组件的使用，也写了一下笔记：五分钟上手-微信小程序组件库 iView Weapphttps://www.jianshu.com/p/09b4515152ff今天用小程序iView Weapp实现一个倒计时。具体可参考文档。wxml<view class="view-wrap"> <tex...
2019-06-24 16:05:20
395
原创 小程序调用天气接口并且渲染在页面
五分钟上手-微信小程序组件库 iView Weapphttps://www.jianshu.com/p/09b4515152ff前两天写了关于组件库 iView Weapp的教程，其实也就是把文档上的例子拿出来体验了一遍，今天写一个具体的例子，调用一个免费的天气接口的api，并且把所获取的内容展示在前端的界面，前端界面与 iView Weapp结合，展示的一个小的demo.先上效果###...
2019-06-24 16:04:28
565
原创 小程序计时器
之前写了一个小程序倒计时的demo，在网上查看了一下，计时器很少有demo，现在来写一个。wxml<view class="container"> {{timecount}}</view><button bindtap='start'>开始</button><button bindtap='stop'>暂停</but...
2019-06-24 16:03:47
336
原创 小程序Echarts图表组件使用
1：下载 GitHub 上的 项目https://github.com/ecomfe/echarts-for-weixin2：但项目下载之后，打开小程序开发工具，可以看到效果如下，适配性还是比较完美的。如果是在项目里面引入组件的话，打开从github上面下载的代码，将ec-canvas文件夹复制黏贴到你的项目里面。好的，组件已经复制到了我的项目里面，现在我想实现一个折线图，现在开...
2019-06-24 16:03:18
1332
原创 小程序踩坑-Setting data field "list" to undefined is invalid.
今天遇到了一个这样的错误，当调用图片免费的接口api的时候https://api.apiopen.top/getImages报了这样的错Setting data field “list” to undefined is invalid.仔细检查了一下代码发现自己的错误原因错误原因：将数据字段“list”设置为未定义是无效的。在自己代码的setData里面我是这样写的this.se...
2019-06-24 16:02:42
3262
原创 小程序Vant使用教程
Vant Weapp 是有赞移动端组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用两大参考神兽：文档：https://youzan.github.io/vant-weapp/#/intro开源：https://github.com/youzan/vant-weapp1：桌面新建一个vant文件夹2：打开微信开发者工具，在...
2019-06-20 17:09:09
4609
1
原创 当电量少于百分之20的时候，字体显示红色
<text style="{{item.batStyle}}" class="battery">电量:{{item.battery}}%</text>success: function(res) { const carList = res.data.list; for (let i = 0; i < carList.leng...
2019-06-20 17:08:11
264
原创 小程序踩坑-appJSON["tabBar"][2]["pagePath"] "pages/test/test" 需在 pages 数组中
又遇到了一个bug，开心ing，报错如下，相信应该在入门的时候，很多人都遇到了这样的bug。VM2040:5 appJSON["tabBar"][2]["pagePath"] "pages/test/test" 需在 pages 数组中错误原因，没有使用app.json文件来对微信小程序新建的页面进行全局配置。只需要在page里面写上"pages/test/test",即可原文作...
2019-06-20 17:07:25
5978
1
原创 iView Weapp教程
微信UI组件库 iView Weapp介绍：iView Weapp 提供了与 iView 一致的 UI 和尽可能相同的接口名称，大幅度降低了学习成本，是一套一套高质量的微信小程序 UI 组件库。https://weapp.iviewui.com/使用步骤1：首先在github上面下载组件库代码https://github.com/TalkingData/iview-weapp2...
2019-06-20 17:06:48
1843
原创 iView Weapp实现一个倒计时
昨天把组件库 iView Weapp研究了一下，里面确实有很多不错的组件，对于组件的使用，也写了一下笔记：五分钟上手-微信小程序组件库 iView Weapphttps://www.jianshu.com/p/09b4515152ff今天用小程序iView Weapp实现一个倒计时。具体可参考文档。wxml<view class="view-wrap"> <tex...
2019-06-20 17:06:07
1087
原创 Thymeleaf 引入公共代码页面
前面写过，写前端页面的时候，尤其是写后台管理系统，每个页面都会遇到一些重复的代码，比如左侧导航栏，头部的信息，前面也做了一些整合，把代码放在了公共的页面，每个页面调用时只需要用script引入即可。在HTML页面中引入公共的部分的代码https://www.jianshu.com/p/f50c5de2d550但是项目里面 用到的是Thymeleaf 模板，为了减少请求速度，用Thymelea...
2019-06-18 15:46:26
385
原创 Echarts报错-Uncaught ReferenceError: echarts is not defined
Echarts报错-Uncaught ReferenceError: echarts is not defined造成这个错误的原因:导入js的位置不对，要在使用时导入，option前一点导入，不能导入太前了。在我的项目里面 ，是先引入了自己写的文件js，再引入了echarts插件，导致加载顺序不对，从而出现了报错解决办法，只需要正确的引入方法即可。一定要注意位置的前后哦。原文作者...
2019-06-18 15:45:12
6872
原创 ztree实现一棵树
前面陆陆续续的写过一些ztree的文章，但调用的是后端的接口，demo拿过去没有办法可以直接查看前端的界面，这就造成了一部分人对此理解的困扰。jQuery的ztree仿windows文件新建和拖拽效果https://www.jianshu.com/p/bfa67325719cztree实现编辑和删除功能https://www.jianshu.com/p/95d1df89665fztree...
2019-06-18 15:43:52
209
转载 智能终端软件开发——刮刮卡
日常生活，抽奖是大多数人都喜欢的一项活动。抽奖的形式有很多种，例如彩票、刮刮卡等。Android系统也可以实现刮刮卡的效果，需要用到Bitmap、Matrix、Canvas等类。接下来通过一个案列来演示刮刮卡的实现过程，具体如下。1.创建程序创建一个名为ScrCard的应用程序，指定包名为cn.itcast.scratchcard,设计用户交互界面，预览效果如图。对应的布局代码如下：ac...
2019-06-18 15:41:46
501
原创 DOM的实际应用
DOM 在 JavaScript 课程中我们详细的探讨过，它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。在 JavaScript 中，DOM 不但内容庞大繁杂，而且我们开发的过程中需要考虑更多的兼容性、扩展性。在 jQuery 中，已经将最常用的 DOM 操 作方法进行了有效封装，并且不需要考虑浏览器的兼容性，对于之前的DOM是一颗岑天大树枝繁叶茂让我们遥不可及，那...
2019-06-04 15:56:55
235
原创 Font Awesome
在bootstrap框架的使用中，字体图标必不可少，Font Awesome 一套绝佳的图标字体库和CSS框架，值得学习。网址：http://fontawesome.dashgame.com/###使用示例1：引入Font Awesome图标文件或者使用使用LESS或SASS的方法来自定义 Font Awesome 4.7.0 。<link href="https://cdn....
2019-05-31 15:13:11
211
原创 clientX和clientY
####需求：做项目中遇到一个这样的需求，点击属性菜单节点，出现显示框，显示框的位置随着鼠标点击的位置距离而改变。###教程：clientX 事件属性http://www.runoob.com/jsref/event-clientx.htmlclientY 事件属性http://www.runoob.com/jsref/event-clienty.html####基本定义clien...
2019-05-30 19:23:35
1106
原创 echarts 仪表盘
####1：echarts 后面仪表盘三分钟上手示例引入相关的文件<!-- 引入 echarts.js --> <script src="js/echarts.min.js"></script> <script src="js/jquery-1.11.3.js"></script>原始默认显示如下三分钟代码...
2019-05-30 19:23:04
316
原创 bootstrap五列布局
我们知道，在使用Bootstrap栅格的时候，我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统，可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类，也包含了用于生成更多语义布局的功能强大的混合类。如果要2等分，使用col-md-6即可；要3等分，使用col-md-4即可；但如果我们要5等分或者8等分...
2019-05-30 19:22:32
1050
原创 CSS消息数字提示
今天写个简单的小demo，关于CSS实现头像右上角消息数字提示，样式如下如图所示，在微信和扣扣消息里面比较常见。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .alarm { ...
2019-05-30 19:21:49
2592
1
原创 CSS元素的出现和隐藏
前两天不知道是哪位同学问的问题，鼠标滑过一个div的时候，怎么控制子集元素属性的出现和隐藏，然后我说用用mouseover和mouseout这两个鼠标事件就行，那如果js不怎么熟悉的时候，可以用CSS: hover方法来写吧。方法：使用a 控制其他块的样式：使用a控制a的子元素 b： .a:hover .b { background-color:...
2019-05-30 19:21:14
148
原创 解决o.s.web.servlet.PageNotFound 异常
在eclipse里面启动项目的时候，会出现以下的异常o.s.web.servlet.PageNotFound 。Closing non transactional SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@7937e82f]2019-05-30 12:59:48.331 WARN 5032 --- [ni...
2019-05-30 16:26:48
2035
原创 echarts柱状图
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>五分钟上手之柱状图</title> <!-- 引入 echarts.js --> <script ...
2019-05-29 19:59:55
215
原创 echarts改变颜色
#一：柱状图改变颜色代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 柱状统计图 --> <div class="r...
2019-05-29 19:59:20
5311
原创 echarts多条折线图
参考链接：echarts官网：http://echarts.baidu.com/原型图（效果图）：代码：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> &...
2019-05-29 19:58:45
1653
原创 hcharts堆叠柱形图和异步加载
原型图类似如下：<!DOCTYPE ><html> <head> <meta charset="utf-8"><link rel="icon" href="https://static.jianshukeji.com/highcharts/images/favicon.ico"> <me...
2019-05-29 19:58:05
177
原创 echarts折线图实例
五分钟上手：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>五分钟上手之折线图</title> <!-- 引入 echarts.js --> <...
2019-05-29 19:57:11
22453
1
原创 css悬浮阴影
要实现的效果图：实现的代码：-webkit-box-shadow:0px 3px 3px #c8c8c8 ;-moz-box-shadow:0px 3px 3px #c8c8c8 ;box-shadow:0px 3px 3px #c8c8c8 ;整个页面的代码：<!DOCTYPE html ><html><head> <meta h...
2019-05-29 19:56:27
152
原创 css选择器汇总
要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。选择器就是选择器用来指定样式的作用范围。类选择器：类选择器在css中比较常见，首先要在普通标签中设置一个类，类名不可为中文，然后在 style 标签中添加该类名的样式。类选择器在选择器前要加一个点”.”例子：<head><style type="text/css">....
2019-05-29 19:55:50
104
原创 css时间轴
原型：代码：<!DOCTYPE html ><html> <head> <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="http://cdn...
2019-05-29 19:54:51
442
原创 bootstrap上传照片
实际项目中运用：功能：实现上传图片，更改上传图片，移除图片的功能<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="http://cdn.static.r...
2019-05-29 19:54:20
1887
1
原创 layer弹框
官方介绍：layer至今仍作为layui的代表作，受众广泛并非偶然，而是这五年多的坚持，不断完善和维护、不断建设和提升社区服务，使得猿们纷纷自发传播，乃至于成为今天的Layui最强劲的源动力。目前，layer已成为国内最多人使用的web弹层组件，GitHub自然Stars3000+，官网累计下载量达30w+，大概有20万Web平台正在使用layer。同时也高居年度最受欢迎的开源项目榜单：2017...
2019-05-29 19:53:36
273
原创 微信公众号之全局计时器的案例
#####需求一：index.html里面的数据从后台获取并渲染在前端页面代码：//index.html页面JS代码如下//判断openid是否已经获取 if(sessionStorage.getItem("openid") == null){ //获取用户的openId $.ajax({ url : "getOpenId.action"...
2019-05-27 17:05:30
575
原创 鼠标focus事件实例
当鼠标聚焦时输入框变色css相关,鼠标点击输入域后出现有颜色的边框原理：css伪类之input输入框鼠标点击边框变色效果伪类元素的使用：:focus###一：当输入框获得焦点时，改变它的背景色效果图：当鼠标聚焦时输入内部填充色改变<!DOCTYPE html><html><head><meta charset="UTF-8">...
2019-05-27 17:05:00
1692
原创 点击按钮div变色
<!DOCTYPE html> <html> <head> <title>点击按钮div变色.html</title> <meta charset="utf-8" /> </head> ...
2019-05-27 17:04:24
9736
原创 5个JS模板引擎
1：百度模板引擎（baiduTemplate）http://baidufe.github.io/BaiduTemplate/baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎，应用场景：前端使用的模板系统 或者 后端javascript环境发布页面，功能概述：提供一套模板语法，用户可以写一个模板区域，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果...
2019-05-27 17:03:43
259
原创 前端script引入公共的代码
在做前端网页的时候，会涉及到很多界面，有的时候，这些界面都会有重复的代码，比如侧边栏菜单的重复代码，头部导航的 重复代码，底部的重复代码，这个时候，为了使每个页面的代码看起来简洁明了，我们需要把这些重复的代码放到公共的页面里面，在具体页面只需引用即可。主要代码<div id="head"></div><div id="side"></div>...
2019-05-27 17:03:07
695
原创 Bootstrap Table实例
基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。官网：http://bootstrap-table.wenzhixin.net.cn/zh-cn/代码：<!DOCTYPE html><html lang="en"> <head> <me...
2019-05-27 17:02:19
2989
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人