JavaScript
前端向朔
学习-撕裂-成长-变强
展开
-
WebStrom 编辑器修改文件默认编码
WebStrom是一款强大的IDE,特别受前端工程师的喜爱。最近在写Code的时候,发现文件总是默认“GBK”编码格式,虽然代码能正常运行,但是一些中文注释在浏览器调试下查看全都乱码了,很是烦恼。这种默认编码格式应该很容易设置的,可以找老半天也没找到,在网上也没有看到很好的说明。最后解决的时候还是想要分享给大家,让大家节约时间去学习更多的知识。一般有两种方式,一是直接修改文件编码格式,而是修改文件默原创 2016-06-01 18:04:46 · 1559 阅读 · 0 评论 -
JS参数理解(基本类型和引用类型)
JS参数理解用过JS的同学肯定知道,JavaScript中,函数的参数简直就是”怪胎“! 1、不规定参数个数 2、不规定参数类型 3、参数随便传。。。为什么会这样呢?Java里面可是靠参数个数,参数类型来实现重载的啊,JS中怎么抛弃了这样一个设计思路呢?JS的参数到底是何方神圣。。。让我们一探究竟!原来,在ECMAScript中,参数在内部是用一个数组来表示的,函数接收到的始终是这个数组,而数原创 2016-06-13 17:48:54 · 1614 阅读 · 0 评论 -
Array比较好用的属性和方法
1.Array.isArray() 方法用来判断某个值是否为Array。如果是,则返回 true,否则返回 false。2.concat() 方法将传入的数组或非数组值与原数组合并,组成一个新的数组并返回。非常实用于“上拉加载 ”的实现,可以将新请求到的数据与原数据合并,不会造成页面的闪动。let arr3 = arr1.concat(arr2);3.forEach() 方法对数组的每个元素执行一次原创 2017-02-28 21:11:18 · 626 阅读 · 0 评论 -
Swiper自定义分页器
Swiper自定义分页最终实现效果图:HTML DEMO(官网例子)<link rel="stylesheet" href="path/to/swiper.min.css"><div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide">Slide 1</div>原创 2017-02-28 20:34:21 · 47355 阅读 · 20 评论 -
JSON必知必会
第一章 什么是JSON1.JSON是一种数据交换格式,类似的还有XML2.JSON不是一种编程语言3.JSON是基于JavaScript的对象字面量的表示法第二章 JSON语法1.字面量,如下{ "name": "向朔", "age": 25}关键点:采用“键值对”的表现方式,对象的属性必须加双引号,不需要分号,最后一项也不需要逗号,值可以是字符串、数字、布尔值、null、原创 2017-03-08 20:00:32 · 748 阅读 · 0 评论 -
如何计算数组中某项的个数
如何计算数组中某项的个数<script type="text/javascript"> //统计一个数组中有多少个指定的数据项 var arr1= [12, 5, 8, 130, 44,5,51,5]; //方法一: function count(arr,num){ var total = 0; for (var i = arr.length - 1;原创 2017-03-09 21:31:18 · 9972 阅读 · 0 评论 -
简易拖动窗口-面向对象封装
HTML<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>0305_拖动窗口</title> <link rel="stylesheet" type="text/css" href="css/drag.css" /> <style>原创 2017-03-06 23:54:09 · 634 阅读 · 0 评论 -
Canvas星空效果(JS面向对象)
概述更多Canvas实例可以看GitHub,不定时更新:https://github.com/xiangshuo1992/canvas-demo 这个Demo主要有以下几点可以讨论: 1.HTML5 canvas的基础API,如 context.beginPath(); 2.获取屏幕大小,并响应窗口大小变化 3.JS面向对象先看效果 Canvas星空效果See the Pe...原创 2018-04-17 17:58:00 · 7472 阅读 · 2 评论 -
单屏(全屏)适配解决方案(jQuery插件)
背景在平时的web开发过程中,经常会要实现单屏或者叫全屏的效果,同时要满足设备适配要求,虽然一些常见的插件能实现一定的效果,但是如果需要灵活运用的话还是会受到很多限制,在不断的实践过程中,我们梳理了一套全屏适配解决方案,能兼容IE8+,下面我们来详细了解。案例分析案例一: 可以看到图中元素有几类, 1.中间主体内容元素 2.背景图片 3.背景图片上面,主体内容下面的粒子效果...原创 2018-05-17 13:27:56 · 4552 阅读 · 0 评论 -
Preload图片预加载(jQuery插件)
背景我们在做页面的时候,从用户体验的角度出发,肯定是希望用户以最快的速度看到完整的页面信息,但在实际情况中经常会遇到些问题。比如受网速影响,页面加载素材的时间比较长,页面会出现短时间的错乱或者闪屏;或者页面素材比较多、比较大,需要一定的加载时间,特别有时候的活动页面,我们一般会把首屏做的更多多样化或者传达比较丰富的氛围的时候,我们的首屏素材上都会比较大,有时候也会给元素加上动画来传达信...原创 2018-04-30 00:21:58 · 7197 阅读 · 0 评论 -
ES6 Set和Map数据结构(可转为数组)
一:Set基本用法ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。(不包括空对象)Set 本身是一个构造函数,用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) {console.log(i);}...转载 2018-11-07 21:58:02 · 3980 阅读 · 0 评论 -
分享到新浪/腾讯/人人等
我们经常会有分享到大网站的需求来满足用户吸引。常用的有分享到新浪/腾讯/人人网等。那么如何实现这些分享呢?今天就来探究一下,,首先了解一下第三方登录。1.常用的第三方登陆我们想要在自己的网站上提供第三方平台登录,类似这样的: 这样的需求我们是要到腾讯QQ或者新浪开发者平台申请appkey权限才能接入的第三方平台的用户数据,获取用户的昵称,头像,性别,id等信息,可以写入数据库作为本站登录的一种方式原创 2016-10-25 22:59:57 · 2175 阅读 · 0 评论 -
JS Cookie当天24点过期,chrome时差问题
昨天遇到一个问题,要实现一个背景透明的效果,用CSS3用rgba()就能实现,即background: rgba(0,0,0,.5);但是要兼容到IE8,就发现没有透明效果,因为IE8不支持rgba()函数。下面我们总结一下rgba()函数的含义。rgba的含义,r代表red,g代表green,b代表blue,a代表透明度。红绿蓝是三原色,所有颜色都可以由这三种颜色拼合而成。比如rgba(0,0,0原创 2016-09-25 11:21:44 · 7159 阅读 · 0 评论 -
Back Top ①(回到顶部)原生JS实现
button<a href="javaScript:void(0);" id="btn"></a>style<style> #btn { display: none; width: 40px; height: 40px; position: fixed; right原创 2016-08-13 15:58:30 · 3935 阅读 · 2 评论 -
基于JQuery的messager弹窗组件开发
昨天晚上和今天白天,主要完成了一个弹窗组件开发,在开发的过程中发现自己的问题和整理思路,将自己的想法通过代码实现并最终看到效果,是一个很享受的过程。在本次实践中,我学习到了以前没有注意的小的用法和知识点。当然里面的一些方法也是得到项目组的大神的指导才豁然开朗的,而且有些方法不熟悉,正好通过这次实践巩固一下。下面我将自己完成的思路和完成过程中学到和用到的知识点总结如下: 我们先看下要求吧! 第一原创 2016-06-01 22:33:28 · 3113 阅读 · 0 评论 -
前端学习方法总结
今天做了两件事。分别是学习了bootstrap和AngularJS的API文档,直接看文档。在看之前虽然早就听说了这两门技术,但是一直没有去学习他,今天在学习之后,我发现前端的技术学习是需要一定的学习方法,其实做什么都要方法啦,只是今天在这一块有点感触。我在学习了之后发现其实挺简单的,bootstrap和AngularJS都有一定的共性。 第一:先引入库文件,或者CDN(内容分发网络) 第二:根原创 2016-06-07 23:32:30 · 902 阅读 · 0 评论 -
JS高程-数据类型
今天有个同学过来面试WPF,然后用我的电脑上机,项目组座位的紧张,更别说电脑了,所以我就孤独的到一边去学习了。拿起JS高程,为什么直接看数据类型了呢?首先因为前面都是介绍性文字,直接看第三章,其次刚好看到一篇微信,上面问了一下基本数据类型有哪些?看似简单基础的题,却一下子把我问懵比了,确实搞得挺乱记不清楚了,于是书中找答案。一,基本数据类型有5种 Undefined:只有undefined一个值,原创 2016-06-08 23:39:02 · 925 阅读 · 0 评论 -
JS简易秒表计时器
<html lang="en"><head><meta charset="UTF-8"><title>js计时器</title></head><body><input type="text" value="00:00"><input type="button" value="开始"><input type="button" value="结束"><input type="butto原创 2016-06-06 23:11:19 · 27926 阅读 · 3 评论 -
JS原型理解
说实话,一开始我对prototype和property是分不清的,我说的是单词分不清,不知道他们的意思,在强制自己记忆了一遍之后,我是这么记忆的,type(类型),跟“原型”差不多,所以prototype就是原型了,property就是属性了。没办法啊,对于英语差的不好意思说自己学过英语的人,只能这样记忆了,还好这样也记住了。正文从这里开始吧,说说我对原型模式的理解。 任何一个对象都是有原型的,像原创 2016-06-28 18:16:32 · 886 阅读 · 0 评论 -
JS作用域
在JS作用域中,首先要知道“执行环境”,执行环境就相当于一个容器,它关联了变量对象,在执行环境中,所有的变量和函数都保存在这个变量对象中,我们外部编写的代码是访问不到的,解析器会在后台使用。当代码执行的时候,也就是在执行环境中会创建变量的作用域链,这个作用域链就表明了变量的作用域。作用域链的最前端是当前执行的代码所在环境的变量对象。解析器通过标识符对代码进行解析,这个过程是一个搜索作用域链的过程,从原创 2016-06-14 12:44:37 · 662 阅读 · 0 评论 -
JS(高程)最佳实践
在阅读js高程最佳实践章节,将自己感触比较深的点记录下来,也就是自已以前没注意或者不知道的知识点。一、什么是可维护的代码?可理解性直观性可适应性可扩展性可调式性二、代码约定1.函数和方法都要加注释,说明这个函数方法的作用目的,参数,返回值。如果有算法或者逻辑性比较强的地方需要用步骤文字说明清楚。 2.变量和函数名,要尽量语义化,长点没关系,因为在后面产品部署上线的时候会进行压缩处理,如原创 2016-06-22 17:42:27 · 1630 阅读 · 0 评论 -
输入框美化(placeholder)
本文主要介绍针对输入框的美化 为了兼容ie7+,不能直接使用H5的属性placeholder,但是又需要实现输入提示效果,所以总结了以下两种方式。最终实现效果示例: 方式一: 通过添加p标签,并绑定js事件来模拟输入框光标进入隐藏效果。<div class="foo-input foo-user"> <input class="input-text" type="text" valu原创 2016-08-16 23:28:19 · 3739 阅读 · 0 评论 -
字符串拼接及拖拽(js方法扩展code)
(function ($) { $.extend({ //字符串拼接 //如:ex_formatStr('<div class="{0}">{1}</div>', a, b) ex_formatStr: function () { if (arguments.length === 0) return null;原创 2016-08-07 12:54:13 · 606 阅读 · 0 评论 -
JS引入命名空间(并使用字符串拼接和拖拽)
(function(){ //引入命名空间 /** * 弹窗 * @title {string} 弹窗类型 * @msg {string} 弹窗信息 * @icon {string} 弹窗提示图标 * @fn {function} 处理函数 */ $.messager=原创 2016-08-07 13:04:20 · 724 阅读 · 0 评论 -
弹窗组件
需求说明: 1,点击页面按钮,弹出窗口; 2,要有半透明背景遮罩; 3,弹出窗口圆角。窗口半透明,但内容不透明;带阴影; 4,窗口可拖动; 5,拖动停止之后,滚动页面时窗口位置不动。CSS呼吸效果.popUpb_b_s{ display:block;width:33px;padding:20px;margi原创 2016-08-07 18:40:11 · 1107 阅读 · 0 评论 -
帧动画的多种实现方式与性能对比
概述前面我分享了《Web动画形式》,各种动画形式都可以制作出一种类型的动画,那就是帧动画,也叫序列帧动画,定格动画,逐帧动画等,这里我们统一用帧动画来表述,接下来我们就来看看帧动画有哪些打开方式吧。 (高兴的小伙子)应用场景帧动画一般用来实现稍微复杂一点的动画效果,同时希望动画更细腻,设计师更自由的发挥。他可以定义到每一个时间刻度上的展现内容,我们一般用帧动画来做页面的Loadi...原创 2018-07-11 10:42:47 · 12218 阅读 · 4 评论