Crazykun的博客

原创 canvas入门--绘制刮刮卡

canvas入门--绘制刮刮卡

原创 canvas入门--绘制时钟

canvas入门--绘制时钟

转载 前端解决跨域问题（9个方法）

什么是跨域？跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对JavaScript实施的安全限制。这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅，对。同源策略限制了一下行为：Cookie、LocalStorage 和 IndexDB 无法读取DOM 和 JS 对象无法获取Ajax请求发送不出去说的更直白一点，就是我们在前端使用ajax发送异步请求，如果这个请求的URL地址与当前

原创 vue 处理 路由跳转 重复触发 导致的报错

//路由重复报错const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push(location) { return originalPush.call(this, location).catch(err => err)}

原创 JavaScript 日期处理库 momentjs

官网链接：http://momentjs.cn/npm引入：npminstall moment

原创 unity3D 添加CanvasGroup组件，控制UI元素的显示与隐藏

1、给需要显示与隐藏的UI对象添加Canvas Group组件，其alpha控制着改对象的显示与隐藏2、代码演示：(alpha=0的时候隐藏，alpha=1的时候显示)// 隐藏其他模块GameObject.Find("ButtonGroup").GetComponent<CanvasGroup>().alpha = 0;GameObject.Find("Chart").GetComponent<CanvasGroup>().alpha = 0;GameObject.

原创 相机偏移之后，怎么控制摇杆输出使角色和摇杆偏移方向移动一致

求某一向量与Vector3.forward所成的角度,一般用于求一个物体的绕Y轴的旋转角度/// <summary>/// 求某一向量与Vector3.Forward所称的角度——一般用于求一个物体的绕Y轴的旋转角度/// </summary>/// <returns></returns>public float AngleBetweenForward2Vector(Vector3 vectorAim){ vectorAim.y = 0; .

原创 unity脚本---脚本生命周期

1、脚本类必须继承MonoBehaviour，才可以挂载到对象上using System.Collections;using System.Collections.Generic;using UnityEngine;public class Demo : MonoBehaviour{}2、脚本生命周期2.1初始阶段// 初始阶段：//执行时机：创建游戏对象->立即执行(早于start)//作用：初始化private void Awake(){ r.

原创 unity脚本 --- 控制物体（游戏对象）移动

