纯css+html实现的分页器功能
分页器下载github地址 使用 引入样式文件<link rel="stylesheet" href="./paginationself.css"> 引入js代码文件 <script src="./paginationself.js"></script> js代码添加 12var fy = document.getElementById("pagination_self");//父容器,负责存储分页器,id名不要改paginationself(fy, {}); 具体参数paginationself(fatherDom,options,callback) fatherDom:生成器生成的父容器 options对象:参数配置 pageInfo对象 pageNum:当前页 totalPage:数据总个数 least:当总页数低于least的时候页码全部显示 size:一次显示多少页码 textInfo对象:设置显示文字 first (默认为首页) ...
express+socket简易聊天室
简易聊天室前置知识 在我们平常的时候,ajax发送的都是短连接,get完成或者post完成之后连接就断开,并且当服务器数据更新的时候,必须再次发送ajax请求才可以获取到最新的数据 在没有socket之前,要实时获取服务器的数据,必须要轮询,也就是每隔一段时间发送ajax 所以现在有了服务端主动向前端推送消息的东东——长连接socket 实现的二种方式 socket.io websocket(H5新增) 这里使用socket.io实现 socket.io的具体使用并没有想象的难记,而是on和emit这二个关键字贯穿始终 on就用来订阅服务器发送的消息(服务端当中的理解就是监听用户发送服务端的信息) emit就用来用户向服务器发送信息(服务端当中的理解就是向用户发送信息) socket.io大概过程 前端设置 引入<script src="./socket.io.js"></script> 使用io.connect(url)连接socket服务器 使用on监听和emit发送 前端代码index.html 1234567 ...
防抖节流的使用和封装成函数
前置知识关于this指向问题,防抖函数中的fn.apply(this,arguments)作用防抖函数中的fn.apply(this,arguments)作用 this指向问题 节流 一定时间内只执行一项任务 节流原理 执行一个函数 执行这个函数的时候看看前面有没有执行过 如果前面有执行过这个函数并且没有完成,那么本次任务就不执行 节流前可以看到"move"疯狂输出 节流后程序输出move的次数明显减少 节流函数123456789101112131415161718192021/** * 节流 * @param {function} fn 要节流的函数 * @param {number} delay 延迟(类似于fps一样~) * return 执行函数 */function throttleMy(fn, delay) { //这样子建立了一个闭包,timer始终存在 var timer=null; return function (...args) { if (timer) { return; ...
express,multer,jQuery前端后端上传单个文件
先安装基本的模块$ npm init -y $ npm install express –save $ npm install multer –save 附上multer的github当中别人汉化的API文档github地址 我这使用的nodemon,如果那么使用node运行,修改记得重启 开始创建基本express(上传图片)当前目录下创建fileup.js文件 123456789101112131415161718const express = require("express");const multer = require("multer");var app = express();//创建express实例//这里是为了后期没有跨域问题设置的静态资源目录//__dirname为NodeJS全局变量: 返回运行当前js的文件夹的绝对路径app.use("/",express.static(__dirname));//后期ajax提交地址就为:http://localhost:3000/file 端口号可在下方自行设 ...
js当中的图片懒加载,懒加载的一些概念和相关知识点
知道什么是懒加载说通俗点就是轮到我我再出现,而不是一进入页面就出现为什么需要 节省资源 加快网页打开 提升用户体育 巴拉巴拉 懒加载原理红色为我们实际看到的浏览器窗口,黑色的为实际网页的长度 我们刚进入主页的时候 用户拖动滚动条,看到绿色的框框,这些绿色的框框才开始加载出来 必要知道的知识 获取元素距离顶部(body)的距离:元素.offsetTop 注意:如果元素的父元素(不管是祖父还是曾祖父还是亲生父亲),只要任意一个父亲开启了定位(不管是相对还是绝对),那么子元素的offsetTop属性值都是参考父元素的 如果父元素没有开启定位,那么就参考body 元素.offsetLeft同理 获取浏览器垂直滚动的距离:document.documentElement.onscrollTop offsetTop和offsetLeft 这两个属性,IE 、Opera和Firefox对它俩的解释存在差异: IE5.0+ 、Opera8.0+: offsetTop和offsetLeft 都是相对父级元素 Firefox1.06: offsetTop和offsetLeft 都是相对 ...
使用优启通(EasyU)重装系统教程(详细)
前言 为什么要制作一个启动盘才能重装系统? 通俗点来说就是你自己生病了,自己一般不能自己帮自己看病,一般都是别人看病。电脑也是如此,需要一个第三方来“治疗”。 为什么使用EasyU?而不使用老毛_,巴拉巴拉。。。。。 因为其他的很多启动盘制作工具有广告,会在系统安装的时候安装第三方软件。 资源下载 启动盘制作工具(任选一个下载地址): 下载地址1:123盘(不限速) 下载地址2:百度网盘 系统镜像: http://y-os.net/(第三方修改镜像) ITELLYOU.CN.(官方原版镜像) https://www.winos.me/(第三方修改镜像) 激活工具: EasyActivate 如果激活工具之类的失效了,可以到这个网站去下载,不必要局限于这个激活工具的 https://www.yrxitong.com/sr.jsp?skeyword=%E6%BF%80%E6%B4%BB&nSL 第一步:制作启动盘 下载后解压文件夹,选中这个EasyU 选中自己的u盘,然后点击全新制作 U盘会格式化!!!!,在制作启动盘之前先备份U盘文件!!! 单 ...
ES5当中var只有全局作用域和函数作用域,注意变量提升在var中的坑
前置知识 在ES5当中,变量的作用域只有全局作用域和函数作用域之分的,也就是说,你使用 var 关键字创建的变量,要么是全局都可以使用的,要么就是函数内部可以使用的 在ES5当中,var定义的变量是会变量提升的 在ES6当中,let是块级作用域,不会变量提升 于是乎产生了一次错误1234567<script> var data='动感超人' if(data){ var flag=true; } console.log(flag);//输出结果为true</script> 这一段代码一看就是true 在js当中,除了 null undefined “” NaN false 这四个转化为布尔值为false,其他均为true 所以data=”动感超人”转化为布尔值为true~所以执行var flag=true; 由于var只有全局作用域和函数作用域,所以var flag为全局变量 代码改改 1234567<script> ...
nth-of-type选择器使用的一个坑
前景一段HTML代码,我需要让第一个类名为content的div背景设置为红色的 js代码 1234<div class="header">1</div> <div class="content">2</div> <div class="header">3</div> <div class="content">4</div> style样式 1234567<style> div{ width: 100px; height: 100px; border: 1px solid red; } </style> 一开始想到的 要选第一个类名为content,当然是nth-of-type了,因为我只想要让拥有content类的div容器被选择 1234567//错误的选择器代码 < ...
2020年用JAVA制作的一个小项目图标快捷启动管理的
12020年的了,本来想用这个参加学校的作品大赛的获取经验的,想参加试试看,因为疫情没弄成,取消了 用JAVA写的,支持库都放在里面了 感兴趣的可以下载看看 github地址 功能展示默认主界面 托盘菜单 右键空白菜单 添加网站快捷方式 添加其他图标 分类栏重命名 右键图标菜单栏 顶部导航栏 搜索功能 还有其他的就不展示图片了~
迭代器自定义数据输出当中this指向
前置知识 在箭头函数当中,this的指向为函数声明时所在作用域下this的值 代码next为普通函数代码123456789101112131415161718192021222324252627282930313233343536373839var resultGet = { "code": "1", "day": "02/ 27", "result": [{ "date": "272年02月27日", "title": "罗马帝国皇帝君士坦丁大帝出生" }, { "date": "684年02月27日 ...