SanPhantom的博客

第一步：安装Flutterwindow下Flutter官网下载链接：https://flutter.dev/docs/development/tools/sdk/releases#windows​ 下载完Flutter后，解压到自己的本地的安装路径。随后进入flutter安装路径，运行该目录下的flutter_console.bat文件，接下来就可以来测试Flutter安装成功，可以在该安装目录下打开PowerShell，执行flutter doctor命令行来进行检测。运行后的正确结果见下图：

防抖（debounce）所谓防抖，是指触发某一个事件后，在n秒内函数只能执行一次，如果在n秒内再一次触发了事件，则会重新计算函数的执行时间防抖函数分为非立即执行函数和立即执行函数。<!-- 接下来所有的防抖函数的测试皆由此html测试 --><span id="count">当前数字为：0</span><button id="debounceBtn"> debounce防抖按钮 </button>非立即执行函数非立即执行版的防抖

Vue学习（四）使用过渡类名HTML结构：&lt;div id="app"&gt; &lt;input type="button" value="动起来" @click="myAnimate"&gt; &lt;!-- 使用 transition 将需要过渡的元素包裹起来 --&gt; &lt;transition name="fa

极速创建【文件】-&gt;【新建】-&gt;【HTML文件】，然后在弹出窗口下面的“选择模板组：”中选中“mui底部选项卡（Webview模式）”。点击完成，就会自动创建一个带有默认页面的模板。打开tab-webview-main.html可以在右侧看到已经创建了一个有底部选项卡的主页面。再浏览其它页面可以看到各个页面的内容。但是在右侧的web浏览器中点击选项卡的话，只是顶部标题文字变了，内...

mui是h5十大框架之一。很好用，但是针对不同的场景，文档的描述不够我们理解。场景：通过mui的上拉加载更多数据，下拉刷新回刚刚进入当前页面的状态。笔者设置每次上拉就清空旧页面的内容，把新加载的10条数据渲染到页面上，当下拉时候，恢复到第一次加载的状态。问题：当上拉加载的数据达到最多时候，通过mui('#pullrefresh').pullRefresh().endPullupToRefre...

Vue.js阶段汇总一、Vue指令系统自带指令v-if：判断指令v-for：遍历指令v-show：判断指令v-model：数据绑定指令v-text：文本指令v-html：代码指令v-bind：绑定指令通常与节点的属性共同使用，一般可简写为 ：class=" "v-on：绑定指令通常与方法共同使用，一般可简写成@click=" "自定义指...

最近在做手机版网站，对比了jQuery Mobile，zepto，mui，最后选定mui。官方文档位置：http://dev.dcloud.net.cn/mui/ui/12注意事项：1. DOM结构关于mui页面的dom，你需要知道如下规则。固定栏靠前所谓的固定栏，也就是带有.mui-bar属性的节点，都是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav...

Vue学习（三）——小案例ToDoList&lt;!doctype html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial

less语法学习1 变量LESS 允许开发者自定义变量，变量可以在全局样式中使用，变量使得样式修改起来更加简单。/*-----------------变量-----------------*/@mainColor:#E93223;body{color: @mainColor;}2 Mixin****混入Mixin（混入）功能对用开发者来说并不陌生，很多动态语言都支持 Mixin（混...

仿京东移动端首页&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&

Bootstrap下的轮播图&lt;div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="1000" data-pause="hover" &gt; &lt;!--点容器--&gt; &lt;ul class="carousel-indic

Vue学习（六）命名视图实现经典布局标签代码结构：&lt;div id="app"&gt; &lt;router-view&gt;&lt;/router-view&gt; &lt;div class="content"&gt; &lt;router-view name="a"&gt;&lt;/router-view&

Vue学习（一）介绍尤雨溪 设计出身 中国江苏无锡人在2013年12月8日在gitHub发布了0.6版本2015年10月份正式发布了1.0版本2016年10月正式发布了2.0版本Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。它不仅易于上手，还...