一、键盘WSAD控制移动void Update(){ float horizontal = Input.GetAxis("Horizontal"); float vertical = Input.GetAxis("Vertical"); // 算出方向向量 Vector3 direction = new Vector3(horizontal, 0, vertical); // 判断是否有位移 if (direction != Vector3.zer

原创 在Vue中使用echart

1、安装echart依赖（webpack）npm install echarts --save2、在main.js中全局中引用import echarts from 'echarts'Vue.prototype.$echarts = echarts3、给一个div设置宽高<div ref="chart" style="width:100%;height:376px"></div>4、然后我们要在mounted生命周期函数中实例化echarts对象。因

原创 vscode保存文件的时候，自动格式化代码，双引号变单引号，适应模版字符串

安装eslint依赖之后将以下代码复制到settings.json中保存{ "window.zoomLevel": 0, "editor.renderWhitespace": "none", "editor.renderControlCharacters": false, "editor.minimap.enabled": false, "breadcrumbs.enabled": true, "editor.fontSize": 18, .

原创 挂载路由导航守卫，控制访问权限

// 挂载路由导航守卫,控制访问权限router.beforeEach((to, from, next) => { // 如果用户访问登录页，直接放行，next if (to.path === '/login') { return next() } // 用户不是访问登录页，获取浏览器sessionStroage中的token // 存在的的话，放行， // 不存在的话，跳转至登录页 const tokenStr = window.sessionStorage..

原创 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题

// 解决ElementUI导航栏中的vue-router在3.0版本以上重复点菜单报错问题const originalPush = VueRouter.prototype.pushVueRouter.prototype.push = function push (location) { return originalPush.call(this, location).catch(err => err)}...

原创 git 分支指令

查看当前分支：gitbranch切换分支：gitcheckoutXXX(分支名)创建并切换到新分支:git checkout -b XXXX更新并提交新分支git add *git commit -m "XXXXXXX"git push origin XXXX

原创 Element-ui的基本使用

1、使用npm安装依赖包npm install element-ui -s2、导入element-ui相关资源(main.js)//导入组件库import ElementUI from 'element-ui';//导入组件相关样式import 'element-ui/lib/theme-chalk/index.css';//配置Vue插件Vue.use(ElementUI);3、引入element-ui提供的组件节点...

原创 Vue脚手架自定义配置

通过单独的配置文件配置项目，配置项目运行自动打开，以及端口号1、在项目的跟目录创建文件vue.config.js在该文件中进行相关配置，从而覆盖默认配置module.exports = { devServer: { port: 8888, open: true }}在终端运行：npmrun serve即可查看效果...

原创 Vue-cli (Vue脚手架的基本使用)

基于3.x版本的脚手架创建vue项目1、基于交互式命令行的方式，创建新版vue项目vue create my-project2、基于图像化界面的方式，创建系版本vue项目vue ui通过可视化界面创建vue项目，运行并打开...

原创 Vue-cli脚手架介绍及安装方法

Vue-cli ：又称Vue脚手架，用于快速生成Vue项目基础结构，其官网为：https://cli.vuejs.org/zh/安装方法：1、安装3.x版本的Vue脚手架npm install -g @vue/cli

原创 Vue-router 创建与切换组件实例

1、定义组件模板实例var login = { template: "#login" } var register = { template: "#register" }2、引入路由js文件<!-- 引入路由js文件 --> <script src="js/vue-router.js"></script>3、创建路由对象//创建vue-ro

原创 Vue自定义全局指令与自定义私有指令

// 注册一个全局自定义指令 `v-focus`Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() }})如果想注册局部指令，组件中也接受一个directives的选项：directives: { focus: { // 指令的定义 inserted: function (el) { el...

原创 Vue自定义全局过滤器，与自定义私有过滤器

//自定义过滤器 Vue.filter('changeDate', function(ctime) { var dt = new Date(ctime); var y = dt.getFullYear(); var m = (dt.getMonth() + 1).toString().padStart(2, '0'); var d = dt.getDate().toString().padSta.

原创 es6 遍历数组新方法

1、forEachthis.list.forEach(items => { if (items.name.indexOf(keywords) != -1) { newList.push(items); }});2、some3、filter4、findIndex以上都会对数组中的每一项进行遍历

原创 本地存储 localStorage的注意事项

1、本地存储localStorage里面只能存储字符串格式，因此如果需要存储对象格式的数据，需要把对象转换成字符串格式。使用JSON.stringify(XXX)2.获取本地存储的数据，需要把里面的字符串转换成对象格式使用JSON.parse(XXX),这样的到的数据才能使用。注：1、存储操作：localStorage.setItem("XXX",JSON.stringify(XXXX)).2、获取本地存储操作：localStorage.getItem("XXX")XXX为存储.

转载 图片懒加载

原理：先将img标签的src链接设为同一张图片（比如空白图片），然后给img标签设置自定义属性（比如 data-src）,然后将真正的图片地址存储在data-src中，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。达到懒加载的效果。这样做能防止页面一次性向服务器发送大量请求，导致服务器响应面，页面卡顿崩溃等。<!DOCTYPE html><html lang="en"><head> <meta charset

原创 网页开发小技巧之禁止右键复制、查看源代码、图片另存为

在HTML网页中加入几行简单的代码可以禁止他人使用鼠标右键和“另存为”命令。 一、屏蔽鼠标右键 ＜body oncontextmenu=self.event.returnValue=false onselectstart="return false"＞ 二、禁止“另存为”命令 在目标网页末尾“</BODY></HTML>”的标签前面加上加入如下代码，可以使“另存为”命令不能顺利执行。 <noscript> <iframe scr="*.htm"&.

转载 值得收藏的45个常用css形状

CSS能够生成各种形状。正方形和矩形很容易，因为它们是 web 的自然形状。添加宽度和高度，就得到了所需的精确大小的矩形。添加边框半径，你就可以把这个形状变成圆形，足够多的边框半径，你就可以把这些矩形变成圆形和椭圆形。我们还可以使用 CSS 伪元素中的::before和::after，这为我们提供了向原始元素添加另外两个形状的可能性。通过巧妙地使用定位、转换和许多其他技巧，我们可以只用一个 HTML 元素在 CSS 中创建许多形状。虽然我们现在大都使用字体图标或者svg图片，似乎使用 CSS ...

原创 实现页面适配方案（二） rem + flexible.js

flexible.js是手机淘宝团队出的简洁高效移动端适配库使用flexible.js之后，再也不需要写不同屏幕的媒体查询，因为里面js已经做了处理他的原理是把当前设备划分为10等分，但在不同设备下，比例还是一致的我们要做的，就是确定好我们当前设备的HTML文字大小就可以了比如当前设计稿是750px的，那么我们只需要把html文字大小设置为75px（750px/10）就可以里面页面元素rem值：页面元素的px值/75剩余的，让flexible.js去运算...

转载 Normalize.css的使用及下载

Normalize.css只是一个很小的CSS文件，但它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的CSS reset，Normalize.css是一种现代的、为HTML5准备的优质替代方案。Normalize.css现在已经被用于Twitter Bootstrap、HTML5 Boilerplate、GOV.UK、Rdio、CSS Tricks以及许许多多其他框架、工具和网站上。 Normalize.css 项目地址 Normalize.css 在Gi...

原创 实现页面适配方案（一）rem + less

第一步要获得模版画布的尺寸，这里以750px为例750px平均划分15等分 = 50pxhtml｛ font-size：50px;｝页面元素的属性具体的rem = 750px下的像素大小 / font-size（50px）上述计算方式可以使用less进行运算。...

原创 JavaScript navigator实现不同终端打开不同页面

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) { window.location.href = "../H5/index.html"; //手机}

原创 JavaScript 响应式布局

方法一resize监控浏览器宽度的变化

原创 JavaScript 页面加载事件

具有唯一性，会被后面的onload覆盖掉window.onload = function (){}一般用以下方法：document.addEventListener('load',function(){ })页面图片较多的情况下，可以用以下方法DOMContentLoaded，会先把页面整体框架加载出来，就开始执行js事件，不用等到图片都加载完毕再执行js事件document.addEventListener('DOMContentLoaded',func...

原创 JavaScript 事件委托

原创 删除事件兼容性解决方案

原创 JavaScript 节点操作之创建、新增节点

一、创建节点element.createElementvar li = document.createElement('li');二、添加、插入元素节点element.appendChild()追加新元素作为父的最后一个子元素。element.insertBefore(XXX，XXXX) 追加在XXXX的前面一个位置 <body> <textarea name="" id="">123</textarea> <but...

原创 JavaScript 节点操作

1、父节点element.parentNodeparentNode属性可返回某节点的父节点，注意是最近的一个父节点如果没有父节点，返回null<body> <div class="grandfather"> <div class="father"> <div class="son"> 123 </div> </div> </div></body><s

原创 JavaScript 自定义属性

获取自定义属性值的方法：element.getAttribute('自定义属性');设置自定义属性：element.setAttribute('自定义属性','属性的值');<body> <div id="demo" data-index="1"></div></body><script> var div = document.querySelector('div'); console.log(div.id); //

原创 JavaScript DOM核心内容（操作元素）

原创 JavaScript 中Array数组的常用内置对象

------------新增/删除-----------------------★在数组的结尾添加一个新的元素：push()，可以在括号里填写参数返回值是新数组的长度。★在数组的开头追加一个新的元素：unshift()，可以在括号里填写参数返回值是新数组的长度。★删除数组最后一个元素：pop()，不能填写参数返回值时删除的那个元素值。★删除数组的第一个元素：shift()，不能填写参数返回值时删除的那个元素值。------------排序----------------.

原创 JavaScript实现倒计时功能

实现倒计时效果1、核心算法:输入的时间减去现在的时间就是剩余的时间（即倒计时）但是不能拿着时分秒相减注意：比如05分减去25分，结果会是负数2、用时间戳来做，用户输入的时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。3、把剩余的时间总的毫秒数换算成天、时、分、秒转换公式如下:d = parseInt(总的秒数 / 60 / 60 / 24); //计算天数h = parseInt(总的秒数 / 60 / 60 % 24); //计算小时m = parseI