JS
关注
分享
扫一扫
cm_xuan77
这个作者很懒，什么都没留下…
展开
-
JS倒计时
JS倒计时<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/tools.js"></script> </head> <body> <div></div> <script原创 2017-10-26 13:42:11 · 169 阅读 · 0 评论 -
数组方法及其原码实现
var personArr = [ {name:'邓哥',src:'./img/1.jpg',des:'颈椎不好',sex:'f'}, {name:'成哥',src:'./img/2.jpg',des:'说',sex:'m'}, {name:'冰洁',src:'./img/3.jpg',des:'美',sex:'f'}, {name:'胖子',src:'./...原创 2018-04-12 14:22:03 · 440 阅读 · 0 评论 -
Jquery中改变this的指向 $.proxy()
介绍以下这个工具方法的使用： 先介绍一下工具方法和实话化方法的区别： 1. 工具方法是定义在jQuery函数上的//定义在jQuery的函数上的/*function jQuery()jQuery.type = function(){}*/2.实例化方法是定义在jQuery原型上的下面开始进入正题：function show(){ console.log(t...原创 2018-04-18 10:56:20 · 2520 阅读 · 0 评论 -
封装自己的alert toast
class Toast { constructor() {} // 传入的一个参数可以是一个字符串或者一个对象 default(org, callback) { let config = { text: '', tit: '提示', type: 'toast', timeOut: 1800 } if (callb...原创 2018-08-29 19:37:54 · 521 阅读 · 0 评论 -
移动端 页面适配 原生js及lib-flexible 插件
1.js 原生;(function(win, doc) { change() function change() { var remSize = window.innerWidth / 7.5 || 50 /*设计稿是以width = 750px 为基准的*/ document.querySelector('html').style.fontSize = (remSize &...原创 2018-10-31 17:28:12 · 923 阅读 · 0 评论 -
淘宝 生成 图片二维码分享
最近公司需求提出仿淘宝分享生成一张含有图片/二维码/文字的图片实现方法：采用的canvas 插入图片和生成图片的功能生成二维码采用的是QRCode 插件实现效果：实现步骤：我是在vue环境中实现的1.引入qrcode1安装插件 npm install qrcode2、在main.js中引入import QRCode from 'qrcode' //定义生成二维码组件...原创 2018-11-22 15:23:43 · 3681 阅读 · 1 评论 -
canvas 绘制柱状图表
复制代码即可用<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ca转载 2018-11-22 16:51:51 · 886 阅读 · 0 评论 -
判断原始值和引用值 及深度克隆
判断属性是原始值还是引用值原始值：String Number fucntion Boolean undefined引用值：Object Array Null判断方法 typeOf //引用值 object如果是引用值判断是对象还是数组判断方法：2.1 construct[].construct == Array / Object 弊端此方法容易被改写 l...原创 2019-02-11 14:16:46 · 301 阅读 · 0 评论 -
js物体运动
1.物体匀速运动let div = document.getElementsByTagName('div')[0], btns = document.getElementsByTagName('button') btns[0].onclick = function() { console.log(div) startMove(div,...原创 2019-02-11 15:14:07 · 415 阅读 · 2 评论 -
VUE 组件化
组件化与模块化的区别按照网站的功能或者性能可以分为好几个模块，组件则是某块部分功能，一个模块可以由好多组件组成。比如：一个机器人由手、腿、头、身体组成，手和腿等就是几个模块，而手指头就是组件，这样说更加的形象。创建组件组件其实是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像...转载 2019-02-11 15:15:43 · 222 阅读 · 0 评论 -
判断数据类型
1.typeof 只能检测原始类型，引用类型都是Object 值：string,Boolean,Number,undefined,object,function 其中 Array，null，object -> object2.instanceof 不准确var arr = [1,2,3];arr instanceof Array // truearr instanceof...原创 2018-04-18 10:16:00 · 139 阅读 · 0 评论 -
js实现页面数据的筛选
html:<div class="wrapper"> <div class="search"> <input type="text" class = "search_box" placeholder = "请输入用户名"> <p>原创 2018-04-12 14:34:28 · 9193 阅读 · 0 评论 -
深度克隆（deepclone）
var obj1 = { name:'duyi', people:{ cs:'cc', }, student:['jack'],}var obj2 = { name:"tengxu", people:{ teacher1:'jc', teacher2:'wb', teacher3:'dg',...原创 2018-04-11 14:25:45 · 1145 阅读 · 1 评论 -
全选、取消选择、反选、删除
全选、取消选择、反选、删除<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <button>全选</button> <button>取消选择</button> <button>反选</button>原创 2017-10-27 12:38:06 · 509 阅读 · 0 评论 -
六面体魔方转动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> html,body{ height:100%; } *{ margin:0;原创 2017-10-27 15:59:23 · 1084 阅读 · 0 评论 -
js实时获取当前时间
js显示系统当前时间<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="js/tools.js"></script></head><body> <div></div> <script> var原创 2017-10-26 13:50:21 · 463 阅读 · 0 评论 -
遍历对象的属性
for/in可以将在循环体中遍历对象中可枚举的属性（包括继承和自有属性），对象继承的内置方法不可枚举。var p ={name:"jack",age:23,sex:"boy"} var o = {sex:"girl",hobby:"html"}1.将p可枚举的属性复制到o中，并且覆盖o中相同的属性—————————-function extend(o,p){ for(prop i原创 2017-12-10 17:32:51 · 760 阅读 · 0 评论 -
JavaScript 中的delete
《-------delete------只能删除自有属性，不能删除继承属性（要删除继承属性必须从定义属性的原型对象上删除它，并且会影响所有继承自这个原型的对象）1.属性删除：删除自身的属性，不影响其他人； 2.对象从原型上继承的属性不可以被删除 3.对象从原型上继承的属性，只能从原型上删除，并且会影响到所有继承该原型的对象原创 2017-12-10 17:38:23 · 387 阅读 · 0 评论 -
进度条（一）
用定时器进行控制进度条：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定时器进度条</title> <script src="js/jquery-1.7.2.min.js"></script> <style> html,body{ he原创 2017-11-23 17:57:58 · 257 阅读 · 0 评论 -
进度条（二）
根据页面加载情况： Document html,body{ height:100%; } *{ margin:0; padding:0; } img{原创 2017-11-23 17:59:31 · 203 阅读 · 0 评论 -
原生js实现轮播图，兼容IE
html部分：<div class ="wrapper"> <ul class="sliderPage"> <li> <img src ="./image/1.png"> </li> <li> <img src ="./image/2.png"> </li> <li>原创 2018-04-10 16:57:51 · 1034 阅读 · 0 评论 -
原生JS轮播图插件（兼容IE）
HTMLElement.prototype.creatTurnPage = function (ImageArray) { //====生成dom元素============== var DocUl = '<ul class ="sliderPage">' doated = '<div class ="sliderIndex">...原创 2018-04-11 10:04:45 · 1753 阅读 · 0 评论 -
模拟jquery原理
;(function() { function JQuery(selector) { return new JQuery.prototype.init(selector) } JQuery.prototype.init = function(selector) { let dom = {} if (selector.indexOf('....原创 2019-02-12 15:54:08 · 170 阅读 · 0 评论