Grid布局使用笔记
Exam-1123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> /* 极简主义容器 */ .container { display: grid; grid-template ...
electron桥接调用及通信速查表
主进程调用渲染进程函数12345678无法直接调用，通信方式实现win.webContents.send('invoke-function', 'greet', 'Hello from Main Process!');渲染进程监听ipcRenderer.on('invoke-function', (event, functionName, ...args) => { console.log(`function name: ${functionName} and args: ${args}`);});
渲染进程调用主进程函数12345678ipcRenderer.invoke('perform-calculation', { a: 1, b: 2 }).then(result => { console.log(result);});主进程注册ipcMain.hand ...
JS线程池Demo
js线程池开发12345678910111213141516171819202122<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>线程池</title> </head> <body> <button id="addTask">加入任务</button> <textarea id="task" placeholder="任务记录"></textarea> <script src="main.js"></script&g ...
React项目中使用Mobx
React项目中使用Mobx1234567891011121314151617181920212223242526272829303132333435// /store/appState.tsimport { observable, action } from 'mobx';// MobX 中启用了strict-mode，严格模式下，修改可观察状态（observable）的值时必须使用 action。// 这是为了确保状态的修改是可追踪的、可预测的，从而避免不必要的副作用和错误export interface IAppState { count: number; increment: () => void; decrement: () => void; setCount: (value: number) => void;}export const appState:IAppState = observable({ count: 0, increment: action(funct ...
GSAP
GSAPdemoB站弹幕123456789101112131415161718192021222324252627282930313233343536373839404142434445<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <video width="100%" height="100%" src="https://www.w3school.com.cn/i/movie.ogg"></video> ...
Svelte框架使用指北
Svelte框架使用指北我更习惯称呼Svelte是前端框架，但是和Vue、React、Angular等框架不同，Svelte实质是一个编译器，它将我们的代码编译成原生的JavaScript，而不是在运行时解释我们的代码。这意味着我们不需要在浏览器中加载框架运行时，从而减少了我们的应用程序的大小，使其更快。
随便聊聊开始接触这个框架是因为官网的宣传语”无虚拟DOM”原本以为虚拟dom就是当前几年的技术最优解,没想到Svelte反其道而行~
官方资料
Svelte官网
Svelte中文网
其它资料
前端新宠 Svelte 带来哪些新思想？赶紧学起来！
项目搭建个人比较喜欢用vite进行项目搭建,无他唯快尔;Svelte作者可是亲自参与了vite的开发,所以vite对svelte的支持是非常好的
1234567891011npm init vite@latest=======================按照提示选择即可=======================? Select a framework: › - Use arrow-keys. Return to submit.❯ ...
javascript录制电脑屏幕
MediaStream Recording API新特性来实现
首先需要授权,mac的话需要在系统设置里打开浏览器屏幕共享权限代码:
123456789101112131415161718192021222324252627282930// 获取屏幕媒体流navigator.mediaDevices.getDisplayMedia({ video: true }) .then(function(stream) { // 创建MediaRecorder对象 let recorder = new MediaRecorder(stream); let recordedChunks = []; // 开始录制 recorder.start(); recorder.ondataavailable = function(event) { recordedChunks.push(event.data); } // 停止录制 recorder.onstop = function() ...
图片懒加载
动态监听滚动条事件123456789101112131415161718192021222324252627282930313233343536373839<!DOCTYPE html><html><head> <title>Scroll Listener Image Lazy Loading</title> <style> img { width: 100%; height: auto; display: block; margin-bottom: 20px; } </style></head><body> <h1>Scroll Listener Image Lazy Loading</h1> <img data-src="https://picsum.photos/id/1015/600/400" alt="Image 1"& ...
mediainfo.js获取文件的媒体信息
danger文件
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283<!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, initial-scale=1.0"> <title>Document</title> & ...
用简单的CSS属性实现轮播图吸附效果
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152<!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, initial-scale=1.0"> <title>手写轮播图</title> <style> .swiper{ width: 300px; heig ...