- 博客(52)
- 收藏
- 关注
RSS订阅原创 Three.js 内存释放问题
内存释放1、常规方法：beforeDestroy() { try { scene.clear(); renderer.dispose(); renderer.forceContextLoss(); renderer.content = null; cancelAnimationFrame(animationID) // 去除animationFrame let gl = renderer.domElement.getContext("webgl"); gl &&am
2021-03-30 14:58:19
10774
7
原创 Three.js 开发之 物体围绕自己轴心旋转（二）
让某个mesh绕自己的Y轴旋转，而不是中心点旋转.在scene三维场景内，默认的中心点就是（0, 0，0），添加到场景内的物体的position定位都是围绕原点进行的。此时，如果添加了电风扇或者空调风机进去，风扇旋转也会绕着原点，这是不合业务的。所以要使用方法处理坐标和定位问题，让物体的旋转中心是自己的中心。效果图：思路：外部导入的模型，里面的物体的类型一般都是mesh或者group，然鹅物体旋转的中心点是以Object3D为中心点的。所以：创建一个3d对象，把物体加入到这个对象中，同时获取物体的中
2021-02-26 14:39:14
8730
4
原创 Three.js 开发之加载外部GLTF模型和压缩（一）
Three.js 开发3D智慧楼宇（Vue）在VUE项目里使用three.js搭建智慧园区和楼宇，控制空调、灯光、窗帘的开关等设备，实现智能化楼宇。环境搭建除了vue项目所需要的基本依赖，可用vue-cli脚手架快速搭建不多介绍，我们还需要再额外安装three.js的一些依赖来开发：这边用到了这2两个依赖，一个是整个three.js 的所有资源，一个是three的控件，控制选择缩放的，在package.json内，安装方法：cnpm i -D three three-orbit-controls即
2021-02-26 14:14:59
3707
5
原创 js时间转换，国际时间
var date = getLocalTime(-8).getDate() //获取日期--西八区，单双日分开做a/b testif(date % 2 === 0){ var myTimer = null; var countdown = document.getElementById("countdown"); var currentTimes = parseInt(new...
2019-06-27 15:42:33
2945
原创 vue 2.0学习之vuex的初步使用与理解，mapMutations辅助函数传参等相关问题。
之前做的是react项目，一直在使用redux，最近看了vuex，顺便研究了下。总体来说，两个很接近，个人觉得差不多。列了几点主要的步骤，记录下~1、新建文件夹，vuex，里面存放的是store相关的js，跟redux一样，相关的文件分离开来。2、store.js的内容，该js为主入口，也是默认导出的，全局可import这个js来获取和修改state数据。示例是加减计数的例子，所以有个...
2018-12-10 16:06:19
1739
原创 js正则表达式/原生JS货币api 格式化货币
1、正则表达式方法：function formatPrice(value) { let val = (value/1).toFixed(2).replace(',', '.') return val.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") }formatPrice(29009090900);...
2018-12-07 17:29:38
1237
原创 前端实现创建a标签，利用new Blob下载成csv，"\uFEFF"解决乱码问题
function createCSV() { var res = [ //示例数组 { 'name': 'bob', 'age': '13', 'career': 'student' }, { 'name': 'clare', 'age': '20', 'career': 'engineer'...
2018-11-16 17:24:39
4656
原创 react学习之 todolist制作， es6最新写法
文件结构在todolist文件夹内，划分为三个组件。主组件为todoIndex.js;另外两个为子组件；（react初始化的脚手架为create-react-app，在此基础上进行开发的）主组件代码如下：import React, {Component} from 'react';import ListItem from "./listItem";import Dialog fro
2018-01-24 14:23:14
1533
1
原创 原生js实现倒计时功能，创建元素div插入元素，时间结束替换倒计时功能，移除元素
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> .timer {width: 340px;height: 75px;position: absolute;display: flex;justify-content: sp
2018-01-10 20:25:27
1200
原创 web前端常见框架总结 ui框架+js框架
整理的一些了解的前端市场上主流使用的CSS和JS的框架UI框架：1、lay UI官网地址：http://www.layui.com/简洁明了，返璞归真，包含常用的布局、字体、颜色、动画、轮播、进度条，内置表单、日期选择、模板等。2、amaze UI官网地址：http://amazeui.org/中国首个开源跨屏的H5前端框架，移动优先的原则，包含众多类型免费模板和插件，
2017-11-02 18:27:57
8976
原创 js 鼠标拖拽事件
第一步：获取元素，绑定按下事件var red = document.getElementById('red'); //获取红色泡var mouseOffsetX = 0, mouseOffsetY = 0; //初始定义偏移值var isDrag = false; //是否可拖动red.addEventListener('mousedown', function (e)
2017-10-24 22:53:15
435
原创 JavaScript实现小球运动撞击效果，模仿气泡屏保
Title *{margin:0;padding:0} #main{ margin:0 auto; position:relative; background-color: #fff } #main div{ position:a
2017-10-24 22:32:01
3431
2
转载 css 手风琴菜单效果，图片动画
Title KungFu Panda <img src="http://www.2cto.com/uploadfile/Collfiles/20140225/20140225085908528.jpg" style="width: 630px; height: 315px;
2017-10-16 12:21:26
521
翻译 window下响应键盘按键
Document window.onload=function(){ document.onkeydown=function(event){ var code=event.keyCode; switch(code){ case 87://上 alert("w")
2017-10-12 08:29:32
515
原创 CSS ：after伪类实现圆形蒙板动画，翻转
Document section{ width:90%; margin:100px auto 0; font-size:0; }section a{ display:inline-block; width:30%; position:relative; margin:0 1.6% 3%; overflow:hidden; }section img
2017-10-11 15:42:55
1515
原创 CSS 分隔线 中间带文字 分隔符
HTML部分： 最近常用路线 CSS部分：.order { height: 60px; line-height: 60px; text-align: center;}.order .line { display: inline-block; width: 35%; bo
2017-10-08 14:46:02
9533
原创 HTML CSS +js 实现tab选项卡，自动轮换
Tab-选项切换 *{ margin: 0; padding: 0; } .container{ width: 500px; height: 180px; margin: 20px auto; border: 1px solid red; } .header{ width: 500px; height: 40px; /*bo
2017-10-06 14:28:06
1074
原创 css 常见页面布局之圣杯布局（margin负值法）
Document *{ margin: 0; padding: 0; } #container{ width: 100%; height: 100px; background-color: darkred;
2017-09-30 20:24:08
815
原创 http和https的区别
HTTP 和 HTTPS 的不同之处HTTP 的 URL 以 http:// 开头，而 HTTPS 的 URL 以 https:// 开头HTTP 是不安全的，而 HTTPS 是安全的HTTP 标准端口是 80 ，而 HTTPS 的标准端口是 443在 OSI 网络模型中，HTTP 工作于应用层，而 HTTPS 工作在传输层HTTP 无需加密，而 HTTPS 对传输的数
2017-09-28 20:15:17
299
原创 cookie 和 session 的区别localstorage
localstorage 、cookie 和session 的区别：1、localstorage（本地存储）长时间的保存在本地电脑中，不同页面之间都能互相读取本地存储的数据；session（会话存储）只限于当前页面，当页面关闭了，数据也就随之清空；两者皆以字符串形式保存。cookie是存储在用户本地终端的经过加密的数据，一般用来判断用户是否登录过网站。清除cookie的方法是设置过
2017-09-28 17:18:58
522
原创 javascript 中arguments、call、apply、bind、callee、caller属性的简单理解
//JS arguments的几种情况(函数被调用时才会被创建，否则为null) //1、访问参数的个数 function test() { alert(arguments.length) } test("hehe","jsjs"); //2 test(); //0 test(110); //1 //2、访问参数
2017-09-28 14:06:10
239
原创 js 预解析 简单常见情况与个人理解
定义：js预解析就是在代码执行之前，先在相应环境中寻找var和function，一个是声明变量，一个是声明函数，会把声明提前，赋值情况不变。比如 var a = 100; js解析器会把var a;提到前面，原来的则变为a=100;位置不变；function也一样，然后在一行一行的执行代码。第一种情况：（先执行，在定义）alert(a); //function a(){ alert('666
2017-09-27 16:05:45
316
原创 前端模块化开发 CMD规范 sea.js
Hello Sea.js //如果只有一个模块，则可以写为 //用来进行配置的方法： seajs.config({ //别名配置 alias: { "jquery": "jquery-debug.js", "json":"gallery.json" },
2017-09-26 21:52:29
491
原创 前端性能优化常用方法
网页：1、减少http请求2、避免页面跳转3、延迟加载、缓存ajax样式：1、避免css表达式2、用@link代替@import3、样式表置顶图片：1、CSS sprite雪碧图2、不在HTML中缩放图片3、使用小而且可缓存的iconJavaScript：1、脚本沉底2、使用外部js和css3、减少DOM操作4、精简去重最后：可参考Yahoo前端性能优化的35条军规
2017-09-24 13:19:52
250
原创 js 斐波那契数列 汉诺塔 阶乘递归常见小算法
//斐波那契数列 1,1,2,3,5,8,13,21,34....function fun(n) { if (n <= 0) { return 0 } if (n <= 2) { return 1 } return fun(n - 1) + fun(n - 2) //fun(4)+fun(3) //fun(
2017-09-24 11:06:47
884
原创 JavaScript正则表达式 匹配邮箱、手机号、日期、用户名、密码、身份证等
/^(([1-9]\d?)|100)$/.test('22') //true
2017-09-22 21:20:14
504
原创 js 快速数组排序 Array sort()排序算法 splice()
//数组快速排序算法，参数为数组var quick = function (array) { if (array.length <= 1) { return array; } var mid = Math.floor(array.length / 2); //选取中点值为基准 var midValue = array.splice(mid, 1)
2017-09-22 16:12:41
1182
原创 js 闭包常见的两种情况的简单解析
//闭包两种情况 1：函数作为返回值function fn() { var max =10; return function bar(x) { if(x > max){ console.log(x) }else{ console.log(666) } }}var f1=fn(
2017-09-21 21:07:39
399
原创 关于js函数中this的一点理解
//关于this的问题 第一个情况： function Foo() { this.name=10; this.age=100; console.log(this) //{name:10, age:100} }// var p=new Foo(); new 一个对象，this指的就是即将new出来的对象// Fo
2017-09-21 21:01:17
1503
原创 原生js封装好的动画函数+jQuery函数animate
jQuery方法：$(function () { $("#move a").mouseenter(function () { $(this).find('i').animate({top: '25px', opacity: '30'}, 300, function () { $(this).css({width: "30px"}); $(this).animate({top: '0', opacity: '10'}, 200)
2017-09-20 12:59:27
2019
原创 js 获取当前时间输出并刷新date
当前系统时间 *{ margin: 0; padding: 0; } #show{ width: 350px; height: 100px; background-color: #0d88c1; m
2017-09-20 12:53:19
1437
原创 CSS getStyle 获取元素的样式，解决offSet+样式所产生的bug
//封装好的函数，获取样式style(解决offset样式的bug)function getStyle(obj, attr) { if (obj.currentStyle) { //IE浏览器 return obj.currentStyle[attr] } else { //
2017-09-20 09:51:57
611
原创 @media 媒体查询 479尺寸下一般手机的设置
/*媒体查询，根据宽度改变根元素的大小*/@media screen and (min-width:1200px){ html{ font-size: 22px;!important; }}@media screen and (min-width: 960px) and (max-width: 1199px){ html{ font-s
2017-09-18 09:36:31
1423
原创 vue.js 学习笔记 制作简单的todo list
//只粘贴了部分代码 这是其中一个component下面的一个组件 {{message}} {{item.value}} go Bar // 引入store来进行存储itms import store from '@/router/store' export
2017-09-17 19:48:44
261
原创 css @media rem+百分比布局 响应式布局之媒体查询
@media screen and (min-width:320px){ html{ font-size: 5px; !important; }}@media screen and (min-width:480px){ html{ font-size: 10px; !important; }}@media screen and
2017-09-15 10:52:37
3481
原创 css 炫酷鎏金字体，颜色渐变
.top>div p{ overflow: hidden; //超出部分隐藏 font-size: 1.2rem; //大小 font-style: oblique; //倾斜 text-align: left; line-height: 3rem; //垂直居中 background-image: -webkit-linear-gra
2017-09-15 10:17:32
7215
原创 js时间转换 将获取的时间转换标准时间 像12:20:36形式
function show(hours,minutes,seconds) { var Time=4600; //获取的时间，一般是动态的时间 这里的单位是秒， // 如果是毫秒，除以1000再代入下面即可 var seconds,minutes,hours,str; //初定义时间变量 hours
2017-09-12 16:19:15
832
原创 js继承 原型链+构造函数+组合继承法
//继承方法之原型链 function A() { //创建一个原型对象A，有属性和方法 this.judge=true; } A.prototype.value=function () { return this.judge }; function B() { //创建B，属性和A不相同 this
2017-09-12 14:40:41
401
原创 javascript 正则表达式+表单验证 结合运用简单例子
以下为js代码，HTML和css未粘贴~ 主要原理为：判断input输入框获得焦点、按键移开、失去焦点三种情况window.onload=function () { var Ps=document.getElementsByTagName('p'); var nameMsg=Ps[0]; //第一次输入用户名的提醒 var psdMsg1=Ps[1];
2017-09-12 09:15:25
642
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人