kumayato-CSDN博客

原创 JS格式化时间

'use strict';// 对Date的扩展，将 Date 转化为指定格式的String// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)// 例子：// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==

2017-07-06 15:11:08 252

原创手写一个jsonp

(function (window,document) { "use strict"; var jsonp = function (url,data,callback) { // 1.将传入的data数据转化为url字符串形式 // {id:1,name:'zhangsan'} => id=1&name=zhangsan var data

2017-06-13 09:46:52 6360 2

原创对于JavaScript中原型链的理解

先理解两条概念JS在创建对象（不论是普通对象还是函数对象）的时候，都有一个叫做_ proto _的内置属性，用于指向创建它的对象的原型对象prototype。原型对象prototype也是一个对象，因此它也有_ proto _ 属性。图片自己画了一张图，画的比较抽象可能看不懂，下面我会根据图示一点点的来谈谈自己的理解。1. JS内置对象是Function对象的一个实例。我们熟知的js

2017-05-30 16:46:36 375

原创函数的公有属性和私有属性

公有属性：函数内部定义的属性，但是在对象实例化后也可以调用。私有属性：只能在函数内部使用。好处就是安全，就类似闭包中的函数一样，减少污染。function Person(name){ //私有属性，只能在对象构造函数内部使用 var className = "用户对象"; //公有属性,在对象实例化后调用 this.name = name; //私有方法

2017-05-29 14:48:07 1995

原创 HTML5 <ruby>注释标签

ruby可以作注释标签，内部有rp和rt标签。<ruby> 标记定义注释或音标。<rp>　告诉那些不支持ruby元素的浏览器该如何显示。<rt> 标记定义对ruby注释的内容文本。代码如下，来给一句日语做个小注释：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ruby注释标签</

2017-05-29 14:34:00 1781

原创 JS/jQuery判断数据类型的几种方式

JavaScript提供判断数据类型的一些方法：方法一：typeof；方法二：tostring.call();方法三：Instanceof 和 constructor；方法四：hasOwnProperty；<script> var str = 'aaaa'; var num = 123; var fun = function () {}; var arr = []

2017-05-29 14:27:49 3491

原创对于面对对象和prototype的理解

面向过程和面向对象面向过程和面向对象的区别面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候一个一个依次调用就可以了。就是使用函数将一个大的功能分成很多小功能，每个功能称之为一个过程，这就是面向过程编程。面向对象是把在解决问题中构成问题的事项分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为了描叙某个事物在整个解决问题的步骤中的行为。面向对象的优点单

2017-05-29 14:19:32 423

原创内存

引用类型和值类型哪些是引用类型，哪些是值类型？undefined, number, string, boolean属于值类型，不是对象。函数、数组、对象、null 都是对象。他们都是引用类型。<script> console.log(typeof(x)); // undefined 值类型 console.log(typeof(10)); // num

2017-05-29 13:36:06 223

原创屏幕滚动事件兼容性

function scroll() { if (window.pageYOffset != null) // ie9+ 和其他浏览器 { return { left: window.pageXOffset, top: window.pageYOffset

2017-05-21 14:52:24 335

原创 JS封装一个缓动运动框架

// 得到css样式function getStyle(obj,attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; // ie浏览器 } else { return window.getComputedStyle(obj,null)[attr]; // 其他浏览器 }}

2017-05-20 18:28:45 254

原创 JS得到CSS的样式

obj.style.attr在js中得到css的样式一般可以用obj.style.attr的形式来获取。 obj 需要得到样式的目标节点。attr 要得到的样式属性。例如 obj.style.left 得到obj的left的值。这个方法有一个缺点，样式的写法必须是行内式才可以得到。例如：<div style="left:50px"></div>而我们工作最多用的是内嵌式或者

2017-05-20 16:45:31 458

原创 oninput/ onpropertychange仿淘宝搜索框

oninput 大部分浏览器支持检测用户表单输入内容onpropertychange ie678 检测用户表单输入内容<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .search-1 { width

2017-05-11 17:40:56 289

原创 JS实现隔行变色

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box { width: 300px; } li { line-height: 30px;

2017-05-11 17:29:04 450

原创 JS实现全选和反选

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <script> window.onload = function () { var btns = document.getElementById('top').children;

2017-05-11 17:26:01 284

原创 JS实现tab栏的切换

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin: 0px;padding: 0px;} #box{ margin: 50px auto; width:40

2017-05-11 17:22:14 504

原创 scrollTop的兼容问题

方法一// 获取scrolltop function getScrollTop() { var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; return scrollTop; }// 设置scrolltop

2017-05-11 16:21:23 439

原创 class类的封装

目的：解决了浏览器对document.getElementsByClassName()的兼容问题。思维导图：代码：<!DOCTYPE html><head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload = function(){ fun

2017-05-11 15:16:43 780

原创 switch语句查询水果价格

语法switch(n){case 1: 执行代码块 1 break;case 2: 执行代码块 2 break;default: 没有匹配的case时默认执行的代码}demo<html><head> <meta charset="UTF-8"> <title>Document</title> <script> window.on

2017-05-11 14:21:01 5255

原创 JS操作dom节点及兼容性

父节点 parentNode获取到的是自己的亲父亲（直属关系）// 点击孩子隐藏父亲<script> window.onload = function(){ var child = document.getElementById("child"); x.onclick = function(){ this.parentNode.s

2017-05-11 13:09:37 1249

原创 <picture>标签实现响应式图片

一个picture标签里面可以包含多个source标签，每个source标签里可以使用媒体查询和设置srcset属性，浏览器会遍历picture标签中的每个source标签，根据当下的情况，找到最合适的srcset,然后来设置img标签的src属性。<div class="slider-img"> <picture> <source srcset="img/ad001-l.

2017-05-06 11:17:38 499

原创 webpack学习笔记

今天在慕课网里学习了webpack深入与实战的课程，收获很多。因为现在webpack已经是2.0的版本了，中间入了一些坑不过都一一解决了。具体的可以查看webpake2.0的中文文档。webpack2.0的中文文档：感谢大牛们的无私奉献，我找到工作一定给你们赞助。以下是学习笔记的整合。

2017-04-26 23:09:30 1193

kumayato的博客