用html写一个有趣的鬼魂动画
<!DOCTYPE html>
<html lang="en" >
<head><meta charset="UTF-8"><title>一个有趣的鬼魂动画</title><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel="stylesheet" href="./style.css"></head>
<body>
<div class="scene-container stars-out" tabindex="1"><div class="ghost-container"><div class="ghost"><!-- 鬼魂的头部、眼睛、嘴、腮红 --><div class="ghost-head"><div class="ghost-face"><div class="eyes-row"><div class="eye left"></div><div class="eye right"></div></div><div class="mouth-row"><div class="cheek left"></div><div class="mouth"><div class="mouth-top"></div><div class="mouth-bottom"></div></div><div class="cheek right"></div></div></div></div><!-- 鬼魂的身体 --><div class="ghost-body"><div class="ghost-hand hand-left"></div><div class="ghost-hand hand-right"></div><div class="ghost-skirt"><div class="pleat down"></div><div class="pleat up"></div><div class="pleat down"></div><div class="pleat up"></div><div class="pleat down"></div></div></div></div><!-- 装饰部分 --><div class="stars"><div class="star orange pointy star-1"><div class="star-element"></div></div><div class="star orange pointy star-2"><div class="star-element"></div></div><div class="star yellow pointy star-3"><div class="star-element"></div></div><div class="star yellow pointy star-4"><div class="star-element"></div></div><div class="star blue round star-5"><div class="star-element"></div></div><div class="star blue round star-6"><div class="star-element"></div></div></div></div><!-- 阴影 --><div class="shadow-container"><div class="shadow"></div><div class="shadow-bottom"></div></div>
</div>
<!-- partial --><script src="./script.js"></script></body>
</html>
/*
动画原型参看https://dribbble.com/shots/3055734-Have-a-Happy-Halloween 和 https://dribbble.com/shots/3878696-Happy-Halloween!
*/// 设定参数
class Ghost {constructor(el) {this.scene = el;this.clone = el.cloneNode(true);this.isEscaping = false;this.ghost = el.querySelector('.ghost');this.face = el.querySelector('.ghost-face');this.eyes = el.querySelector('.eyes-row');this.leftEye = this.eyes.querySelector('.left');this.rightEye = this.eyes.querySelector('.right');this.mouth = el.querySelector('.mouth');this.mouthState = 'neutral';this.shadow = el.querySelector('.shadow-container');this.leftCheek = el.querySelector('.left.cheek');this.leftCheek = el.querySelector('.right.cheek');this.leftHand = el.querySelector('.hand-left');this.rightHand = el.querySelector('.right-hand');this.activityInterval = null;}reset() {this.scene.remove();this.scene = this.clone.cloneNode(true);this.resetRefs();this.scene.classList.remove('stars-out');this.scene.style.position = 'absolute';this.scene.style.left = Math.floor(Math.random() * (document.querySelector('body').getBoundingClientRect().width - 140)) + 'px';this.scene.style.top = Math.floor(Math.random() * (document.querySelector('body').getBoundingClientRect().height - 160)) + 'px';this.scene.classList.add('descend');this.shadow.classList.add('disappear');document.querySelector('body').append(this.scene);this.enter();}resetRefs() {this.ghost = this.scene.querySelector('.ghost');this.face = this.scene.querySelector('.ghost-face');this.eyes = this.scene.querySelector('.eyes-row');this.leftEye = this.eyes.querySelector('.left');this.rightEye = this.eyes.querySelector('.right');this.mouth = this.scene.querySelector('.mouth');this.mouthState = 'neutral';this.isEscaping = false;this.shadow = this.scene.querySelector('.shadow-container');this.leftCheek = this.scene.querySelector('.left.cheek');this.leftCheek = this.scene.querySelector('.right.cheek');this.leftHand = this.scene.querySelector('.hand-left');this.rightHand = this.scene.querySelector('.right-hand');}// 眨眼睛blink() {this.leftEye.classList.add('blink');this.rightEye.classList.add('blink');setTimeout(() => {this.leftEye.classList.remove('blink');this.rightEye.classList.remove('blink');}, 50)}// 挥手动作wave() {this.leftHand.classList.add('waving');setTimeout(() => {this.leftHand.classList.remove('waving');}, 500);}// 嘴openMouth() {this.mouth.classList.remove('closed');this.mouth.classList.add('open');this.mouthState = 'open';}closeMouth() {this.mouth.classList.remove('open');this.mouth.classList.add('closed');this.mouthState = 'closed';}neutralMouth() {this.mouth.classList.remove('open');this.mouth.classList.remove('closed');this.mouthState = 'neutral';}// 鼠标放上时的状态hover() {this.ghost.classList.add('hover');}surprise() {this.face.classList.add('surprised');}// 逃离状态runAway() {clearInterval(this.activityInterval);if (!this.isEscaping) {this.isEscaping = true;this.scene.classList.add('run-away', 'move-stars-in');this.scene.classList.remove('stars-out');setTimeout(() => {this.shadow.classList.add('disappear');setTimeout(() => {this.reset();}, Math.floor(Math.random()*1000) + 500);}, 450);}}// 回来时状态enter() {setTimeout(() => {this.shadow.classList.remove('disappear');}, 5);setTimeout(() => {this.scene.classList.remove('descend');this.scene.classList.add('stars-out', 'move-stars-out');}, 600);setTimeout(() => {this.hover();this.prepareEscape();this.startActivity();}, 1200)}startActivity() {this.activityInterval = setInterval(() => {switch (Math.floor(Math.random()*4)) {case 0:this.blink();setTimeout(() => { this.blink() }, 400);setTimeout(() => { this.blink() }, 1300);break;case 1:this.wave();break;default:break;}}, 7000);}prepareEscape() {this.scene.addEventListener('click', () => { this.runAway() }, false);this.scene.addEventListener('mouseover', () => { this.runAway() }, false);this.scene.addEventListener('focus', () => { this.runAway() }, false);}}let ghost = new Ghost(document.querySelector('.scene-container'));ghost.hover();ghost.startActivity();ghost.prepareEscape();
html {height: 100%;
}body {height: 100%;position: relative;display: flex;align-items: center;justify-content: center;background-color: #292B25;
}.scene-container {position: relative;width: 140px;height: 160px;
}.scene-container:focus {outline: none;
}.scene-container.run-away .ghost {transform: rotateX(-10deg) scale3d(1.4, 4, 1) translate3d(0, 130%, -30px);transition: transform 800ms ease;
}.scene-container.descend .ghost {transform: translate3d(0, 130%, 0);
}.ghost-container {position: relative;width: 80px;height: 140px;padding: 20px 30px 0 30px;overflow: hidden;perspective: 30px;
}.ghost {position: relative;height: 115px;z-index: 1;transition: transform 2000ms ease-out;
}.ghost.hover {-webkit-animation: hover 600ms ease-in-out infinite alternate;animation: hover 600ms ease-in-out infinite alternate;
}.ghost-head {position: relative;width: 80px;height: 0;padding-top: 100%;border-radius: 100%;background-color: #F0EFDC;
}.ghost-head .ghost-face {position: absolute;bottom: 10px;left: 10px;width: 50px;height: 30px;z-index: 1;
}.eyes-row, .mouth-row {position: relative;height: 10px;
}.mouth-row {margin-top: 3px;
}.eye {height: 10px;width: 10px;background-color: #271917;border-radius: 100%;position: absolute;bottom: 0;transition: height 50ms ease;
}.eye.left {left: 5px;
}.eye.right {right: 5px;
}.eye.blink {height: 0;
}.mouth {position: absolute;left: 50%;top: 0;height: 10px;transform: translate3d(-50%, 0, 0);
}.mouth .mouth-top {width: 18px;height: 2px;border-radius: 2px 2px 0 0;background-color: #271917;
}.mouth .mouth-bottom {position: absolute;width: 18px;height: 8px;bottom: 0;overflow: hidden;transition: height 150ms ease;
}.mouth .mouth-bottom:after {content: "";display: block;position: absolute;left: 0;bottom: 0;width: 18px;height: 16px;border-radius: 100%;background-color: #271917;
}.mouth.open .mouth-bottom {height: 16px;
}.mouth.closed .mouth-bottom {height: 0;
}.cheek {position: absolute;top: 0;width: 12px;height: 4px;background-color: #F5C1B6;border-radius: 100%;
}.cheek.left {left: 0;
}.cheek.right {right: 0;
}.ghost-body {position: absolute;top: 40px;height: 0;width: 80px;padding-top: 85%;background-color: #F0EFDC;
}.ghost-hand {height: 36px;width: 22px;background: #F0EFDC;border-radius: 100%/90%;position: absolute;
}.ghost-hand.hand-left {left: -12px;top: 10px;transform: rotateZ(-45deg);left: 0;top: 5px;transform-origin: bottom center;
}.ghost-hand.hand-left.waving {-webkit-animation: waving 400ms linear;animation: waving 400ms linear;
}.ghost-hand.hand-right {right: -12px;top: 10px;transform: rotateZ(45deg);
}.ghost-skirt {position: absolute;left: 0;bottom: 0;width: 100%;display: flex;transform: translateY(50%);
}.ghost-skirt .pleat {width: 20%;height: 8px;border-radius: 100%;
}.ghost-skirt .pleat.down {background-color: #F0EFDC;
}.ghost-skirt .pleat.up {background-color: #292B25;position: relative;top: 1px;
}.shadow-container {transition: transform 800ms ease;
}.shadow-container.disappear {transform: scale3d(0, 1, 1);transition: transform 400ms ease;
}.shadow {position: absolute;top: calc(100% - 4px);left: 0;width: 100%;height: 8px;background-color: #1B1D18;border-radius: 100%;z-index: -1;
}.shadow-bottom {position: absolute;top: 100%;left: 0;height: 4px;width: 100%;overflow: hidden;
}.shadow-bottom:after {content: "";display: block;width: 100%;position: absolute;height: 8px;left: 0;bottom: 0;border-radius: 100%;background-color: #1B1D18;z-index: 2;
}.star {position: absolute;-webkit-animation: twinkle 2s infinite linear;animation: twinkle 2s infinite linear;transition: top 400ms ease-out, left 400ms ease-out;
}.star.round .star-element {height: 9px;width: 9px;border-radius: 100%;
}.star.pointy {transform: rotate(-15deg);
}.star.pointy .star-element {height: 6px;width: 6px;
}.star.pointy .star-element:before, .star.pointy .star-element:after {content: "";display: block;position: absolute;background: green;border-radius: 6px;
}.star.pointy .star-element:before {height: 6px;width: 12px;left: -3px;top: 0;transform: skewX(60deg);
}.star.pointy .star-element:after {height: 12px;width: 6px;right: 0;bottom: -3px;transform: skewY(-60deg);
}.star.orange .star-element, .star.orange .star-element:before, .star.orange .star-element:after {background-color: #DF814D;
}.star.yellow .star-element, .star.yellow .star-element:before, .star.yellow .star-element:after {background-color: #FFD186;
}.star.blue .star-element, .star.blue .star-element:before, .star.blue .star-element:after {background-color: #83D0BC;
}.star-1 {top: 130%;left: 40%;transition-delay: 200ms;-webkit-animation-delay: 0ms;animation-delay: 0ms;z-index: 2;
}.star-2 {top: 130%;left: 44%;transition-delay: 250ms;-webkit-animation-delay: 200ms;animation-delay: 200ms;
}.star-3 {top: 130%;left: 48%;transition-delay: 300ms;-webkit-animation-delay: 400ms;animation-delay: 400ms;z-index: 2;
}.star-4 {top: 130%;left: 52%;transition-delay: 350ms;-webkit-animation-delay: 600ms;animation-delay: 600ms;
}.star-5 {top: 130%;left: 56%;transition-delay: 400ms;-webkit-animation-delay: 800ms;animation-delay: 800ms;z-index: 2;
}.star-6 {top: 130%;left: 60%;transition-delay: 450ms;-webkit-animation-delay: 1000ms;animation-delay: 1000ms;
}.move-stars-out .star-element {-webkit-animation: star-entrance 1500ms;animation: star-entrance 1500ms;
}.stars-out .star {transition: top 1500ms ease-out, left 1500ms ease-out;
}.stars-out .star-1 {top: 75%;left: 6%;
}.stars-out .star-2 {top: 35%;left: 88%;
}.stars-out .star-3 {top: 8%;left: 20%;
}.stars-out .star-4 {top: 70%;left: 92%;
}.stars-out .star-5 {top: 35%;left: 4%;
}.stars-out .star-6 {top: 2%;left: 70%;
}.stars-out .star-1 {transition-delay: 0ms, 0ms;
}.stars-out .star-1 .star-element {-webkit-animation-delay: 0ms;animation-delay: 0ms;
}.stars-out .star-2 {transition-delay: 200ms, 200ms;
}.stars-out .star-2 .star-element {-webkit-animation-delay: 200ms;animation-delay: 200ms;
}.stars-out .star-3 {transition-delay: 400ms, 400ms;
}.stars-out .star-3 .star-element {-webkit-animation-delay: 400ms;animation-delay: 400ms;
}.stars-out .star-4 {transition-delay: 600ms, 600ms;
}.stars-out .star-4 .star-element {-webkit-animation-delay: 600ms;animation-delay: 600ms;
}.stars-out .star-5 {transition-delay: 800ms, 800ms;
}.stars-out .star-5 .star-element {-webkit-animation-delay: 800ms;animation-delay: 800ms;
}.stars-out .star-6 {transition-delay: 1000ms, 1000ms;
}.stars-out .star-6 .star-element {-webkit-animation-delay: 1000ms;animation-delay: 1000ms;
}.move-stars-in .star-element {-webkit-animation: star-exit 400ms linear;animation: star-exit 400ms linear;
}.move-stars-in .star-1 .star-element {-webkit-animation-delay: 100ms;animation-delay: 100ms;
}.move-stars-in .star-2 .star-element {-webkit-animation-delay: 150ms;animation-delay: 150ms;
}.move-stars-in .star-3 .star-element {-webkit-animation-delay: 200ms;animation-delay: 200ms;
}.move-stars-in .star-4 .star-element {-webkit-animation-delay: 250ms;animation-delay: 250ms;
}.move-stars-in .star-5 .star-element {-webkit-animation-delay: 300ms;animation-delay: 300ms;
}.move-stars-in .star-6 .star-element {-webkit-animation-delay: 350ms;animation-delay: 350ms;
}/* 动画部分 */@-webkit-keyframes hover {0% {top: 0;}100% {top: 8px;}
}@keyframes hover {0% {top: 0;}100% {top: 8px;}
}@-webkit-keyframes star-entrance {0% {transform: rotate(-735deg) scale(0, 0);}100% {transform: rotate(0) scale(1, 1);}
}@keyframes star-entrance {0% {transform: rotate(-735deg) scale(0, 0);}100% {transform: rotate(0) scale(1, 1);}
}@-webkit-keyframes star-exit {0% {transform: rotate(0) scale(1, 1);}100% {transform: rotate(360deg) scale(0, 0);}
}@keyframes star-exit {0% {transform: rotate(0) scale(1, 1);}100% {transform: rotate(360deg) scale(0, 0);}
}@-webkit-keyframes twinkle {0% {transform: rotate(0deg) scale(1, 1);}25% {transform: rotate(10deg) scale(0.8, 0.8);}50% {transform: rotate(0deg) scale(0.9, 0.9);}75% {transform: rotate(-20deg) scale(0.6, 0.6);}100% {transform: rotate(0deg) scale(1, 1);}
}@keyframes twinkle {0% {transform: rotate(0deg) scale(1, 1);}25% {transform: rotate(10deg) scale(0.8, 0.8);}50% {transform: rotate(0deg) scale(0.9, 0.9);}75% {transform: rotate(-20deg) scale(0.6, 0.6);}100% {transform: rotate(0deg) scale(1, 1);}
}@-webkit-keyframes waving {0% {transform: rotate(-45deg);}25% {transform: rotate(-55deg);}50% {transform: rotate(-45deg);}75% {transform: rotate(-55deg);}100% {transform: rotate(-45deg);}
}@keyframes waving {0% {transform: rotate(-45deg);}25% {transform: rotate(-55deg);}50% {transform: rotate(-45deg);}75% {transform: rotate(-55deg);}100% {transform: rotate(-45deg);}
}
相关文章：
用html写一个有趣的鬼魂动画
<!DOCTYPE html> <html lang"en" > <head><meta charset"UTF-8"><title>一个有趣的鬼魂动画</title><link rel"stylesheet" href"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.m…...
【C++软件调试技术】C++软件开发维护过程中典型调试问题的解答与总结
目录 1、引发C软件异常的常见原因有哪些？ 2、排查C软件异常的常用方法有哪些？ 3、为什么要熟悉常见的异常内存地址？ 4、调试时遇到调用IsBadReadPtr或者IsBadWritePtr引发的异常，该如何处理？ 5、如何排查GDI对象泄…...
Pygame经典游戏：贪吃蛇
------------★Pygame系列教程★------------ Pygame经典游戏：贪吃蛇 Pygame教程01：初识pygame游戏模块 Pygame教程02：图片的加载缩放旋转显示操作 Pygame教程03：文本显示字体加载transform方法 Pygame教程04：dra…...
推荐一个免费使用Claude 3， GPT4和Gemini 1.5 Pro的网站
在探索人工智能的广阔天地时，我偶然间发现了You AI这一平台，它不仅更新了大量的模型，还慷慨地提供了免费的使用机会。兴奋之余，我迅速开始尝试这些新功能，并决定将我的体验分享给大家。以下是我试用的流程： 打开网站：点击左下角的Sign in蓝色框 https://you.comhttps://…...
An Investigation of Geographic Mapping Techniques for Internet Hosts（2001年）第二部分
下载地址：An investigation of geographic mapping techniques for internet hosts | Proceedings of the 2001 conference on Applications, technologies, architectures, and protocols for computer communications 被引次数：766 Padmanabhan V N, Subramanian L. An i…...
解锁生成式 AI 的力量：a16z 提供的 16 个企业指南
企业构建和采购生成式AI方面的16项改变 生成式 AI 领域趋势洞察：企业构建和采购生成式 AI 的方式正在发生重大转变，具体表现在：* 专注于可信度和安全性：75% 的企业将信任和安全性视为关键因素。* 优先考虑可扩展性和灵活性&#x…...
Kylin使用心得
Kylin是一个开源的分布式分析引擎，基于Apache Hadoop构建，专为处理大规模数据集而设计。以下是一些使用Kylin的心得体会： 快速查询 Kylin的OLAP引擎能够对大规模数据集进行高效的多维分析查询。通过预计算和存储多维度的聚合数据࿰…...
CentOS7使用Docker搭建Joplin Server并实现多端同步与公网使用本地笔记
文章目录 1. 安装Docker2. 自建Joplin服务器3. 搭建Joplin Sever4. 安装cpolar内网穿透5. 创建远程连接的固定公网地址 Joplin 是一个开源的笔记工具，拥有 Windows/macOS/Linux/iOS/Android/Terminal 版本的客户端。多端同步功能是笔记工具最重要的功能，…...
C语言100道练习题打卡（1）
1 有1，2，3，4四个数字，能组成多少个互不相同且不重复的三位数，都是多少 #include<stdio.h> //有1，2，3，4四个数字，能组成多少个互不相同且不重复的三位数ÿ…...
5G-A有何能耐？5G-A三载波聚合技术介绍
2024年被称作5G-A元年。5G-A作为5G下一阶段的演进技术，到底有何能耐呢？ 三载波聚合（3CC）被认为是首个大规模商用的5G-A技术，将带来手机网速的大幅提升。 █ 什么是3CC 3CC，全称叫3 Component Carriers…...
理解Go语言中上下文
开发人员有时会误解context.Context类型，尽管它是Go语言的关键概念之一，也是Go中并发代码的基础之一。接下来让我们看看这个概念，并确保我们理解为什么乃如何有效地使用它。 根据官方文档： 上下文(context)携带最后期限、取消信号和其他跨API边界的值。 下面让我们来看下这…...
[MySQL]数据库原理8——喵喵期末不挂科
希望你开心，希望你健康，希望你幸福，希望你点赞！ 最后的最后，关注喵，关注喵，关注喵，大大会看到更多有趣的博客哦！！！ 喵喵喵，你对我真的…...
【算法基础】插入排序与二分查找、升级二分查找
文章目录 1. 插入排序1.1 插入排序的思想1.2 插入排序的实现 2. 普通二分查找2.1 普通二分查找的思想2.2 普通二分查找的实现 3. 升级二分查找3.1 升级二分查找思想3.2 升级二分查找实现 1. 插入排序 1.1 插入排序的思想 插入排序很类似于已有一副有序的扑克牌，不断…...
在Vue3中如何使用H.265视频流媒体播放器EasyPlayer.js？
H5无插件流媒体播放器EasyPlayer属于一款高效、精炼、稳定且免费的流媒体播放器，可支持多种流媒体协议播放，可支持H.264与H.265编码格式，性能稳定、播放流畅，能支持WebSocket-FLV、HTTP-FLV，HLS（m3u8&#…...
基于51单片机的PM2.5监测系统设计—环境监测仪
基于51单片机的PM2.5监测系统 （仿真＋程序＋原理图＋PCB＋设计报告） 功能介绍 具体功能： 1.PM2.5传感器模块检测信息给单片机处理； 2.LCD1602实时显示PM2.5浓度和PM2.5报警阈值&#x…...
【C语言】指针篇-初识指针（1/5）
🌈个人主页：是店小二呀 🌈C语言笔记专栏：C语言笔记 🌈C笔记专栏： C笔记 🌈喜欢的诗句:无人扶我青云志 我自踏雪至山巅 文章目录 **内存和地址(知识铺垫(了解即可))**如何理解编址**指针变量*…...
【御控物联】物联网平台设备接入-JSON数据格式转化（场景案例四）
文章目录 一、背景二、解决方案三、在线转换工具四、技术资料 一、背景 物联网平台是一种实现设备接入、设备监控、设备管理、数据存储、消息多源转发和数据分析等能力的一体化平台。南向支持连接海量异构（协议多样）设备，实现设备数据云端存…...
stack和queue模拟实现
前言 上一期我们介绍了stack和queue的使用，本期我们来模拟实现一下他们！ 本期内容介绍 容器适配器 deque介绍 为什么stack和queue的底层选择deque为默认容器？ stack 模拟现实 queue 模拟实现 什么是容器适配器？ 适配器是一种设…...
docker操作
1、容器生命周期管理命令 docker run docker run --name tomcat8 -d -p 28080:8080 tomcat:8.5.38 docker run -i --name hausf --network bridge --ip 172.17.0.10 ubuntu:20.04 /bin/bash docker run -d --name hausf --net host ubuntu:20.04 /bin/bash docker run…...
分布式锁介绍
引言 分布式锁是一种用于协调不同进程或线程对共享资源的访问控制的机制。在分布式系统中，由于多个节点可能同时访问或修改同一资源，因此需要一个中心化的协调机制来确保资源的访问是有序的，避免数据不一致的问题。 分布式锁的特性…...
Unity 获取RenderTexture像素颜色值
拿来吧你~ 🦪功能介绍🌭Demo 🦪功能介绍 💡不通过Texture2D 而是通过ComputerShader 提取到RenderTexture的像素值，效率有提升哦！ 💡通过扩展方法调用，方便快捷：xxxRT.G…...
Tomcat以服务方式启动，无法访问网络共享目录问题
关于“Tomcat以服务方式启动，无法访问网络共享目录问题”解决方式如下： 1、通过doc命令【services.msc】打开本地服务找到，找到tomcat服务所在位置 2、右键打开Tomcat服务的属性 3、选择 登陆选项卡 4、选择“此账户”选项，并…...
SVN的介绍
首先SVN是什么： Apache下的一个开源的项目Subversion，通常缩写为 SVN，是一个版本控制系统。 版本控制系统是一个软件，它可以伴随我们软件开发人员一起工作，让我们编写代码的完整的历史保存下来。 目前它的各个版本的…...
ZYNQ-700呼吸灯
参考野火例程 实现呼吸灯即要调整led亮的占比时间，完成视觉上看起来由灭到亮或者由亮到灭的过程。 如果主频为50MHz，理论上一秒钟我们可以控制50_000_000次led的亮和灭，肉眼不可能分辨出来每一次亮灭，如果这50M我们设定为间隔一…...
UE5学习日记——制作多语言版本游戏，同时初步学习UI制作、多语言化、控制器配置、独立进程测试、打包配置和快速批量翻译等
所有的文本类，无论变量还是控件等都能实现本地化，以此实现不同语言版本。 在这里先将重点注意标注一下： 所有文本类的变量、控件等都可以多语言；本地化控制板中收集、编译时，别忘了编译这一步；支持批量复制…...
电脑重启后word文档空白或打不开，word无法自动修复，如何拯救
最近编辑word文档，写了好几个星期的内容随着电脑重启的一瞬间，灰飞烟灭，让我简直痛不欲生！ 好在，天无绝人之路，以下两个方法拯救了地球 第一，普通的文档word自动修复不好使的时候，…...
MVC和MVVM这两种设计模式的区别
一、MVC和MVVM是什么？ MVC是Model-View-Controller的简写，Model就是模型，对应后端数据，View就是视图对应用户界面，Controller就是控制器，对应页面的业务逻辑。 MVC的工作机制原理就是，用户操作…...
淘宝app端商品详情数据采集（商品价格，商品库存，商品销量，商品优惠券）
在淘宝App端采集商品详情数据，包括商品价格、库存、销量以及优惠券信息，可以通过多种方式实现。以下是几种常见的方法： 使用淘宝开放平台API： 淘宝开放平台提供了一系列API接口，这些接口允许开发者获取淘宝商品的详细…...
第42篇：随机存取存储器（RAM）模块＜一＞
Q：本期开始我们分期介绍随机存取存储器（RAM）模块及其设计实现方法。 A：随机存储器RAM，即工作时可以随时从一个指定地址读出数据，也可以随时将数据写入一个指定的存储单元。 DE2-115开发板上的Cyclone IV …...
在Java中实现记录1000万用户连续7天登录的功能，可以使用Redis的Bitmap来跟踪每个用户的登录状态
在Java中实现记录1000万用户连续7天登录的功能，可以使用Redis的Bitmap来跟踪每个用户的登录状态。以下是一个简化的Java示例，使用了Jedis库作为Redis的Java客户端。 首先，确保你已经在项目中添加了Jedis的依赖。如果你使用Maven，…...
商城网站怎么建设/网络营销推广8种方法
文章目录 引言I 文章代码高亮的实现1.1 mp-html的用法1.2 更新支持语言样式库II 自动插入代码块code标签2.1 方式一：在得到文章数据之后使用正则添加code标签2.2 方式二：在发布wp文章时自动插入代码块code标签2.3 小结see also引言 最近发现一些博客类小程序的开发者不懂得处…...
商城网站布局/提交百度收录
java中的类和方法的修饰符Java程序在定义类时，除了使用class关键字标识之外，还可以在class之前增加若干类的修饰符来修饰限定所定义的类的特性。类的修饰符分为访问控制符和非访问控制符两大类。修饰符之间的先后排列次序对类的性质没有任何影响。一&…...
19年做网站/网拍外宣怎么推广
导语大家好，我是智能仓储物流技术研习社的社长，老K。欢迎加入社区。社区加入|原创12万字书等你领2020-12-14之前给大家整理了一篇中国仓储物流技术行业的发展简史图谱，其中有些错误。本次经同行的指点特此勘误更新。在此鸣谢南天凯玛王总、南…...
政府网站网页设计/16888精品货源入口
基本环境：安装好pyCharm社区版使用 pip install Django安装好Django步骤1：使用pyCharm新建项目1. pyCharm新建项目示意图步骤2：新建Django项目命令：django-admin startproject project_name2-1. 使用命令行新建Django项目2-2. Dja…...
网站建设定制/微信管理系统登录
要理解JavaScript，你得首先放下对象和类的概念，回到数据和代码的本原。前面说过，编程世界只有数据和代码两种基本元素，而这两种元素又有着纠缠不清的关系。JavaScript就是把数据和代码都简化到最原始的程度。 JavaScript中的数…...
商务网站规划设计要点/品牌策划方案模板
转载自http://cnlearn.linksprite.com/?p5248#.VwZrzvl95hE 数字 I/O （1）pinMode(pin, mode) 数字IO 口输入输出模式定义函数，pin 表示为0～13， mode 表示为INPUT 或OUTPUT 。（2） digitalWrite(…...