自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(359)
  • 收藏
  • 关注

原创 十分钟上手-搭建vue2.0开发环境(新手教程一)

想写一些关于vue的文章已经很久了,因为这个框架已经火了很久,在公司里用的框架都比较老旧,但怎么也得跟上前端发展变化的潮流,这不,开始使用vue开发项目了,一遍开发一边踩坑中,今天要记录的是五分钟搭建vue开发环境,运行GitHub上的开源项目。步骤很简单,只是在搭建环境的过程中会遇到各种各样奇怪的报错,十分让人头疼。官方文档:https://cn.vuejs.org/###1:安装node...

2020-03-19 15:54:31 154

原创 五分钟上手-微信小程序组件库 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 245 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 236

原创 小程序调用天气接口并且渲染在页面

五分钟上手-微信小程序组件库 iView Weapphttps://www.jianshu.com/p/09b4515152ff前两天写了关于组件库 iView Weapp的教程,其实也就是把文档上的例子拿出来体验了一遍,今天写一个具体的例子,调用一个免费的天气接口的api,并且把所获取的内容展示在前端的界面,前端界面与 iView Weapp结合,展示的一个小的demo.先上效果###...

2019-06-24 16:04:28 472

原创 小程序计时器

之前写了一个小程序倒计时的demo,在网上查看了一下,计时器很少有demo,现在来写一个。wxml<view class="container"> {{timecount}}</view><button bindtap='start'>开始</button><button bindtap='stop'>暂停</but...

2019-06-24 16:03:47 269

原创 小程序Echarts图表组件使用

1:下载 GitHub 上的 项目https://github.com/ecomfe/echarts-for-weixin2:但项目下载之后,打开小程序开发工具,可以看到效果如下,适配性还是比较完美的。如果是在项目里面引入组件的话,打开从github上面下载的代码,将ec-canvas文件夹复制黏贴到你的项目里面。好的,组件已经复制到了我的项目里面,现在我想实现一个折线图,现在开...

2019-06-24 16:03:18 1250

原创 小程序踩坑-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 2733

原创 小程序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 4412 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 176

原创 小程序踩坑-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 5525 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 1470

原创 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 846

原创 Thymeleaf 引入公共代码页面

前面写过,写前端页面的时候,尤其是写后台管理系统,每个页面都会遇到一些重复的代码,比如左侧导航栏,头部的信息,前面也做了一些整合,把代码放在了公共的页面,每个页面调用时只需要用script引入即可。在HTML页面中引入公共的部分的代码https://www.jianshu.com/p/f50c5de2d550但是项目里面 用到的是Thymeleaf 模板,为了减少请求速度,用Thymelea...

2019-06-18 15:46:26 308

原创 Echarts报错-Uncaught ReferenceError: echarts is not defined

Echarts报错-Uncaught ReferenceError: echarts is not defined造成这个错误的原因:导入js的位置不对,要在使用时导入,option前一点导入,不能导入太前了。在我的项目里面 ,是先引入了自己写的文件js,再引入了echarts插件,导致加载顺序不对,从而出现了报错解决办法,只需要正确的引入方法即可。一定要注意位置的前后哦。原文作者...

2019-06-18 15:45:12 6312

原创 ztree实现一棵树

前面陆陆续续的写过一些ztree的文章,但调用的是后端的接口,demo拿过去没有办法可以直接查看前端的界面,这就造成了一部分人对此理解的困扰。jQuery的ztree仿windows文件新建和拖拽效果https://www.jianshu.com/p/bfa67325719cztree实现编辑和删除功能https://www.jianshu.com/p/95d1df89665fztree...

2019-06-18 15:43:52 138

转载 智能终端软件开发——刮刮卡

日常生活,抽奖是大多数人都喜欢的一项活动。抽奖的形式有很多种,例如彩票、刮刮卡等。Android系统也可以实现刮刮卡的效果,需要用到Bitmap、Matrix、Canvas等类。接下来通过一个案列来演示刮刮卡的实现过程,具体如下。1.创建程序创建一个名为ScrCard的应用程序,指定包名为cn.itcast.scratchcard,设计用户交互界面,预览效果如图。对应的布局代码如下:ac...

2019-06-18 15:41:46 329

原创 DOM的实际应用

DOM 在 JavaScript 课程中我们详细的探讨过,它是一种文档对象模型。方便开发者对 HTML 结构元素内容进行展示和修改。在 JavaScript 中,DOM 不但内容庞大繁杂,而且我们开发的过程中需要考虑更多的兼容性、扩展性。在 jQuery 中,已经将最常用的 DOM 操 作方法进行了有效封装,并且不需要考虑浏览器的兼容性,对于之前的DOM是一颗岑天大树枝繁叶茂让我们遥不可及,那...

2019-06-04 15:56:55 114

原创 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 135

