人生只有一次,大胆的生活!!

HTML标签 progress or meter 进度条

有些有些情况下,我们在页面需要用到进度条 如果手写的化还需要判断宽度、百分比等问题 在html中,progress标签是html5中新增的标签,是定义运行中的任务进度/进程,通常和JavaScript一起使用来实现进度条。 注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用 <meter> 标签代替。(这不一样的吗?而且progress可以自定义最大值) 123490%:<progress value="90" max="100">内容</progress>50%:<progress value="50" max="100"></progress>30%:<progress value="30" max="100"></progress>150%:<progress value="150"

Nodejs http模块实现静态资源服务器

NodeJS http模块实现静态资源服务器,NodeJs手写静态资源服务器,以前用的都是server-static库,现在自己手写也能行

JavaScript实现图片懒加载的2种方式(监听scroll滚动事件、IntersectionObserver接口)

当有人打开了你的网站,而你的网站恰好需要展示很多高质量、精美的图片、日常图片时一张图片往往都会在500kb-2MB之间,如果有10张图片的话、大约会产生(取中间值1MB)10MB的网络宽带如果没有使用使用图片懒加载的话,用户打开网站的一瞬间,所有的资源需要全部加载完成才能完整的打开网站一个网站打开的速度超过5s的话,大部分人都会立刻关闭该网站 其中出现了三个问题在用户没有看到的地方,就一股脑的加载全部图片 这会造成网络资源的浪费 增加服务器的压力 用户的体验感 这时候就需要使用到图片的懒加载,只有浏览器浏览到的地方才会加载图片,大大节省了网站的响应时间,服务器压力减少 监听scroll滚动事件用户滚动到的地方,就会加载图片既然是滚动,很多人都会想到用scroll滚动事件 此写法稍微优点复杂1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253/** * 获取指定代码块的基本信息 * @scrollTop 滚动条纵坐标位置 * @scrol

原生JS实现JQuery的$.ajax()方法

记录一下,方便以后ctrl+c v大法 123456789101112131415161718192021222324252627282930313233343536373839/** * 封装ajax请求 * @param {*} obj 请求参数 */function ajax(obj) { //指定请求方式 默认get请求 obj.type = obj.type || "get"; //设置是否异步,默认为true obj.async = obj.async || true; //设置数据的默认值 obj.data = obj.data || null; if (window.XMLHttpRequest) var ajax = new XMLHttpRequest();//非ie else var ajax = new ActiveXObject("Microsoft.XMLHTTP");//ie //区分get和post if (obj.type

原生JS实现JQuery的$.getScript()方法

在很多情况下,我们需要使用JQuery库里的$.getScript()方法,载入js后执行指定js方法有时候是不需要直接用<script src="/js/xxxx.js"></script>全部引入js的这样会影响页面的加载速度(因为页面加载完成后有些功能是不需要立刻执行的,而是用户点击、滚动、等其它行为时再加载相应的js文件),间接的实现js懒加载如果只是仅仅使用这个方法的话,则需要引入JQuery库(未压缩:250kb、压缩:90kb)这没必要引入JQuery来使用$.getScript()方法,这个完全是可以使用原生js实现的,$.getScript()这个方法是简写的 Ajax 函数 12345$.ajax({ url: url, dataType: "script", success: success}); 废话不多说直接上代码使用动态创建script标签的办法来实现动态加载(也可以使用ajax请求(原生))优点:可跨域 1234567891011121314151617181920