- 博客(40)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 echarts仪表盘
echarts 仪表盘let option = {title: {show: true,text: ‘Single SKU Small Items’,textStyle: {height: 26,lineHeight: 26,fontWeight: ‘bold’,fontSize: 18,color: “#ffffff”, }, left: 'center', top: 25 },
2022-05-26 14:38:34
377
原创 一段html现在文字跑马灯实现
<!-- 1、滚动方式：behavior scroll 循环滚动(默认) alternate 来回交替滚动 slide 只滚动一次 2、滚动方向：direction up、down、left(默认)、right 3、滚动速度：scrollamount（滚动速
2017-11-30 14:36:44
5124
原创 React入门
Reat是什么？React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React的特点：1.声明式设计 −React采用声明范式，可以轻松描述应用。 2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。 3.灵活 −React可以与已知的库或框架很好地配合。 4.JSX − JS
2017-10-10 11:22:24
435
原创 手机端滑动实现页面左右切换效果
实现页面左右切换的效果主要用到了touchslider.js 来帮助我们完成的，首先先介绍一下touchslider.js。TouchSlider是一个轻量级的javascript组件，设计的目的是提供一个可以方便实现全平台（PC及移动端触摸界面）的幻灯slider效果。默认参数说明： ‘id’: ‘幻灯容器的id或者该节点对象’, //string|elementNode
2017-10-09 15:02:18
30300
1
原创 点击图片放大
html代码：<body> <h1>❤</h1> </body>css代码：h1{ font-size: 50px; color: pink; text-align: center;}h1.active{ -webkit-animation:a_z 1.2s linear forwards;}@-webkit-keyframes a_z
2017-09-26 18:06:45
433
原创 点赞+1效果
html代码：<body> <h1>❤<span>+1</span></h1></body>css代码： h1{ font-size: 50px; color: pink; text-align: center; position: relative; }
2017-09-26 18:00:40
2038
原创 文字和图片混合模式
首先我们先来看下，效果图：有木有，文字被水溅上的感觉。。。。代码如下： html代码: <body> <img src="img/timg (3).jpg" alt="" /> <h3>WATER</h3> </body>css代码： img { display: block; width: 100%;
2017-09-26 17:22:59
828
原创 vue.js入门环境搭建
使用vue首先需要安装node。一、开始安装全局的vue-cli脚手架（使用vue-cli是因为它可以帮助我们搭建好我们所要的模板，比较简单），在命令行输入：cnpm install -g vue-cli检查是否安装成功输入vue回车 有信息出来就成功了！二、创建一个新的项目（vue_project）cnpm init webpack vue_project每个模块都是相互依赖的，所以需要下载依赖，
2017-07-25 16:54:00
310
原创 纯css修改下拉列表select的默认样式
select的一些默认样式我们很难修改，比如图标的替换。接下来就说说如何修改这些默认样式：html代码：<div> <select name=""> <option value="芝士">芝士</option> <option value="奶油">奶油</option> </select></div>给select添加父元素div目的是为了，用di
2017-07-21 16:44:38
123789
2
原创 Angular2.x环境搭建快速入门--最简单教程
Angular2简介：Angular 2 是Google推出的一个跨平台全终端的框架，和目前比较火的React和Vue.js相比，有如下优点：由于Google的目的是推出一个完整解决方案，所以官方默认提供的类库（比如routing，http，依赖性注入（DI）等）非常完整，无需自己选择。React的一大痛点就是选择太多导致在配置寻找组件和类库的过程中消耗太多精力，当然从另一方面看这也是其优势，选择
2017-07-21 14:58:46
724
原创 angular使用bootstrap手动引导
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="js/angular.min.js"></script></head><body><div ng-app="myapp"> <div ng-controller="myct
2017-07-17 18:38:34
266
原创 解决android手机刷新后tabs选项卡出现在浏览器上边的问题
需要在config里面进行配置var app = angular.module("myApp", ["ui.router"]);app.config(function($ionicConfigProvider) { $ionicConfigProvider.platform.ios.tabs.style('standard'); $ionicConfigProvider.platform.io
2017-07-17 17:53:37
316
原创 通过jquery的animate实现可以左右点击的轮播
html代码：<div id="all"> <ul class="banner"> <li><img src="img/pic1.jpg"/></li> <li><img src="img/pic2.jpg"/></li> <li><img src="img/pic3.jpg"/></li> </ul> <span class=
2017-07-17 16:56:07
748
原创 css3制作下三角鼠标悬浮变正三角
其实制作这种三角非常简单，只需要设置透明的边即可，鼠标悬浮的时候旋转。 以下是制作的详细代码：html:<div class="triangle"> </div> css样式：.triangle { width:0; height:0; overflow:hidden; /*朝下的三角形*/ b
2017-07-04 11:47:18
834
原创 css3动画属性详解及用法
下面是一些经常用到的动画属性：animation-name:指定要绑定关键帧（动画）的名字animation-duration:指定动画多少毫秒或秒完成animation-timing-function:设置动画将如何完成（动画的速度）一个周期animation-delay:设置动画开始时的延迟时间animation-iteration-count:定义动画的播放次数animation-
2017-07-04 10:40:11
558
原创 使用纯css实现tab切换
html页面<div class="tablist"> <ul class="tabmenu"> <li><a href="#tab1">tab1</a></li> <li><a href="#tab2">tab2</a></li> <li><a href="#tab3">tab3</a></li> </ul> <div
2017-07-03 18:45:24
589
原创 html5自定义属性data详解及使用方法
以下面的html作为案列：获取data-属性：<ul> <li class="first" data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul>通过js的getAttribute(
2017-07-03 17:25:47
1556
原创 css3缩放问题-文字居中显示
思路：将要居中的容器转换为block元素设置为absolute通过left：-50%居中；通过 transform: translate（）来实现。例如：将small里面的字体缩小并居中显示small { position: absolute; left: 50%; display: block; white-space: nowrap; -webk
2017-07-03 14:57:22
2037
原创 angularjs-依赖注入：显示注入和隐式注入
依赖注入：是一种软件设计模式，目的是处理代码的依赖关系，减少组件间的耦合性。隐式注入：不需要开发人员的干预，会自动根据参数的angularJS名称识别和注入数据。显示注入：需要开发人员通过字符串描述，告诉angularJS需要注入的对象名称。这样js在进行优化的过程中，不会对字符 串进行压缩。
2017-06-15 22:27:54
373
原创 一个页面从输入URL到页面加载显示完成，这个过程发生了什么？
浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；载入解析到的资源文件，渲染页面，完成。
2017-06-15 22:17:17
347
原创 git 常用命令大全
01.git init初始化git工厂 02.git add .添加所有文件到暂存区03.git clone url将项目克隆到本地 04.git update-ref更新文件05.git pushorigin master 将本地主分支推到远程主分支06.git pull 拉取所有远程分支到本地07.git branch dev 创建一个d
2017-06-13 09:47:56
403
原创 mui选项卡跳转问题
很多新手在学mui的时候，会在底部的导航直接把链接地址写在a标签里，页面跳转的时候发现无法链接没有反应。mui用作手机web页面，在下拉刷新+tab滚动切换下，a标签的设置href，点击不会进行跳转如果是手机版，解决导航a标签不能跳转页面可以使用mui('body').on('tap','a',function({document.location.href=this.href;});如果还有电脑版
2017-06-01 22:37:56
4565
原创 vue事件绑定详解
在上篇中，我们说到了Vue时间绑定用v-on，今天我们就来详细说说。缩写：@修饰符：.stop - 调用 event.stopPropagation()。.prevent - 调用 event.preventDefault()。.capture - 添加事件侦听器时使用 capture 模式。.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。.{keyCode | keyAl
2017-05-31 22:42:22
4317
原创 slice和splice的区别
一、定义slice() 方法是从已有数组/字符串中选取部分元素构成新的数组/字符串splice() 方法用于插入、删除或替换数组的元素。二、用法slice()的参数： slice（start,end）slice方法，在string对象和array对象的用法类似对于数组对象来说，从start下标开始到end下标结束（不包含end下标的元素），然后返回新的数组，对原数组没有影响。当参数
2017-05-25 19:50:42
342
原创 vue快速入门
一、概念 vue，是构建用户界面的渐进式框架，采用自底向上增量开发设计。 vue,只关注图层，他的设计目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件二、基础语法结构css代码：<div id="app"> {{msg}}</div>js代码：new Vue({ "el":"#app", data:{ "msg":"Vue语法结构"
2017-05-25 17:13:46
338
原创 AngularJS实际项目应用--ui-router
在项目开发过程中，我们都用ui路由来开发项目，因为ui路由有三个重要的特性：多视图、嵌套视图、视图命名。具体ui-router的使用及功能请参考：http：//ui-router.github.io首先看一下，项目中某个模块的目录结构：看到每个模块下都会有自己的路由配置文件，下面我们看怎么从启动app开始，配置动态加载路由的功能：var app=angular.module("myApp",["ui
2017-05-05 13:15:10
426
原创 AngularJS中ngRouter和uiRouter的区别
路由(route)，几乎所有的MVC(VM)框架都应该具有的特性，因为它是前端构建单页面应用(SPA)必不可少的组成部分。 那么，对于angular而言，它自然也有内置的路由模块：做ngRoute。 不过，大家很少用它，因为它的功能太有限，往往不能满足开发需求！！ 于是，一个基于ngRoute开发的第三方路由模块，叫做ui.router，受到了大家的“追捧”。那么它们有什么不同呢？ngRou
2017-05-03 22:26:36
2230
原创 AngularJS内置服务器--$http服务的简单用法
AngularJS提供了大量的内置服务，通过这些内置服务就可以快捷的进行一些业务功能流程的自动处理了，如： $window用于注入原生JS中的window对象 $document用于注入原生JS中的document文档对象 $timeout用于注入封装的原生JS中的setTimeout()函数处理过程 $interval用于注入封装的原生JS中的setInterval()函数处理过程 $l
2017-05-02 22:54:20
1124
原创 angularJS-----路由的概念及用法
在开讲之前，首先谈谈APP应用。平时我们用的app都是多页面，通过大量的页面之间的跳转，来实现不同的功能的业务处理，切换起来就没那么流畅了。在angular里面，我们可以用路由进行切换。因为在angular里面，我们用户一般在加载这样的应用时，会整个的缓存在手机上。我们用路由进行切换时，不用再发起HTTP请求了。体验比原来好。什么是路由？路由，就是网络数据或者请求进行分发的一个网络组件。路由就是
2017-05-02 21:35:11
416
原创 AJAX开发---JQuery中的Ajax操作
JQuery的Ajax操作 中 对JavaScript底层Ajax操作进行了封装，提供了两种方法进行操作 底层操作 $.ajax()–执行异步 AJAX 请求快捷操作 $.get()–使用 AJAX 的 HTTP GET 请求从服务器加载数据 $.post()--使用 AJAX 的 HTTP POST 请求从服务器加载数据 $.getScript()–使用 AJAX 的 HT
2017-04-29 00:10:59
355
原创 AJAX开发基础及原生JS操作步骤
AJAX是什么？AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。AJAX = 异步 JavaScript和XML技术。AJAX 是一种独立于 Web 服务器软件的浏览器技术。AJAX用来做什么？ 前端页面向服务器后端请求数据AJAX用在哪里？ 主要在前端开发过程中，需
2017-04-28 23:34:27
330
原创 JavaScript面向对象（二）--前端必须知道的原型和继承
原型是JS语言的难点，此文主要讲原型及原型实现的继承，希望对大家有所帮助。一、原型（prototyle） 是用来定义公共特征、行为，表现为对象的属性/函数。目的是为了提高代码的复用、降低代码的耦合并提升扩展性。原型对象的使用：var People = function(name, age) { this.name = name; this.age = age;}//所有通过该构造函数
2017-04-28 17:52:47
305
原创 JavaScript面向对象（一）基础详解及封装
一、类和对象1.1、类：类型的简称，数据类型的简称；是一个概念、代号，如人、电脑、飞机等等 1.2、对象：类的某个具体的实例，是一个实际存在的物体，如陈伟霆、dell电脑、波音747 1.3、类和对象，是面向对象编程的基础。二、面向对象？2、1概念：面向对象不是技术，而是一种处理问题的思路，一种编程思想。 2.2特点：1、对零散数据的封装，避免了数据之间产生互相影响的情况。2、提高代码的复用
2017-04-28 16:31:16
687
原创 AngularJS--自定义服务的三种方式用法总结
AngularJS 中可通过三种（$provider,$factory,$service）方式自定义服务，以下是不同的实现形式：第一种factory工厂模式实现： 以其简洁的使用特色而流行于自定义服务行列 * 在处理返回数据的时候，可以返回字面量、数组、对象、复杂对象等等各种数据 * 极大的满足了我们项目的需要，所以使用较多，需要掌握！ html页面：<div ng-c
2017-04-28 13:29:48
947
原创 AngularJS--多个过滤器使用方法
一、货币过滤器--按照指定的货币格式进行输出原始数据输出：输出结果：499.1213货币过滤器输出：输出结果：$499.12 (默认以$符号输出，保留小数后两位)以￥符号输出设置保留小数后三位输出结果：￥499.121var app = angular.module("myApp", []); app.controller("
2017-04-27 22:22:50
1107
原创 AngularJS组件化--让开发更简单
AngularJS--组件化什么是组件化？组件化是将页面中一部分UI分装起来进行重复使用，UI中的数据是可以不同的，甚至组件中可以对UI进行适当的业务逻辑处理，如链接跳转、数据运算。代码：定义组件基础语法结构var app=angular.module("pageHeader",[]);app.component("组件名字",{ template:"欢迎您尊敬的用户
2017-04-27 21:12:53
2384
原创 angular常见内置指令
控制指令： ng-app： 用于定义Angular应用入口的指令，用于[自动引导]Angular程序的运行 Angular通过ng-app指令，实现自动引导程序运行，底层是通过 bootstrap()进行模块DOM元素加载，开始运行！ ng-contr
2017-04-26 20:04:35
637
原创 angular--控制器controller
为了方便多个控制器中的公共数据初始化,AngularJS提供了一个全局作用域对像$roorScope。 AngularJS应用中，仅有一个全局作用域，其他所有的$scope作用域都是$rootScope的子元素。因为控制器函数中可以直接使用$rootScope，就有可能会造成全局数据污染。 规范：$rootScope一般和Angular模块的run()方法一起使用，进行全局数据
2017-04-26 19:48:46
519
原创 angular--$watch监视用法
$watch()函数，用于监视模型数据的变化。$watch(参数1,参数2,参数3)参数1：监视的对象参数2：监视数据改变执行的函数参数3：[可选]，布尔值-默认为fasle：不监视对象深沉属性，true：监视对象深层属性。1. 监听单个普通变量$scope.$watch("name", function() {name属性发生变化执行的函数代码})2. 监听多
2017-04-26 19:35:47
2943
原创 Angular入门
1、程序运行入口：ng-app="模块名字" （根目录）作用：用于启动AngularJS应用程序当AngularJS程序要运行时，找到了ng-app开始运行 2、定义angular模块：var app=angular.module("模块名字", []);3、定义控制器：app.controller("控制器名字"，function($scope){ 控制器的参数$scope 是
2017-04-26 19:07:58
268
angular-$watch 多种监视
2017-04-26
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人