前端实用js dom合集

news/2024/11/8 14:46:48/

1.  整个网页变为灰色主题,最外层加css样式:filter:grayscale(1)  

黑色主题:filter:invert(1)

2.js剪辑视频片段制作gif动图:

效果:点击开始就开始录制,点击结束右边显示生成的gif动图

 

生成gif用canvas

 

js部分:

开始方法

结束方法

  

 3.录音功能

效果:录制完成放到audio标签就可以听

 

 

录制对象mediarecorder

 4.屏幕录制功能:

 可以选择录制整个电脑屏幕,或者选择录制某个进程

 录制过程当中不断把数据push到数组里面去

然后停止的时候把数组转成二进制,new  Blob

createobjcturl得到一个链接,通过a标签进行一个下载的触发

 5.使用原生js去生成音乐声

效果:点击音调类型任意一个按钮,再点击按钮基础音,就能听到音乐声

 核心代码:

 


http://www.ppmy.cn/news/40548.html

相关文章

尚硅谷大数据技术Hadoop教程-笔记06【Hadoop-生产调优手册】

视频地址:尚硅谷大数据Hadoop教程(Hadoop 3.x安装搭建到集群调优) 尚硅谷大数据技术Hadoop教程-笔记01【大数据概论】尚硅谷大数据技术Hadoop教程-笔记02【Hadoop-入门】尚硅谷大数据技术Hadoop教程-笔记03【Hadoop-HDFS】尚硅谷大数据技术Ha…

LOTO示波器电源环路增益分析客户实测

我们在之前有文章介绍过LOTO示波器信号源扫频测电源环路增益稳定性的方法和过程,可以参考演示视频如下: https://www.ixigua.com/7135738415382790663?logTaga843d537a27090d5117b 或者阅读对应的文章:《LOTO示波器 实测 开环增益频响曲线/电…

Pytorch构建ResNet-50V2

🍨 本文为🔗365天深度学习训练营 中的学习记录博客 🍦 参考文章地址: 365天深度学习训练营-第J2周:ResNet-50V2算法实战与解析 🍖 作者:K同学啊 一、ResNetV2与ResNet结构对比 改进点 (a)origi…

Leetcode.1631 最小体力消耗路径

题目链接 Leetcode.1631 最小体力消耗路径 Rating : 1948 题目描述 你准备参加一场远足活动。给你一个二维 rows x columns的地图 heights,其中 heights[row][col]表示格子 (row,col)(row, col)(row,col) 的高度。一开始你在最左上角的格子 (0,0)(0, 0)…

MySQL having关键字详解、与where的区别

1、having关键字概览 1.1、作用 对查询的数据进行筛选 1.2、having关键字产生的原因 使用where对查询的数据进行筛选时,where子句中无法使用聚合函数,所以引出having关键字 1.3、having使用语法 having单独使用(不与group by一起使用&…

window11使用yarn安装@vue/cli vue-V显示不是内部命令

配置环境变量 yarn global dir查看路径 找到node_modules下的bin

Spring(Ioc和Bean的作用域)

Spring Spring为简化开发而生,让程序员只关心核心业务的实现,尽可能的不在关注非业务逻辑代码(事务控制,安全日志等)。 1,Spring八大模块 这八大模块组成了Spring 1.1 Spring Core模块 这是Spring框架的…

VR全景乡村,VR全景,身临其境,感受自然

随着科技的不断发展,人们对于旅游体验的需求也在不断提升。而传统的旅游方式,虽然能够让人们亲身感受到自然风光和人文景观的美丽,但却难以完全满足人们对于旅游的多元化需求。而VR全景乡村这种全新的乡村旅游体验方式,则为人们带…