javascript
文章平均质量分 65
jiaweimin123
前端小小小菜鸟,学习技术中。。。
展开
-
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 · 3870 阅读 · 5 评论 -
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 · 1096 阅读 · 0 评论 -
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 · 1204 阅读 · 0 评论 -
原生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 · 2036 阅读 · 0 评论 -
关于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 · 1519 阅读 · 0 评论 -
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 · 423 阅读 · 0 评论 -
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 · 309 阅读 · 0 评论 -
cookie 和 session 的区别localstorage
localstorage 、cookie 和session 的区别:1、localstorage(本地存储)长时间的保存在本地电脑中,不同页面之间都能互相读取本地存储的数据;session(会话存储)只限于当前页面,当页面关闭了,数据也就随之清空;两者皆以字符串形式保存。cookie是存储在用户本地终端的经过加密的数据,一般用来判断用户是否登录过网站。清除cookie的方法是设置过原创 2017-09-28 17:18:58 · 538 阅读 · 0 评论 -
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 · 846 阅读 · 0 评论 -
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 · 537 阅读 · 0 评论 -
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 · 3473 阅读 · 2 评论 -
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 · 3000 阅读 · 0 评论 -
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 · 1766 阅读 · 0 评论 -
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 · 1259 阅读 · 0 评论 -
前端实现创建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 · 4699 阅读 · 0 评论 -
原生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 · 1227 阅读 · 0 评论 -
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 · 1553 阅读 · 1 评论 -
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 · 9043 阅读 · 0 评论 -
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 · 460 阅读 · 0 评论 -
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 · 409 阅读 · 0 评论 -
js 获取当前时间输出并刷新date
当前系统时间 *{ margin: 0; padding: 0; } #show{ width: 350px; height: 100px; background-color: #0d88c1; m原创 2017-09-20 12:53:19 · 1446 阅读 · 0 评论 -
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 · 631 阅读 · 0 评论 -
JavaScript正则表达式 匹配邮箱、手机号、日期、用户名、密码、身份证等
/^(([1-9]\d?)|100)$/.test('22') //true原创 2017-09-22 21:20:14 · 539 阅读 · 0 评论 -
js 闭包函数例子2个
匿名函数式: var func = (function () { var sum = 0; return function (num) { sum += num; console.log(sum); } })(); func(5)原创 2017-08-24 13:43:16 · 399 阅读 · 0 评论 -
js Math.random() 随机数 1-10之间
var num = Math.random();alert(num); //所得到的的值是0-1之间的 随机数,每次刷新都不同var num=Math.floor(Math.random()*10+1);alert(num); //所得到的的是1-10之间的随机数,每次刷新都不同原创 2017-08-23 12:57:16 · 106674 阅读 · 9 评论 -
js 数组大小排序
js 数组大小排序 从小到大排序原创 2017-08-21 21:50:19 · 1999 阅读 · 0 评论 -
js 创建对象的几种方式
1、工厂模式function createPerson(name, age, job){var o = new Object();o.name = name;o.age = age;o.job = job;o.sayName = function(){alert(this.name);};return o;}var person1 = createPerson("Nicho翻译 2017-08-22 16:05:56 · 187 阅读 · 0 评论 -
js 函数表达式-递归 小例子
经典递归阶乘函数 function fun(num) { if(num<=1){ return 1; }else{ return num*fun(num-1) (可用num*arguments.callee(num-1)来替换) } } alert(fun(5)); //120原创 2017-08-25 11:03:51 · 325 阅读 · 0 评论 -
js 继承 三种常用方法 原型链-借用构造函数-组合式继承
function SuperType() { this.property = true; } SuperType.prototype.getSuperValue = function() { return this.property; } function subType() { this.property = fal翻译 2017-08-23 15:26:09 · 345 阅读 · 0 评论 -
闭包-小题目
函数闭包面试题目原创 2017-08-22 10:24:25 · 213 阅读 · 0 评论 -
运用jQuery+jplayer 制作简洁音乐播放器
使用jplayer插件,运用jQuery和JavaScript制作简易的音乐播放器!原创 2017-08-30 09:01:24 · 1171 阅读 · 0 评论 -
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 · 898 阅读 · 0 评论 -
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 · 258 阅读 · 0 评论 -
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 · 656 阅读 · 0 评论 -
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 · 328 阅读 · 0 评论 -
前端模块化开发 CMD规范 sea.js
Hello Sea.js //如果只有一个模块,则可以写为 //用来进行配置的方法: seajs.config({ //别名配置 alias: { "jquery": "jquery-debug.js", "json":"gallery.json" },原创 2017-09-26 21:52:29 · 507 阅读 · 0 评论 -
电商网站必备 简单版轮播图库
html部分 css部分/*包裹轮播图的div*/#container{ width: 800px; height:440px; overflow: hidden; display: inline-block; p原创 2017-09-10 08:37:48 · 1337 阅读 · 0 评论 -
jQuery AJAX XMLHttpRequest方法 请求数据
demo:我是新标题 我是新的段落将请求来的数据demo添加到指定的div中$("#div").load("demo")AJAX请求实例function showHint(str){var xmlhttp;if (str.length==0) //如果未输入内容,显示为空 { document.getElementById("txtH原创 2017-09-08 09:29:39 · 377 阅读 · 0 评论 -
Bootstrap carousel轮播图插件 简洁版
HTML部分 (只需修改图片路径,增删图片数量都可,尺寸统一)翻译 2017-09-15 19:39:48 · 1225 阅读 · 1 评论 -
前端性能优化常用方法
网页: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 · 266 阅读 · 0 评论