原创 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 883

原创 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 245

原创 bootstrap五列布局

我们知道,在使用Bootstrap栅格的时候,我们可以对网页方便的进行模块分割。Bootstrap 包含了一个响应式的、移动设备优先的、不固定的网格系统,可以随着设备或视口大小的增加而适当地扩展到 12 列。它包含了用于简单的布局选项的预定义类,也包含了用于生成更多语义布局的功能强大的混合类。如果要2等分,使用col-md-6即可;要3等分,使用col-md-4即可;但如果我们要5等分或者8等分...

2019-05-30 19:22:32 749

原创 CSS消息数字提示

今天写个简单的小demo,关于CSS实现头像右上角消息数字提示,样式如下如图所示,在微信和扣扣消息里面比较常见。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> .alarm { ...

2019-05-30 19:21:49 2242 1

原创 CSS元素的出现和隐藏

前两天不知道是哪位同学问的问题,鼠标滑过一个div的时候,怎么控制子集元素属性的出现和隐藏,然后我说用用mouseover和mouseout这两个鼠标事件就行,那如果js不怎么熟悉的时候,可以用CSS: hover方法来写吧。方法:使用a 控制其他块的样式:使用a控制a的子元素 b: .a:hover .b { background-color:...

2019-05-30 19:21:14 98

原创 解决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 1281

原创 echarts柱状图

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>五分钟上手之柱状图</title> <!-- 引入 echarts.js --> <script ...

2019-05-29 19:59:55 99

原创 echarts改变颜色

#一:柱状图改变颜色代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 柱状统计图 --> <div class="r...

2019-05-29 19:59:20 5152

原创 echarts多条折线图

参考链接:echarts官网:http://echarts.baidu.com/原型图(效果图):代码:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body> &...

2019-05-29 19:58:45 1518

原创 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 101

原创 echarts折线图实例

五分钟上手:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>五分钟上手之折线图</title> <!-- 引入 echarts.js --> <...

2019-05-29 19:57:11 21533 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 117

原创 css选择器汇总

要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。选择器就是选择器用来指定样式的作用范围。类选择器:类选择器在css中比较常见,首先要在普通标签中设置一个类,类名不可为中文,然后在 style 标签中添加该类名的样式。类选择器在选择器前要加一个点”.”例子:<head><style type="text/css">....

2019-05-29 19:55:50 71

原创 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 345

原创 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 1351 1

原创 layer弹框

官方介绍:layer至今仍作为layui的代表作,受众广泛并非偶然,而是这五年多的坚持,不断完善和维护、不断建设和提升社区服务,使得猿们纷纷自发传播,乃至于成为今天的Layui最强劲的源动力。目前,layer已成为国内最多人使用的web弹层组件,GitHub自然Stars3000+,官网累计下载量达30w+,大概有20万Web平台正在使用layer。同时也高居年度最受欢迎的开源项目榜单:2017...

2019-05-29 19:53:36 122

原创 微信公众号之全局计时器的案例

#####需求一:index.html里面的数据从后台获取并渲染在前端页面代码://index.html页面JS代码如下//判断openid是否已经获取 if(sessionStorage.getItem("openid") == null){ //获取用户的openId $.ajax({ url : "getOpenId.action"...

2019-05-27 17:05:30 459

原创 鼠标focus事件实例

当鼠标聚焦时输入框变色css相关,鼠标点击输入域后出现有颜色的边框原理:css伪类之input输入框鼠标点击边框变色效果伪类元素的使用::focus###一:当输入框获得焦点时,改变它的背景色效果图:当鼠标聚焦时输入内部填充色改变<!DOCTYPE html><html><head><meta charset="UTF-8">...

2019-05-27 17:05:00 1495

原创 点击按钮div变色

<!DOCTYPE html> <html> <head> <title>点击按钮div变色.html</title> <meta charset="utf-8" /> </head> ...

2019-05-27 17:04:24 9215

原创 5个JS模板引擎

1:百度模板引擎(baiduTemplate)http://baidufe.github.io/BaiduTemplate/baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎,应用场景:前端使用的模板系统 或者 后端javascript环境发布页面,功能概述:提供一套模板语法,用户可以写一个模板区域,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果...

2019-05-27 17:03:43 168

原创 前端script引入公共的代码

在做前端网页的时候,会涉及到很多界面,有的时候,这些界面都会有重复的代码,比如侧边栏菜单的重复代码,头部导航的 重复代码,底部的重复代码,这个时候,为了使每个页面的代码看起来简洁明了,我们需要把这些重复的代码放到公共的页面里面,在具体页面只需引用即可。主要代码<div id="head"></div><div id="side"></div>...

2019-05-27 17:03:07 586

原创 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 2875

空空如也

空空如也

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

TA关注的人

提示
确定要删除当前文章?
取消 删除