前端
MrFano
这个作者很懒,什么都没留下…
展开
-
canvas画出五角星
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>canvas{border: 1px solid red;background-c原创 2017-06-16 08:58:43 · 736 阅读 · 0 评论 -
惯性算法
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}div{width: 60px原创 2017-06-14 16:30:30 · 2203 阅读 · 0 评论 -
手机端滚滚屏
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><meta name="viewport" content="width=device原创 2017-06-14 15:48:00 · 902 阅读 · 1 评论 -
前端常见面试题
1.Doctype作用?严格模式与混杂模式如何区分?它们有何意义? 声明不是html标签,它是指示web浏览器关于页面使用哪个HTML版本进行的指令。告知浏览器的解析器用声明文档标准来解析这个文档。Doctype不存在或者错误会导致文档以兼容模式呈现。在整个脚本中启用严格模式,在顶部添加"use strict";它是一个编译指示。用于告诉支持的javascript引擎切换到严格模式。...翻译 2017-06-11 15:05:23 · 431 阅读 · 0 评论 -
CSS3 3D transform变换
好吧,CSS3 3D transform变换,不过如此!这篇文章发布于 2012年09月7日,星期五,01:05,归类于 css相关。 阅读 417489 次, 今日 486 次一、写在前面的秋裤早在去年的去年,我就大肆介绍了2D transform相关内容。看过海贼王的都知道,带D的家伙都不是好惹的,2D我辈尚可以应付,3D的话,呵呵,估计我等早就在千里之外被其霸气震晕了~~看看...转载 2017-06-06 20:32:15 · 517 阅读 · 0 评论 -
css3正方体
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>*{margin: 0;padding: 0;}.stage{width: 2原创 2017-06-05 10:05:34 · 403 阅读 · 0 评论 -
css3 3D圆周运动
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>div{position: absolute;top: 200px;left:原创 2017-06-05 09:58:51 · 1545 阅读 · 1 评论 -
H5桌面小通知
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style></style></head>原创 2017-05-24 15:35:24 · 694 阅读 · 0 评论 -
h5拖动实例
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>ul{list-style: none;border: 1px solid red原创 2017-05-24 09:14:41 · 679 阅读 · 0 评论 -
今天我们来分享10款最新的jQuery和HTML5应用插件,都非常强大,一起来看看吧。
1、CSS3/jQuery自定义弹出窗口 多种弹出动画这是一款利用jQuery和CSS3实现的自定义弹出窗口,这可比浏览器默认的弹出窗口漂亮多了。弹出窗口中可以自定义html,十分灵活。另外最重要的一个特点是,它利用了jQuery和CSS3可以实现很多种弹出窗口动画效果,挺酷的。在线演示 / 源码下载2、jQuery适合移动页面和PC页面的分页插件今天我们要为大家分享一款...转载 2017-05-22 11:03:55 · 346 阅读 · 0 评论 -
ajax.jsonp封装 myAjax.post('PHP/do2.php',{'name':'李四','age':22},function(err,data){ if (err) {
get/post请求接口如下:myAjax.post('PHP/do2.php',{'name':'李四','age':22},function(err,data){if (err) {/*throw err;*/alert('服务器错误');return;}alert(data);})由于ajax不能获取域外文件 我加了jsonp的接口jsonp接口如下:myAjax....原创 2017-05-11 14:50:42 · 640 阅读 · 0 评论 -
ajax详解
Ajax: asynchronous JavaScript and xml (异步javascript和xml) 其是可以与服务器进行(异步/同步)交互的技术之一。 ajax的语言载体是javascript。其是浏览器的一个技术 最大特点:页面不刷新(用户体验非常好)创建<script>//主流浏览器方式创建var xhr = new XMLHttpRequest(...转载 2017-05-22 13:40:03 · 477 阅读 · 0 评论 -
vue-lazyload 简易上手教程
1) 在项目中安装依赖$ npm install vue-lazyload -D2) main.js 中加入vue-laryload 相关代码import Vue from 'vue'import App from './App.vu...翻译 2018-12-14 17:01:01 · 578 阅读 · 0 评论 -
Node版本管理工具(NVM)的配置和使用
由于以后的开发工作可能会在多个Node版本中测试,而且Node的版本也比较多,所以需要NVM来管理安装操作步骤1. 下载:[nvm-windows](https://github.com/coreybutler/nvm-windows/releases/download/1.1.0/nvm-noinstall.zip)2. 解压到一个全英文路径 例:C:\node\nvm -...转载 2019-01-02 09:50:06 · 349 阅读 · 0 评论 -
angular4 滚动事件
内容ion-content改进此文档内容组件提供了一个易于使用的内容区域,并提供了一些有用的方法来控制可滚动区域。在一个视图组件中只应该有一个内容。如果需要其他可滚动元素,请使用ionScroll。内容区域还可以通过刷新组件来实现刷新 。用法<ion-content> Add your content here!</ion-content>...翻译 2017-07-26 14:57:14 · 10988 阅读 · 3 评论 -
manifest.appcache强制刷新
// Check if a new cache is available on page load.// window.addEventListener('load', function(){// // window.applicationCache.update(); // 手动更新缓存 或者 监听到加载缓存完成事件后 刷新页面// window.application...翻译 2017-09-22 13:58:52 · 2261 阅读 · 0 评论 -
Git简单生成生成公钥和私钥方法
Git简单生成生成公钥和私钥方法Git配置Git安装完之后,需做最后一步配置。打开git bash,分别执行以下两句命令git config --global user.name “用户名”git config --global user.email “邮箱”用户名看自己喜欢起,一般都是起些容易记的,亦或者某个简称,邮箱选自己邮箱即可。(值得一提的是,我第一次生成的时候并没有执...翻译 2017-09-27 10:55:39 · 1130 阅读 · 0 评论 -
数组深拷贝
用法: var arr1 = deepClone(arr0)export function deepClone (obj) { if (Array.isArray(obj)) { return obj.map(deepClone) } else if (obj && typeof obj === 'object') { var cloned = {}...原创 2018-11-13 16:59:55 · 238 阅读 · 0 评论 -
去除字符串的所有空格
export let trimAllSpace = val => {if (typeof val === 'string') {return val.replace(/\s/g, '');}throw new Error('string is must');}原创 2018-11-12 12:02:44 · 320 阅读 · 0 评论 -
vue2.0 px与rem转换问题
由于我们拿到的产品图标注都是px为单位的,为了不去计算px与rem的转换,我们使用px2rem插件,来捕捉当前项目的所有px,直接计算相对应数值,这样,以后写界面,就可以直接用px来构建界面,不用自己去计算啦1、安装插件 npm i postcss-px2rem --save npm install px2rem-loader --save 2、配置px2r...转载 2018-10-30 15:13:34 · 769 阅读 · 0 评论 -
如何使用手机访问前端HTML页面
可能有些同学一直用google手机模式调试前端移动页面,但毕竟会带来一些偏差,今天来介绍一下真机调试前端HTML页面的方法和经验。在cmd命令行里输入“ipconfig”,找出自己的ip 一般IPV4地址就是你的ip举个例子,一般你是localhost:8080去调试。一般gulp起的服务器,可以在gulpfile.js文件中找到localhost并改为ip重启。Vue...原创 2018-10-30 15:01:30 · 13518 阅读 · 0 评论 -
vue axios 请求封装
Vue axios 的封装心得,直接上代码 axois 的通用或者特殊配置,比如登陆接口的token,用不到就不用配置axios.interceptors.request.use((config) => { if{ 可以给某个接口进行特殊配置 } return config;}) axios 的请求封...原创 2018-10-26 16:48:18 · 1338 阅读 · 0 评论 -
gulp-cli 一个不用框架的小项目
项目产生原因: 不能用框架,于是自己用gulp 搭建了一个小项目。如有需要自己完善哟项目目录介绍:码云地址:https://gitee.com/mrfanxd/gulp-cli.git 自己拿哦...原创 2018-10-24 13:17:34 · 1631 阅读 · 0 评论 -
vue rem文件的导入问题
rem文件的导入问题:我们在做手机端时,适配是必须要处理的一个问题。例如,我们处理适配的方案就是通过写一个rem.js,原理很简单,就是根据网页尺寸计算html的font-size大小,基本上小伙伴们都知道,这里直接附上代码,不多做介绍。;(function(c,d){var e=document.documentElement||document.body,a="orientationch...翻译 2018-07-26 14:01:16 · 1402 阅读 · 0 评论 -
Vue 定时器问题
定时器问题:我在a页面写一个定时,让他每秒钟打印一个1,然后跳转到b页面,此时可以看到,定时器依然在执行。这样是非常消耗性能的。如下图所示:解决方法1:首先我在data函数里面进行定义定时器名称:data() { return { timer: null // 定时器名称 ...翻译 2018-07-26 13:58:51 · 2042 阅读 · 0 评论 -
vue swiper 层叠轮播
<template><div class="swiper"><swiper :options="swiperOption"><swiper-slide v-for="(item, index) in slides" :key="index"><img :src="item&quo原创 2018-04-13 17:21:15 · 8364 阅读 · 1 评论 -
vuex+localStorage vuex刷新失效?
想必大家在使用vuex的时候,vuex刷新后数据失效的问题会困扰大家,本文教大家如何利用本地缓存保存状态Installnpm install vuex-along --save1.import 导入import vuexAlong from 'vuex-along' 2.add to store添加至store的 plugins 的数组里export default new V...原创 2018-04-12 14:51:39 · 2153 阅读 · 0 评论 -
数组/对象 深拷贝
很多同学在操作数组和对象的时候,如果只是简单地赋值,就和原来的数据同时发生改变所以有了深拷贝的需要,话不多说,直接上代码: export function deepClone (obj) {let result = Array.isArray(obj) ? [] : {}for (let key in obj) {if (obj[key] !== null) {...原创 2018-04-12 14:31:56 · 313 阅读 · 0 评论 -
gulp
//处理任务var gulp =require('gulp');var imagemin = require("gulp-imagemin");var uglify = require("gulp-uglify");var sass = require("gulp-sass");var concat = require("gulp-concat");// 起一个本地服务器var co...原创 2017-11-03 11:40:54 · 252 阅读 · 0 评论 -
gulp pipe
首先,gulp的源码里没有任何一部分是定义pipe的。gulp的pipe方法是来自nodejs stream API的。gulp本身是由一系列vinyl模块组织起来的。pipe方法到底是什么呢?pipe跟他字面意思一样只是一个管道例如我有一堆文件var s = gulp.src(["fileA","fileB","fileC"])src方法实际上是'vinyl-fs'模...转载 2017-10-09 10:05:12 · 5261 阅读 · 0 评论 -
emoji
最近在移动端项目中遇到一个坑,有几个input表单提交给后台的时候,会因为input字段中出现emoji表情,而导致后台(java)报错。网上百度了半天,找到了一个解决办法,亲测有用。把代码整理了一下: [javascript] view plain copy/** * 用于把用utf16编码的字符转换成实体字符,以供后台存储 * @param {string} str 将要转换的字符...原创 2017-09-25 10:27:03 · 364 阅读 · 0 评论 -
多个window onload的解决办法
同一个页面有很多函数要用到window.onload,但又互相冲突,怎么解决呢,下面是看到的一个函数,和大家分享一下。function addLoadEvent(func){ // 多个window.onload共用的封装函数 var oldonload=window.onload; if(typeof window.onload!='function'){ ...原创 2019-01-25 17:04:02 · 2000 阅读 · 0 评论