web前端
文章平均质量分 60
秋天1014童话
坚持就是胜利,珍惜当下,珍惜学习的机会!!
展开
-
table数据转为excel文件下载
本文讲解如何将table数据转为excel文件下载。亲测,当table有合并行/列时,下载的excel也会对应合并。原创 2022-09-23 18:17:15 · 1056 阅读 · 1 评论 -
Promise缓存
经过业务长时间打磨,往往会沉淀诸多公用的方法和能力,比如获取用户信息,获取某场景配置信息等。在我们进行可视化搭建页面时,往往会存在多模块调用同一个公用方法的情况,比如这个模块需要进行用户信息展示,那个模块需要判断用户是否符合活动人群。如果全局没做状态管理的话,每调用一次,就会发起一次请求。在大流量的场景下,不但会提升qps,可能触发服务器调用阀值,影响用户体验,同时也很浪费服务器资源,这个时候我们就可以去做一个Promise的缓存。这也是面试经常被多形式问到的问题。...原创 2022-06-14 17:56:07 · 495 阅读 · 0 评论 -
使用a标签下载文件,浏览器会直接打开解决方案
使用a标签下载文件,浏览器会直接打开解决方案背景一、HTML中的a标签实现点击下载二、即使使用a标签的download属性,chrome浏览器还是会打开三、解决方案解决方案一:使用ajax请求该url,获取到文本内容,手动实现下载。解决方案二:设置Content-Type四、写在最后背景在使用a标签进行下载文件时,chrome浏览器是会打开支持预览的文件(如txt、json等),而不下载。一、HTML中的a标签实现点击下载通常在咱们写项目的时候会遇到上传下载什么的,在上传完文件后会把文件的路径保存到原创 2022-04-22 16:40:35 · 17029 阅读 · 7 评论 -
Html 表单实例--未加css
Document 照片选择选择照片-->综合设置选择尺寸:5寸6寸选择相纸:富士柯达配送方式:平邮平邮1平邮2商品描述:意见反馈:我是Button提交重置原创 2015-05-29 10:23:39 · 568 阅读 · 0 评论 -
经典导航+经典新闻
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>新浪导航</title> <style> body{ margin:0; padding:0; } .header{原创 2016-10-31 21:54:38 · 344 阅读 · 0 评论 -
js数组-控制先合并后去重(基于上篇-js去重方法)
js数组-控制先合并后去重(基于上篇-js去重方法)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script> Array.prototype.removeRepeat1 = function() {原创 2016-11-16 17:14:24 · 384 阅读 · 0 评论 -
json去重
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>json去重</title> <style></style> <script> //json去重,主要思想就是 两重循环,遍历是否存在某个属性值 var tem = [{"code":"001"},原创 2016-11-16 17:26:15 · 2004 阅读 · 0 评论 -
仿淘宝层级
实现几个并排div,边框合并问题,鼠标hover,边框变亮<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> /* .test { width: 150px; height: 300px;原创 2016-11-17 17:30:09 · 418 阅读 · 0 评论 -
js-输出当前索引(放在属性里面)
若要是直接在数组遍历时输出,不论点击哪个,则都出i的最大值,即数组的长度。所以 将索引放在属性里面;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹出当前的索引号</title> <style> ul li{ float: left;原创 2016-11-18 22:19:36 · 949 阅读 · 0 评论 -
水平进度条 拖拽 效果
水平滚动条 拖拽 效果 bar.onmousedown+document.onmousemove<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0;原创 2016-12-10 21:31:58 · 3138 阅读 · 3 评论 -
js-窗口拖动
写法类似于上一篇,水平进度条拖拽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .n原创 2016-12-11 12:43:07 · 791 阅读 · 0 评论 -
js-模拟垂直滚动条
1、 红色盒子高度计算公式: 容器的高度 / 内容的高度 * 容器的高度2、红色方块移动一像素 ,我们的内容盒子移动多少呢? (内容盒子高度 - 大盒子高度) / (大盒子高度 - 红色盒子的高度) 计算倍数 (内容盒子高度 - 大盒子高度) / (大盒子高度 - 红色盒子的高度) * 红色盒子移动的数值<!DOCTYPE html><html lang="en"><hea原创 2016-12-11 14:22:09 · 1513 阅读 · 0 评论 -
js-scrollTop和scrollLeft封装
scrollTop兼容写法var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;封装为函数:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <titl原创 2016-12-11 15:00:55 · 748 阅读 · 0 评论 -
轮播图,焦点hover,图片缓动效果
轮播图,焦点hover,图片缓动效果,其中标记焦点的1,2,3序号,根据图片自动生成<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图焦点</title> <style> *{ padding: 0; margin: 0; }原创 2016-12-04 15:57:58 · 1649 阅读 · 0 评论 -
完整的图片轮换-包括左右移动和缓动效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图焦点</title> <meta content="还是有地点小瑕疵,1左转变4,4右转变1的时候,图片切换有空白,换下动画模式应该可以?"> <style> *{ padding:原创 2016-12-04 17:34:40 · 1949 阅读 · 0 评论 -
输入框--仿placeholder,oninput检测用户输入事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .search{ width: 300px; height: 30px; margin: 100px原创 2016-11-18 19:54:43 · 833 阅读 · 0 评论 -
js-动态生成小圆点(根据轮播图图片张数动态生成小圆点)
动态生成小圆点(根据轮播图图片张数动态生成小圆点)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body,ul{ padding: 0; margin: 0;原创 2016-11-23 21:39:22 · 10150 阅读 · 0 评论 -
js-微博发布-练手
微博发布评论,评论区动态增加刚发布的内容,并提供删除功能。练习创建节点、追加节点、移除节点。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>微博发布</title> <style> ul{ margin: 0; padd原创 2016-11-23 22:23:52 · 524 阅读 · 0 评论 -
js-5s后 重新发送短信(定时器,清除定时器)
5s后 重新发送短信<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js-手机发送短信倒计时</title> <style> button{ width: 100px; height: 30px;原创 2016-11-25 21:54:38 · 2276 阅读 · 0 评论 -
js-小米手机上下滑动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 512px; height: 400px; margin:100px au原创 2016-11-26 16:59:01 · 704 阅读 · 0 评论 -
js-保留两位小数,取后缀名
122340.12345 保留两位有效小数 122340.12 substr(0, .+3) 1.console.log(str.substr(0,str.indexOf(“.”)+3)); 通过 indexOf 返回小数点的位置 截取字符串 2 console.log(parseInt(PI*100) /100); 先乘以10原创 2016-11-26 20:44:57 · 593 阅读 · 0 评论 -
仿jquery的$("#demo"),$(".className"),$("div")
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>仿jquery的$</title> <style></style></head><body> <div id="demo" class="demoClass">123</div> <script>原创 2016-11-26 20:58:54 · 559 阅读 · 0 评论 -
轮播图--无缝滚动
轮播图–无缝滚动<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } ul{原创 2016-11-26 21:30:16 · 409 阅读 · 0 评论 -
window.onload和body的区别??
window.onload和body的区别:还没弄清!看下断代码,放在body后面可正确执行,放在window.onload提示不能找到loginBtn回车键enter,登录:function enterExecute(){ if (event.keyCode==13) //回车键的键值为13 document.getElementById('btn').click();原创 2016-12-09 12:08:53 · 648 阅读 · 0 评论 -
js-return返回多个值,通过对象的属性访问
return返回多个值,通过对象的属性访问<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style></style> <script> function add(a,b){ var sum;原创 2016-12-09 21:23:52 · 6802 阅读 · 0 评论 -
购物图片放大镜
图片放大镜 一难点:不让黄盒子出界 二难点:让大盒子相应移动(比例)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>我的放大镜</title> <style> *{ margin: 0; padding: 0;原创 2016-12-10 10:25:56 · 385 阅读 · 0 评论 -
取消冒泡,判断触发源
登录框,点击空白处登录窗消失,点击登录窗处不能消失知识点:取消冒泡,判断触发源 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .mask{ width: 100%; he原创 2016-12-15 17:09:04 · 309 阅读 · 0 评论 -
tab栏封装-闭包
tab栏封装,三种方法: 一、存储当前索引,lis[i].index 二、使用闭包实现。 三、使用闭包实现,函数立即执行。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab栏封装</title> <style> body,ul{ pad原创 2017-01-03 21:46:14 · 646 阅读 · 0 评论 -
把多余文字转化为省略号
怎么把多余文字转化为省略号? 先看看最简单的,利用 text-overflow:ellipsis 实现单行文本溢出显示省略号效果1 overflow: hidden;2 text-overflow: ellipsis;//clip|ellipsis3white-space: nowrap;效果如下:所有主流浏览器都原创 2016-12-30 20:29:58 · 1567 阅读 · 0 评论 -
js-数组去重(有五种方法)-包含数组扩展形式
js-数组去重(有四种方法)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>js-数组去重</title> <meta content="http://note.youdao.com/share/index.html?id=55da195bec366816c2093d2e630fb81原创 2016-11-10 10:43:07 · 2356 阅读 · 0 评论 -
==与===
==与===图片展示==的图片展示: ===:原创 2017-01-12 08:56:50 · 271 阅读 · 0 评论 -
小程序-待发
微信小程序开发实战准备课程概要微信小程序基本介绍开发环境及工具的安装配置微信小程序的设计规范微信小程序基本结构分析WXML和WXSS语法规范微信小程序API使用微信小程序访问网络资源完整项目的开发流程Demo 项目地址https://github.com/zce/weapp-demoClone or Download(需准备GIT环境)【 1、打开需要复制程序到本地的文件夹,sh原创 2017-01-17 13:47:26 · 458 阅读 · 0 评论 -
左右轮播图-酷炫
html代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta keyword="左右轮播图-效果比较好"> <title>Document</title> <link rel="stylesheet" type="text/css" href="css/css.css">原创 2017-01-17 13:50:37 · 683 阅读 · 0 评论 -
旋转木马-轮播
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来,用它写博客,将会带来全新的体验哦:Markdown和扩展Markdown简洁的语法代码块高亮图片链接和图片上传LaTex数学公式UML序列图和流程图离线写博客导入导出Markdown文件丰富的快捷键快捷键加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl原创 2017-01-17 15:59:35 · 611 阅读 · 0 评论 -
单行文本和多行文本--文字溢出
单行文本和多行文本–文字溢出:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>文本换行</title> <style> .text{ width: 200px; border: 1px solid red;原创 2017-02-20 19:11:23 · 1690 阅读 · 0 评论 -
使用css3图形描绘
css描绘各种图形:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3 边框</title> <style> body, ul, li, dl, dt, dd, h1, h2, h3, h4, h5 { margin: 0;原创 2017-02-20 18:00:33 · 885 阅读 · 0 评论 -
artTemplate模板的使用
artTemplate一、注意:原生语法与简洁语法不能同时使用,而且对应引入的js文件也不一样,要注意这个问题!避免不必要的错误!二、使用使用有两种方式: 1、原创 2017-03-03 09:05:20 · 426 阅读 · 0 评论 -
判断一个对象是否为空
由判断一个对象是否有属性(即{}),引发的一系列思考: 1. 首先要想判断一个对象是否为null,很简单,使用if(obj)或者obj==null 直接判断即可。 2. 判断一个对象是否函数属性: 方法一:使用for in 和hasOwnProperty 判断,是否含有属性。 和喵大婶探讨,得到方法二:对象使用JSON.stringify转为字符串,判断长度是否大于2var obj = {原创 2017-04-20 17:46:43 · 3227 阅读 · 0 评论 -
vue生命周期
vue生命周期: 钩子函数:created -> 实例已经创建 √ beforeCompile -> 编译之前 compiled -> 编译之后 ready -> 插入到文档中 √ beforeDestroy -> 销毁之前 destroyed -> 销毁之后图解:原创 2017-05-09 22:22:32 · 295 阅读 · 0 评论 -
npm 安装配置等
一、目录问题 1、如果是npm instal -g,则是安装在全局的地方,所有node项目都可以使用这个module,安装路径可以通过npm config get prefix查 看。二、安装问题原创 2017-05-19 13:15:40 · 301 阅读 · 0 评论