Angular服务在AngularJS中， 服务是一个比较重要的部分，它是一个对象或者是函数，可以在你的AngularJS的应用中使用。接下来介绍几种比较常用的内建服务以及自定义服务的方法。[内建服务]（1）location服务location服务返回当前页面的地址，需要注意的是location服务是作为一个参数传递到 controller 中。如果要使用它，需要在 controller ...

AngularJS中的$watch监听事件本篇介绍angular的另一个应用—监听事件，该监听功能是angular自带的，也比较实用。监听功能定义在了scope里，前面说过，scope里，前面说过，scope里，前面说过，scope就相当于作用域，表示在当前页面有效，当然， 你也可以把理解为一个空间或一个容器，angular的作者往这个容器里定义了很多方法，$watch就是其中之一。所谓监听，...

Vuejs通过Axios请求数据我们来搭建api接口调用工具Axios。Vue本身是不支持ajax调用的，如果你需要这些功能就需要安装对应的工具。支持ajax请求的工具很多，像superagent和axios。今天我们用的就是axios，因为听说最近网上大部分的教程书籍都使用的是axios，本身axios这个工具就已经做了很好的优化和封装，但是在使用时，还是比较繁琐，所以我们来重新封装一下。...

angular.elementAngularJs给我们也提供了一些操作DOM的方法———Jqliteangular.element()将DOM元素或者HTML字符串包装成一个jQuery元素。angular.element(element)1、引入JQuery在引入JQuery的前提下，和$的用法基本相同：angular.element('#id')2、不引入JQueryang...

Webpack什么是webpack?webpack 是前端的一个项目构建工具，它是基于 Node.js 开发出来的一个前端工具；如何完美实现上述的2种解决方案使用Webpack， 是基于整个项目进行构建的；借助于webpack这个前端自动化构建工具，可以完美实现资源的合并、打包、压缩、混淆等诸多功能。根据官网的图片介绍webpack打包的过程webpack官网webpack安装...

Vue学习（五）什么是路由所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；在 vue 中使用 vue-router导入 vue-router 组件类库：&lt;!-- 1. 导入 vue-router 组件类库 --&gt; &lt;script src="./lib/vue-router-2.7.0.js"&gt;&lt;/script&gt;使用...

Vue学习 （二）事件修饰符：.stop 阻止冒泡.prevent 阻止默认事件.capture 添加事件侦听器时使用事件捕获模式.self 只当事件在该元素本身（比如不是子元素）触发时触发回调.once 事件只触发一次过滤器概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustac...

前言：做Web开发的我们，表单验证是再常见不过的需求了。友好的错误提示能增加用户体验。博主搜索bootstrap表单验证，搜到的结果大部分都是文中的主题：bootstrapvalidator。今天就来看看它如何使用吧。一、源码及API地址介绍它之前，还是给出它的源码以及API的地址吧。bootstrapvalidator源码： https://github.com/nghuuphuoc/bo...

