人生只有一次,大胆的生活!
Vue3+Webpack5手动搭建环境
刚学会用Vue框架,由于我有点前端基础,在没有接触Vue等框架的之前,都是纯手写的html静态页面但我当时已经接触了很多关于Node的很多用法,以及了解npm、webpack等(全是拜Hexo所赐)所有在学习Vue的时候不是用<script></script>标签引入的,直接就使用VueCLI构建,直接学习学习的时候一直用的是VueCLI构建构建项目,在build时我不想让VueCLI打包成好几个js文件,当时也上网查了很多资料视乎VueCLI并不允许这样做,但是也有很多大神提供了很多办法,奈何我看不懂,只能手动搭建vue+webpack环境创建项目目录D:\Vue3_Webpack5cd./Vue3_Webpack5#进入项目目录npminit-y#初始化项目npminstallwebpackwebpack-cli--save-dev#安装webpack以及webpack-cli在根目录创建webpack.config.js–webpack.dev.config.js–template/index.html–src/index.js如下图我个人不喜欢使用...
原生JS实现复制指定区域文本内容
原生js实现复制功能,可复制指定区域文本内容,复制当前点击元素文本内容,复制当前点击文本内容(多个)|Clipboard.js
HTML标签 progress or meter 进度条
有些有些情况下,我们在页面需要用到进度条如果手写的化还需要判断宽度、百分比等问题在html中,progress标签是html5中新增的标签,是定义运行中的任务进度/进程,通常和JavaScript一起使用来实现进度条。注释:<progress>标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用<meter>标签代替。(这不一样的吗?而且progress可以自定义最大值)90%:<progressvalue="90"max="100">内容</progress>50%:<progressvalue="50"max="100"></progress>30%:<progressvalue="30"max="100"></progress>150%:<progressvalue="150"max="200&...
Nodejs http模块实现静态资源服务器
NodeJS http模块实现静态资源服务器,NodeJs手写静态资源服务器,以前用的都是server-static库,现在自己手写也能行
JavaScript实现图片懒加载的2种方式(监听scroll滚动事件、IntersectionObserver接口)
当有人打开了你的网站,而你的网站恰好需要展示很多高质量、精美的图片、日常图片时一张图片往往都会在500kb-2MB之间,如果有10张图片的话、大约会产生(取中间值1MB)10MB的网络宽带如果没有使用使用图片懒加载的话,用户打开网站的一瞬间,所有的资源需要全部加载完成才能完整的打开网站一个网站打开的速度超过5s的话,大部分人都会立刻关闭该网站其中出现了三个问题在用户没有看到的地方,就一股脑的加载全部图片这会造成网络资源的浪费增加服务器的压力用户的体验感这时候就需要使用到图片的懒加载,只有浏览器浏览到的地方才会加载图片,大大节省了网站的响应时间,服务器压力减少监听scroll滚动事件用户滚动到的地方,就会加载图片既然是滚动,很多人都会想到用scroll滚动事件此写法稍微优点复杂/***获取指定代码块的基本信息*@scrollTop滚动条纵坐标位置*@scrollLeft滚动条横坐标位置*@param{*}node元素(标签)*@returns当前元素(标签)top|right|bottom|left距离顶部的距离**nodePos:top|bottom当前元素在...





