js
理个以哈呦
这个作者很懒,什么都没留下…
展开
-
js 实现观察者模式
// js创建观察者,将代码放在必报之中,当前页面接在之后就进行执行 let Observer = (function () { let _message = {}; // 存储消息的队列 return { regist: function (type, fn) { // 进行消息注册 注册的类型、操作事件 if (typeof _m原创 2021-02-19 15:08:21 · 466 阅读 · 0 评论 -
canvas 绘制日历
/// index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> bo原创 2020-11-11 15:06:23 · 568 阅读 · 0 评论 -
js vue 根据城市名称 按A-Z进行排序展示
城市json文件引用地址:https://blog.csdn.net/u012339794/article/details/43483947window.CITYS = [ {"label": "北京Beijing010", "name": "北京", "pinyin": "Beijing", "zip": "010"}, {"label": "重庆Chongqing023", "name": "重庆", "pinyin": "Chongqing", "zip": "023"},原创 2020-07-10 15:12:37 · 3601 阅读 · 0 评论 -
基于Vue、element ui 来进行第三方UI库开发、打包、发布,站点发布支持markmod语法
一、基于Vue、element ui 来进行第三方UI库开发、打包、发布,站点发布支持markmod语法二、目录结构介绍 . ├── build // 构建信息脚本 │ └── bin ├── dist // 前台API站点 │ ├── js │ └── static ├── example // 前台API站点源码 │ └── src ├── lib // 打包UI库文件 │ └── theme-chalk原创 2020-06-22 11:33:40 · 543 阅读 · 1 评论 -
storybook+Vue
storybook 实例功能介绍.storybook/webpack.config.js 可以用来重写 storybook 的默认配置相关插件介绍和使用1. knobs knobs插件提供一个表单控制台,用户可以通过表单控制台来改变组件相关属性,展示不同属性下的组件2.actions actions插件让用户在对组件的操作,可以反应在底部的日志里面3.storysource addon插件可以让你直接在界面上看到当前sotry的源码4.docs addon-d原创 2020-06-22 11:06:37 · 1196 阅读 · 0 评论 -
v-text v-html {{}} 三者之间的区别
<template> <transition name="el-notification-fade"> <div :class="['el-notification', customClass, horizontalClass]" v-show="visible" :style="positionStyle" ...原创 2019-03-21 15:19:10 · 2936 阅读 · 0 评论 -
js使用技巧
js中indexOf 介绍indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。这里注意是首次出现。demo:var arry = ['apple', 'apple', 'dog', 'dog'];console.log(arry.indexOf('apple')); //0console.log(arry.indexOf('dog')); //2可以利用inde原创 2017-05-13 13:33:35 · 326 阅读 · 0 评论 -
js去除数组重复元素
/** 去除数组元素的,过程就是将arr[]中的元素赋值到result[]元素,在赋值的过程中,需要 判断result[]中的元素是否和arr[],如果相等不进行赋值直接break,如果不相同进行赋值。**//**js代码实现**/function unique(arr) { var result = [],isRep; for (var i = 0; i <= arr.原创 2016-02-15 16:28:50 · 319 阅读 · 0 评论 -
angular $provide factory constant value
angular 创建服务的四种方式 第一种 $provide 内置服务创建 angular.module('app', [], function($provide) { $provide.factory('$kk', function() { var obj = { name:原创 2017-06-23 17:12:15 · 485 阅读 · 0 评论 -
实现选中文字添加连接
/**js实现选中文字添加连接**/ function editFont(idNode,href,addBtn){ var selectionStart, selectionEnd; var textarea = document.getElementById(idNode); document.onkeyup = document.onmouseup = fu原创 2017-09-19 13:52:53 · 872 阅读 · 0 评论 -
js 批量从缓存中读取数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id=&q原创 2018-10-11 16:14:58 · 2173 阅读 · 0 评论 -
js秒杀倒计时
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><body onload="miaosha();"><p cl原创 2018-10-11 16:18:24 · 3947 阅读 · 0 评论 -
foreach和for的区别
<?php$fruit=array('苹果','香蕉','菠萝');foreach($fruit as $key=>$value){ echo '<br>第'.$key.'值是:'.$value;}?><?php$fruit=array('苹果','香蕉','菠萝');for($index=0; $index<3; $index++){ echo '<br>数组第'.$i原创 2017-04-13 20:06:39 · 962 阅读 · 0 评论 -
按键检测是否输入数字
$("#tzje").keyup(function(event){ var k = event.keyCode; //48-57是大键盘的数字键,96-105是小键盘的数字键,8是退格符← if ((k <= 57 && k >= 48) || (k <= 105 && k >= 96) || (k== 8)){ return true; } else {原创 2016-06-22 16:21:35 · 1098 阅读 · 0 评论 -
初始化56个名族下拉选框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>demo</title> <meta name="format-detection" content="telphone=no, email=no"/></head><body> <select name="" id="sel原创 2016-07-05 16:52:00 · 732 阅读 · 0 评论 -
触屏手指滑动计算演示
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>触屏手指滑动计算演示</title></head><body style="font-size:32px;"><div style="width:100%"><h2>触屏手指滑动方向计算演示</h2><div id转载 2016-07-13 16:30:00 · 791 阅读 · 0 评论 -
触屏手指滑动计算演示
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>触屏手指滑动计算演示</title></head><body style="font-size:32px;"><div style="width:100%"><h2>触屏手指滑动方向计算演示</h2><div id转载 2016-07-13 16:29:54 · 1345 阅读 · 0 评论 -
金额与数字转化
//在引用页面,可以采用document.forms[0].field1.value.trim()引用去空格 String.prototype.trim = function(){ return this.replace(/(^/s*)|(/s*$)/g, ""); } //将1,234,567.00转换为1234567.00 function moneyToNumFil转载 2016-06-30 15:36:40 · 249 阅读 · 0 评论 -
js精确计算
/**加法**/function finedAdd(arg1,arg2){ var r1,r2,m; try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}; try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}; m=Math转载 2016-06-30 15:33:37 · 361 阅读 · 0 评论 -
jQuery进行图片预先加载
/** **将图片加载到内存中,在页面任何位置引用的时候,直接从缓存中读取,提升用户的体验,提高网站的流畅度。****/<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="转载 2016-07-11 21:33:36 · 2135 阅读 · 1 评论 -
代码优化
/** for循环中进行代码优化**/优化前:for(var i = 0; i < my_array.length; i++){}//分析每次循环都要计算数组的长度,影响执行效率。优化后:var length = my_array.length;for(var i = 0; i < length; i++){}//分析将数组的长度在循环之前进行赋值,对此循环只进行一次长度的计原创 2016-07-11 20:39:37 · 272 阅读 · 0 评论 -
Vue2.4.0 新增的inheritAttrs,attrs
/// Vue2.4.0 新增的inheritAttrs,attrs 1.适用于Vue中全套层数深的组件,从来从父组件向子组件传递数据(除style和class) 2.当一个组件没有声明任何prop时候,attrs里面包含着全部的上层组件传递的所有数据(除style和class) 3.当声明了prop时候,attrs里面包含除去prop里面的数据剩下的数据。 //// inher...原创 2018-10-08 10:00:00 · 610 阅读 · 0 评论 -
js继承详解
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" conten原创 2018-09-29 17:23:22 · 1168 阅读 · 0 评论 -
Object.freeze和Object.seal
===============Object.freeze===============const freeObj = {name: 'zyn'}const freeObj1 = Object.freeze(freeObj)freeObj === freeObj1 // trueObject.isExtensible(freeObj1) // false 不可以被扩展Object.getO...原创 2019-06-19 16:24:17 · 356 阅读 · 0 评论 -
vue组件间通信($attrs, $listeners)
一、介绍 $listeners(自下而上传递数据), $attrs(自上而下多组件传递数据)在vue组件化开发过程中,涉及到多层组件嵌套,但如果仅仅是传递数据,而不做中间处理,使用Vuex层架复杂度这时候使用。代码参考地址:https://gitee.com/ligeyihayou/attrs-listeners二、设计文件结构// juejin.vue 路由组件入口// com-one...原创 2019-05-17 11:06:03 · 558 阅读 · 0 评论 -
Vuecli3.0 借助DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles,同时还大大提升了构建的速度。
DLLPlugin 和 DLLReferencePlugin Vuecli 3.0在vue项目,在打包的过程中将,常用的包进行提前打包,节省之后打包的时间。1.新增库打包文件webpack.dll.conf/** * Created by zyn on 2019/5/10. */const path = require('path');const webpack = require(...原创 2019-05-10 16:36:40 · 2415 阅读 · 0 评论 -
js 自定义事件
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi...原创 2019-05-15 11:03:06 · 773 阅读 · 0 评论 -
js自动检测是否使用new关键字创建函数
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi...原创 2019-05-06 14:44:33 · 700 阅读 · 0 评论 -
正则表达式集合(持续添加)
const Regex = { Number: /^[0-9]+(.[0-9]+)?$/, //数字 PositiveInteger0: /^([1-9]\d*|[0]{1,1})$/, //正整数、0 PositiveInteger: /^([1-9]\d*)$/, //正整数 Money: /^[0-9]{1,9}(\.[0-9]...原创 2019-04-29 10:19:59 · 320 阅读 · 0 评论 -
js 为dom绑定事件发生了什么
一、js 为dom绑定事件发生了什么?DOM2级事件规定事件分为三个阶段事件捕获阶段事件捕获定义了事件首先由最外层的元素(window)接收,然后才是下级元素处于目标阶段捕获到当前绑定的dom元素事件冒泡阶段从当前捕获阶段线上冒泡到document元素addEventListener 可选参数介绍:capture: Boolean设置为tr...原创 2019-04-28 11:32:03 · 247 阅读 · 0 评论 -
js 数组操作方法
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi...原创 2019-04-18 14:49:09 · 118 阅读 · 0 评论 -
setTimeout模拟定时器,及清除该定时器
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maxi...原创 2019-04-26 17:48:58 · 3252 阅读 · 0 评论 -
js 工具类方法记录
/** * Created by zyn on 2019/3/22. */const Utils = { getTime(dateTimeStr) { dateTimeStr = dateTimeStr.substring(0, 19); dateTimeStr = dateTimeStr.replace(/-/g, '/'); ret...原创 2019-04-26 17:36:40 · 145 阅读 · 0 评论 -
js继承优缺点详览
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...原创 2019-04-26 17:24:16 · 148 阅读 · 0 评论 -
clipboard在Vue项目中点击两次可以进行复制,解决。
// 使用环境: Vue-cli3 复制剪切板插件:clipboard// 安装: npm install clipboard -save <p data-clipboard-action="copy" :id="'copy-'+ elindex" class="class-list-item__title" :data-clipboard-text="classInf...原创 2019-04-10 16:46:22 · 2405 阅读 · 0 评论 -
notification 组件
// element-ui// notification 组件// DOM 解析/** 1. transition 用来设置过度动画 2. customClass 传入自定义的类名 3. position 传入默认弹出的位置 4. horizontalClass 会根据 传入默认弹窗的位置 添加对应的 right left 类名 5. positionStyle 绑定Class 该...原创 2019-03-21 15:49:43 · 850 阅读 · 0 评论 -
Vue $slots.default
// 子组件demo<template> <div> <slot></slot> <slot name="up"></slot> </div></template><script type="text/ecmascript-6"> ...原创 2019-03-20 14:31:00 · 12064 阅读 · 0 评论 -
js实现截取时间段进行倒计时和指定时间倒计时
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">原创 2019-02-15 11:48:46 · 1213 阅读 · 1 评论 -
在GET传参数中获取地址栏中传递的参数
/*** 在GET传参数中获取地址栏中传递的参数 name=location.href;**/function getUrlParam(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg);原创 2016-07-11 20:15:26 · 3000 阅读 · 0 评论 -
在GET传参数中获取地址栏中传递的参数
/*** 在GET传参数中获取地址栏中传递的参数 name=location.href;**/function getUrlParam(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg);原创 2016-07-11 20:15:33 · 418 阅读 · 0 评论