web
关注
分享
扫一扫
Cc.＇沐艿伊℡
这个作者很懒，什么都没留下…
展开
-
js数组对象按种类分组
传入数组 let arr = [ { year: 2021 }, { year: 2020 }, { year: 2020 }, { year: 2019 }, { year: 2021 }] let arrList = this.sort_pro(arr, ['year']) console.log(arrList)结果调用方法 sort_pro(data, keys = []) { //keys原创 2021-06-11 12:59:59 · 852 阅读 · 0 评论 -
vue导出word含图片
下载依赖，引入依赖npm install docxtemplater jszip --savenpm install docxtemplater-image-module-free --save // 这个是图片处理的npm install jszip-utils --savenpm install pizzip --savenpm install file-saver --saveimport Docxtemplater from 'docxtemplater'import .原创 2021-04-15 11:45:40 · 1512 阅读 · 0 评论 -
number-----toFixed()
NumberObject.toFixed(num)toFixed() 方法可把 Number 四舍五入为指定小数位数的数字。参数num必需。规定小数的位数，是 0 ~ 20 之间的值，包括 0 和 20，有些实现可以支持更大的数值范围。如果省略了该参数，将用 0 代替。返回值返回 NumberObject 的字符串表示，不采用指数计数法，小数点后有固定的 num 位数字。如果必要，该数字会被舍入，也可以用 0 补足，以便它达到指定的长度。如果 num 大于 le+21，则该方法只调用 NumberO原创 2020-07-14 17:09:44 · 379 阅读 · 0 评论 -
正则表达式匹配手机号，邮箱
匹配手机号var tel = $(obj).find("#tel").val(); var reg = /^[1][3,4,5,7,8][0-9]{9}$/; if (!reg.test(tel)) { alert('电话号码错误！'); return false; }匹配邮箱 function isEmail(str) { var .原创 2020-06-09 23:34:54 · 464 阅读 · 0 评论 -
简单的网页在线咨询代码
简单的网页在线咨询代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../static/原创 2020-06-09 23:19:03 · 2663 阅读 · 2 评论 -
HTML中a标签跳转链接，锚点链接，发送邮件，打开QQ对话，’打电话，下载功能
HTML中a标签的几大作用一：跳转页面链接<a href="http://www.baidu.com" target="_blank">百度</a>二：锚点链接如何使用描点链接：在链接的目的区域设置id属性，并设置上唯一的一个id名称。a标签的href属性的属性值是要链接区域的id值，并且一定要记住带“#”号。<h3> <a href="#part">二：锚点链接</a></h3><ul class原创 2020-06-09 23:13:51 · 4337 阅读 · 0 评论 -
touch--------移动端的一组触摸事件
touchstart 当手指触摸屏幕时触发touchmove 当手指触摸屏幕来回滑动时触发touchend 当手指离开屏幕时触发使用touch:绑定事件 box.addEventListener(“touchstart”, callback)事件对象: changedTouches 改变后触摸点的集合---每个时间点都会记录 ...原创 2020-06-08 23:31:23 · 161 阅读 · 0 评论 -
用jq写分页器
js分页器效果比较简单效果图代码<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery分页器代码</title> <scrip...原创 2019-10-28 18:45:12 · 747 阅读 · 0 评论 -
js写图片无限循环跑马灯
js写图片无限循环跑马灯效果图代码展示<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...原创 2019-10-28 18:38:33 · 1490 阅读 · 0 评论 -
微信小程序实现点击保存图片
微信小程序实现点击保存图片wxml代码<view class='title'>点击图片保存图片</view><image class='img' data-src="http://img2.imgtn.bdimg.com/it/u=3507713655,931555131&fm=26&gp=0.jpg" bindtap="downLoadImag...原创 2019-10-23 19:14:44 · 1715 阅读 · 0 评论 -
HTML5自定义属性 data
自定义属性: data-*(属性名)作用: 进行数据的缓存获取: query方式 对象.data(“自定义属性名称–>data-username”)h5的方式 对象.dataset 返回的是属性的集合自定义属性的写法: data-name --> 对象.name data-age-id -->对象.ageId 使用驼峰命名法<div dat...原创 2019-06-21 10:21:22 · 803 阅读 · 0 评论 -
audio&video标签
//1.多媒体audioHTML5通过标签来解决音频播放的问题。使用相当简单，如下图所示并且可以通过附加属性可以更友好控制音频的播放，如：autoplay 自动播放controls 是否显示默认播放控件loop 循环播放 如果这个属性不写 默认播放一次 loop 或者 loop = “loop” 表示无限循环由于版权等原因，不同的浏览器可支持播放的格式...原创 2019-06-21 13:29:24 · 1930 阅读 · 0 评论 -
css3之动画(CSS3) animation、伸缩布局、背景渐变
1.动画(CSS3) animation动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。语法格式animation: 动画名称 动画花费时间 运动曲线 开始播放时间 播放次数(无限infinite) 是否反向播放(alternate ) 是否保持播放完后的位置(forwards);关于几个值，除了名字，动画时间，延时有严...原创 2019-06-17 23:47:21 · 3382 阅读 · 0 评论 -
css3/html5之本地储存----storage
//1.临时储存通过设置的key值来存储数据1.1存数据`sessionStorage.setItem("list", "张三");` ;
圆弧绘制弧度概念arc()x 圆心横坐标y 圆心纵坐标r 半径startAngle 开始角度endAngle 结束角度anticlockwise 是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）圆弧语法 : arc(x, y, radius半径, 弧度start, 弧度end, 方向:默认顺时针false);画圆弧的步骤确定圆心确定半径确定绘制...原创 2019-06-27 21:53:52 · 778 阅读 · 0 评论 -
canvas画布写文字:fillText()
绘制文本ctx.font = ‘微软雅黑’ 设置字体strokeText()fillText(text,x,y,maxWidth)text 要绘制的文本x,y 文本绘制的坐标（文本左下角）maxWidth 设置文本最大宽度，可选参数ctx.textAlign文本水平对齐方式，相对绘制坐标来说的leftcenterrightstart 默认endctx.dir...原创 2019-06-27 22:01:57 · 14913 阅读 · 2 评论 -
canvas画布绘制图片:drawImage()
绘制图片drawImage()参数的解释三个参数drawImage(img,x,y)img 图片对象、canvas对象、video对象x,y 图片绘制的左上角五个参数drawImage(img,x,y,w,h)img 图片对象、canvas对象、video对象x,y 图片绘制的左上角w,h 图片绘制尺寸设置(图片缩放，不是截取)九个参数drawImage(im...原创 2019-06-27 22:08:18 · 1532 阅读 · 0 评论 -
canvas画布的转换
平移 移动画布的原点translate(x,y) 参数表示移动目标点的坐标//位移 ctx.beginPath() ctx.translate(100, 100);//位移的是画布的基点缩放scale(x,y) 参数表示宽高的缩放比例//缩放 ctx.scale(2, 2); ctx.strokeRect(-50, -50, 50, ...原创 2019-06-27 22:15:03 · 245 阅读 · 0 评论 -
根据数据绘制饼状图(canvas画布例子)
要求:根据数据绘制饼状图效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><canvas width="600" heig...原创 2019-06-27 22:19:31 · 733 阅读 · 0 评论 -
canvas画布画时钟(事件跟当前时间一样)
说明:代码里面的注释打开之后可以画出钟表的1-12时刻(在有背景图片是不需要打开)效果图1.关掉注释,有背景图2.打开注释,无背景图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>...原创 2019-06-27 22:34:20 · 629 阅读 · 0 评论 -
三级联动(js)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div { height:40px; ...原创 2019-06-27 22:40:29 · 230 阅读 · 0 评论 -
二级联动(js)
效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>JS实现二级联动菜单</title></head><body><form name="form1" method="post"...原创 2019-06-27 22:43:41 · 110 阅读 · 0 评论 -
轮播图更新jquery版本
1.css代码 * { margin: 0; padding: 0; list-style: none; } .slider { height: 340px; width: 790px; position: relati...原创 2019-07-01 13:06:16 · 125 阅读 · 0 评论 -
关于移动web的适配问题----viewport
适配问题 : 屏幕尺寸不一样解决方案 : 用百分比去自适应布局,非固定像素, 内容则向两侧填充 叫流式布局. 同时, 需要对移动端的viewport视口进行设置, 就到适配的目的了视觉窗口 : viewport是移动端特有的, 看成一个虚拟的区域, 用来承载网页. 其关系: 浏览器承载着viewport, viewport承载的网页, 这个视觉窗口会帮我们缩小我们的网页设置viewpo...原创 2019-07-01 13:15:42 · 247 阅读 · 0 评论 -
小游戏贪吃蛇之优化版本
小游戏贪吃蛇之优化版本说明:本次优化主要是给页面进行了优化,其次对食物的样式进行了优化,同时也给按钮加了悬浮高亮显示的特效效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>...原创 2019-06-02 22:43:24 · 247 阅读 · 0 评论 -
HTML5类操作
jQuery的类操作: addClass() removeCLass() hasCLass() toggleClass()h5有类似的api , 基于classList的属性, 会返回元素的类名 add() remove() contains()判断类 toggle() var li = document.querySelector("li:nth-child(2)"); ...原创 2019-06-21 09:58:54 · 162 阅读 · 0 评论 -
html5用条件注释语义化标签
html5新增的标签ie9以下都不支持解决办法: 插件html5shiv.js可以解决1.提前把插件放在头部,要提前解析完之后就可以解决了2.只需要让ie9以下的浏览器解析这个插件,需要用到条件注释,条件成立即执行条件里面的代码网页任何地方都可以写固定的写法 : lt小于 gt大于 lte 小于等于 gte 大于等于//1.让h5标签被ie9以下解析<!--[...原创 2019-06-21 09:53:56 · 261 阅读 · 0 评论 -
ajax知识点整理
ajax知识点整理1.概念性知识ajax的概念: 用来做数据交互使用ajax的原理: 通过XMLHttpRequest对象来向服务器发送异步请求, 从服务器获得数据, 然后通过javascript来操作数据, 从而达到更新页面的效果简单来说: 用于在后台与服务器交换数据, 达到局部刷新的效果ajax的核心: XMLHttpRequest对象ajax的特点: 异步加载, 局部刷新同步:...原创 2019-06-15 13:33:38 · 482 阅读 · 0 评论 -
this指向的改变
this指向的改变1.call(this,参数1,参数2…参数n);用法说明:①不传参数1, 或者只传一个null, 那么this还是 默认的window function f1(x,y){ console.log(x+y,this); } f1(10,20); f1.call(null,10,30); f1.apply(null,[...原创 2019-06-03 23:08:12 · 92 阅读 · 0 评论 -
this指向说明
this指向说明this指向说明普通函数的this指向—>windowfunction F1(age) { this.age = age; console.log(this); } F1(12);效果图对象和方法中的this—>当前的实例对象function F1() { this.eat = ...原创 2019-06-03 22:34:07 · 125 阅读 · 0 评论 -
js高级知识点整理
**js高级知识点整理实例对象中有一个属性叫__proto__, 叫原型, 也是对象.这个属性是浏览器使用, 不是标准的属性构造函数中有一个属性叫prototype, 叫原型, 也是对象, 这是属性是程序员使用的,才是标准的属性实例对象的__proto__和构造函中的prototype相等又因为实例对象是由构造函数创建的所以 实例对象的__proto__ 指向了构造函数中的原型对象...原创 2019-06-09 21:13:50 · 474 阅读 · 0 评论 -
WebAPI知识点整合中
WebAPI知识点整合中属性操作非表单元素的属性href、title、id、src、classNamevar link = document.getElementById('link');console.log(link.href);console.log(link.title);var pic = document.getElementById('pic');console.l...原创 2019-06-13 22:50:00 · 126 阅读 · 0 评论 -
WebAPI知识点整合上
WebAPI知识点整合上DOM: 文档对象模型1.DOM概念文档: 把html文件看成一个文档. 由于万物皆对象.文档可以看成是一个对象页面中的每一个标签都是一个元素 element. 每一个元素也可以看成是一个对象在页面中有一个根标签 html—>也叫根元素整个页面是文档 document由文档及文档中所有的元素组成的一个树形结构图.叫树状图对话框al...原创 2019-06-13 22:35:53 · 260 阅读 · 0 评论 -
小游戏贪吃蛇之铺垫
小游戏贪吃蛇之铺垫:随机创建贪吃蛇食物说明:通过产生随机数来产生设置食物盒子相对于整个地图的left和top值,从而实现食物盒子随机出现在整个地图.效果图如下HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Ti...原创 2019-05-29 22:00:35 · 113 阅读 · 0 评论 -
小游戏贪吃蛇之---------初级版本
小游戏贪吃蛇之---------初级版本贪吃蛇小游戏我相信大家都玩过,我就不仔细介绍了,直接上代码,我只是刚入门,希望看到的小伙伴给提意见,我自己也会慢慢优化贪吃蛇的几个页面效果图如下首页游戏开始页面游戏结束页面代码<!DOCTYPE html><html lang="en"><head> <meta charset="U...原创 2019-05-30 22:43:37 · 303 阅读 · 2 评论 -
模拟苹果手机开锁功能
模拟苹果手机开锁功能效果图滑动底部滑轮，等底部滑轮划到底之后就会开锁，效果图如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www....原创 2019-05-28 00:03:34 · 317 阅读 · 0 评论 -
一闪一闪亮晶晶
一闪一闪亮晶晶通过定位,定时,使得页面上的星星在固定屏幕上跑动效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box2...原创 2019-05-26 23:23:48 · 278 阅读 · 0 评论 -
轮播图动态
js动态轮播图效果分析:自动向左移动播放图片鼠标炫富在图片下端小圆点,被悬浮的小圆点变色,并且显示对应序号的图片鼠标悬浮在图片上任意一处,在图片左右两边显示移动箭头,并且 让页面静止在本章图片上,当鼠标移出图片时,箭头消失,页面继续自动播放图片点击图片左右箭头,图片分别向左向右滑动效果图js代码onload=function(){ var scrre...原创 2019-05-24 23:50:39 · 297 阅读 · 0 评论 -
Web-API之创建元素的三种方式
1. document.write(“标签的代码及内容”)-–>缺陷: 页面上静态结构会被全部覆盖document.write("<p>这是一个p标签</p>");2. 对象.innerHTML = “标签及内容”; my$("box").innerHTML = "<h1>大标题</h1>"点击动态创建列表<!DOCTY...原创 2019-06-19 22:33:38 · 243 阅读 · 0 评论