canvas绘制饼状图&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;绘制饼状图&lt;/title&gt; &lt;style&gt; canvas {

Bootstrap初步学习什么是 Bootstrap？Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。Bootstrap 包的内容基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。CSS：Bootstrap ...

jQuery基本概念 学习目标：学会如何使用jQuery，掌握jQuery的常用方法，能够使用jQuery实现常见的效果。为什么要学习jQuery？【01-让div显示与设置内容.html】使用javascript开发过程中，有许多的缺点：1. 查找元素的方法太少，麻烦。2. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。3. 有兼容性问题。4. 想要实现...

纯CSS3旋转镂空魔方&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesheet" h

JS和JQ中的Ajax机制 什么是Ajax? AJAX = 异步 JavaScript 和 XML。 AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面...

JQuery对节点的操作1、创建和添加节点首先，我们需要创建一个节点，而在jquery中创建一节点是非常迅速的，直接通过$符号。let $a = $("&lt;a href='http://www.baidu.com/' target='_blank;'&gt;百度一下&lt;/a&gt;");就像这样，我们已经创建了一个a标签，但是，我们单单只是创建一个a标签，并没什么用...

JavaScript正则文章来源：http://blog.csdn.net/keymo_/article/details/6927527概念是指一个用来描述或者匹配一系列符合某个句法规则的字符串的单个字符串。在很多文本编辑器或其他工具里，正则表达式通常被用来检索和/或替换那些符合某个模式的文本内容。许多程序设计语言都支持利用正则表达式进行字符串操作。例如，在Perl中就内建了一个功能强...

JavaScript的闭包说到闭包，我们首先要了解到变量的作用域，接下来我来举个例子：var num = 10;function f1(){ console.log(num); var num1 = 20; console.log(num1);}f1();console.log(num1);执行以上的代码，会发现从上到下的 结果为10 ， 20，un...

JavaScript的原型方法1、构造函数function Person(name, age, sex){ this.name = name; this.age = age; this.sex = sex; this.eat = function(){ console.log("我喜欢吃火锅"); }}以上为一个构造函数...

JavaScript的继承实现1、何为继承​ 继承简单来说就是子承父业，所谓的子，就是子类，可以通过继承来得到父类的属性和方法，并且可以拥有属于自己的方法和属性。所谓的父，就是父类，也被称为基类，是其子类的根本，也就是说，父类一般就是他所有子类的共同点。2、继承有何用​ 学过面向对象的，应该比较了解继承，毕竟这是面向对象思想中的一块基石，通过继承可以减少我们很多冗余...

这里写链接内容# JavaScript实现贪吃蛇之前在网上看到过一个16行的贪吃蛇代码，只不过我才疏学浅，无法去了解之中的深髓，不过我也通过自己的理解完成了自己的贪吃蛇代码，实现了基本的贪吃蛇游戏。以下便是js代码。/** * JavaScript文件 * Time: 2018/8/14 11:03 * Author: SanPhantom * Feature: 贪吃蛇 */...

JQuery事件绑定1、绑定事件我们知道，一个标签可以拥有多个事件，就像每个人都可以吃饭睡觉一样，我们也了解到了一个事件的创建方法，比如点击事件click()、鼠标移入事件mouseenter()等等，但是，我们怎样一次的将多个事件封装到对象里呢 ？这样，我们就不得不提到bind()绑定事件的发放了。接下来就是 该方法的语法了：$("p").bind({ click: ...

2D版跳一跳&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link href="css/jump.css" rel

JQuey的属性操作和动画1、属性操作对于属性的操作一般情况下通过attr进行操作，不过还是有一些意外，比如checked、radio等等，对于这些值为true和false的属性，在1.7版本之后从attr属性中移除了，而是使用prop方法。&lt;!--html代码--&gt;&lt;img src="img/1-small.jpg" /&gt;&lt;input typ...

浅谈移动端和流式布局 移动端，便是在手机上去访问我们的前端页面。我们都知道，我们写PC端的前端页面是，需要考虑各种浏览的兼容性，我们写移动端也不例外，在移动端里，我们更多的是兼容手机的屏幕大小，毕竟这可能是他们惟一影响外观的东西。因此，我们一般都会采用流式布局来完成移动端的页面。在我们一般开始写移动端前，我们会在head标签里面加一个viewport，在这里面，我们需要设置一...

Canvas canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。 基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 &lt;canvas&gt; 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中...

html5+css3实现稍微完整的视频播放器&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link rel="stylesh

Html5笔记H5新增的结构元素: —-&gt;块级 双标签 有语义化的标签header 页眉 通常是一些引导和导航的信息nav 导航section 内容aside 侧边栏footer 页脚Video 视频Audio 音频Canvas 画布H5新增的全局属性ContentEdit...

本地存储 随着互联网的快速发展，基于网页的应用越来越普遍， 同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据， HTML5规范提出了相关解决方案。特性 设置、读取方便容量较大，sessionStorage约5M、localStorage约20M只能存储字符串，可以将对象JSON.stringify() 编码后存储window.sessi...