Lekily-优快云博客

原创 html-to-image ios图片绘制不出来

在使用html-to-image 的时候，安卓机没有任何问题，ios，使用toSvg可以在页面上展示，但是，在用canvas绘制一次，就渲染不出来。最后去看了插件的github。据说这个好像是因为ios的浏览器加载图片有延迟导致的。经过多次调用，ios的图片出来了！于是我去试了一下这个方法。

2024-01-19 21:31:24 1122 3

H5屏幕适配的三种方案1-rem动态适配通过获取屏幕宽度来设置html的fontSize，用rem来配置相关元素的宽高。 remViewport() function remViewport(){ const html = document.querySelector('html'); const width =window.screen.width html.style.fontSize = width/7.5

2021-08-18 11:44:59 912

原创 Canvas画动态圆钟

本案例用canvas画与当前时间想符合的动态圆钟相关注释已写好。通俗易懂<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init

2021-08-17 13:41:39 127

原创 webpack简单使用

Webpack的使用在模块化编程盛行的今天, 每个js,css都可以独立存在, 而每个独立存在的文件又有可能采取不同的工程化语言方法, 比如用TypeScript写js, 用sass写css等等, 这时候我们就需要用一个简单的工具, 完成这种统一编译解析输出的功能了.webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle(包)。安装webpacknodenpm instal

2021-08-16 16:41:57 196

原创小时钟案例

通过日期对象Date()来实现一个小时钟案例 <style> * { margin: 0; padding: 0; } ul { list-style: none; } #wrap { width: 400px; margin: 200px auto; /*bo

2021-07-28 14:01:42 101

原创浅克隆与深克隆

浅克隆浅克隆只克隆对象的“表层”，如果对象的某些属性值又是引用类型值，则不进一步克隆它们，只是传递它们的引用。浅克隆会造成藕断丝连，当引用类型的属性值发生改变时，克隆出来的对应的引用类型的属性值也会发生改变。let obj1={ a:1, b:2, c:[1,2,3], d:{ name:"daitou", age:18 } } let obj2={} for(let key in obj1){ obj2[key] =

2021-07-22 23:04:33 98

原创轮播图案例

跑马灯轮播图轮播图是我们经常会在页面开发中经常会用到的。本案例就用js实现一个经典的无缝轮播图。<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-s

2021-07-20 09:31:18 154

原创无缝连续滚动特效

Js实现无缝连续滚动特效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } #box{ width: 850px; border: 4px so

2021-07-19 22:49:16 121

原创不冒泡事件

以下事件不冒泡意思是，事件不会往父元素那里传递。blur （表单失焦）focus （表单获焦）load （页面加载完成）unload （用户退出页面）onmouseenter （鼠标移入）onmouseleave （鼠标移出）...

2021-07-19 10:48:39 212

原创 vue-router

vue-router1-路由基本用法在创建vue项目时，会帮我们自动生成一个router文件夹，里面存放着vue-router的index.js文件，里面记录着vue-router的一些基本配置。import Vue from 'vue'import VueRouter from 'vue-router'import Home from '../views/Home.vue'Vue.use(VueRouter)const routes = [ { path: '/', /

2021-07-18 10:22:20 208

原创阻止事件那些事

e.preventDefault(）方法e.preventDefault()方法用来阻止事件产生的“默认动作”可以阻止表单的提交，a标签的页面的跳转等<a href="https://www.baidu.com" id="a">百度</a>let a = document.getElementById("a"); a.addEventListener("click" , function(e){ e.preventDefault(); alert

2021-07-16 17:57:44 67

原创 webpack的使用

什么是webpack在模块化编程盛行的今天, 每个js,css都可以独立存在, 而每个独立存在的文件又有可能采取不同的工程化语言方法, 比如用TypeScript写js, 用sass写css等等, 这时候我们就需要用一个简单的工具, 完成这种统一编译解析输出的功能了.webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle(包)。webpack的安装方法npm install

2021-05-18 16:34:55 161

原创 this的指向问题

this的指向问题1-对象打点调用函数 this指向对象情况1：如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格版中this指向的不是window，但是我们这里不探讨严格版的问题，你想了解可以自行上网查找。情况2：如果一个函数中有this，这个函数有被上一级的对象所调用，那么this指向的就是上一级的对象。情况3：如果一个函数中有this，这个函数中包含多个对象，尽管这个函数是被最外层的对象所调用，this指向的也只是它上一

2021-05-08 16:40:59 118

原创宏任务（macrotask ）和微任务（microtask ）

宏任务（macrotask ）和微任务（microtask ）执行顺序宏任务：setTimeout,setInterval,Ajax,DOM事件微任务:Promise async/await微任务执行时机比宏任务要早 console.log(1); setTimeout(function(){ console.log(2); },0) Promise.resolve().then(()=>{ c

2021-04-06 16:02:49 168

y1506778504的博客