当前位置： 首页 > news >正文

我希望，你把篮球和鸡联系起来想一想。。。

news 2025/6/26 3:29:07

在这里插入图片描述

“我希望，你把篮球和鸡联系起来想一想。”
“篮球和鸡?”
“我有一个好点子…”

目录

  • 创建页面
    • 页面准备
    • 实现基础样式
    • 实现鸡的跑马灯
  • 篮球弹跳
    • 实现篮球击出
    • 检查是否击中鸡并计算得分
    • 实现看一眼就爆炸效果
  • 总结
    • 技术点
    • 完整代码

创建页面

页面准备

首先开始万恶的第一步，创建一个空的HTML页，页面默认目录内容如下方代码块。

在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body></body>
</html>

再分别准备鸡的gif、篮球素材、爆炸gif素材如下。

实现基础样式

万事俱备只欠东风，先在页面设计一个固定的区域框框，把鸡给框起来。

<div class="container"><img src="img/c.gif" class="rooster" id="rooster" />
</div>

在这里插入图片描述

实现鸡的跑马灯

通过@keyframes动画实现跑马灯效果，固定在左侧刷出，在右侧消失。配合上gif动态图整个页面的氛围一下就燃起来了。。

在这里插入图片描述

@keyframes moveRooster {0% {left: 0;/* 起始位置在左边 */}100% {left: 100%;/* 结束位置在右边 */}}

篮球弹跳

实现篮球击出

主角之一鸡有了，现在还差篮球，把篮球图片放到页面上，再给它一个居中效果，这下就齐活了。

在这里插入图片描述

给区域添加一个监听器，当点击时则让篮球朝着对应的区域击出，这里需要注意几点：

  1. 如果正在击出的过程中，需要组织多次点击
  2. 获取篮球中心位置及点击位置计算方向
  3. 通过设置移动的距离，再飞行的过程中添加动画
  4. 设置动画时长

在这里插入图片描述

	// 添加事件监听器到整个文档document.addEventListener('click', (event) => {if (isBouncing) return; // 如果正在弹跳，阻止多次点击isBouncing = true; // 设置为正在弹跳状态// 获取篮球中心位置const ballRect = basketball.getBoundingClientRect();const ballCenterX = ballRect.left + ballRect.width / 2;const ballCenterY = ballRect.top + ballRect.height / 2;// 获取点击位置const clickX = event.clientX;const clickY = event.clientY;// 计算方向const deltaX = clickX - ballCenterX;const deltaY = clickY - ballCenterY;const angle = Math.atan2(deltaY, deltaX); // 计算角度const distance = 420; // 向上飞出的距离const offsetX = Math.cos(angle) * distance; // X方向的位移const offsetY = Math.sin(angle) * distance; // Y方向的位移// 先让篮球向上飞出basketball.style.transition = 'transform 0.5s ease'; // 设置飞出时的过渡时间basketball.style.transform = `translate(${offsetX}px, ${-distance}px)`; // 向上和方向移动篮球setTimeout(() => {basketball.style.transition = 'transform 0.7s ease'; basketball.style.transform = 'translate(0, 0)'; basketball.style.transition = 'transform 0.2s ease'; basketball.style.transform += ' translateY(-30px)'; setTimeout(() => {basketball.style.transform = 'translate(0)'; isBouncing = false;basketball.style.transition = 'transform 0.2s ease';}, 200); // 给拍动效果一些时间后检测碰撞}, 500); // 向上移动的时间});

检查是否击中鸡并计算得分

现在鸡也能飞了，球也能打了，该计算得分了，不然搁这砸来砸去的也没有一点成就感。
这里主要通过JS获取鸡和篮球的矩形，计算两者的中心点和距离，再得到其半径距离，根据距离判断是否击中，目前来说这种效果不是很好，建议可以用getBoundingClientRect()获取两者的位置来判断是否相交，这样应该效果好一点。

在这里插入图片描述

实现看一眼就爆炸效果

通过上述步骤已经完成了大部分工作，鸡也飞了，球也打了，分也得了。。但是这鸡被打中后还是大摇大摆的飞走了，感觉不是太符合物理定律，怎么着也得给一点回应吧，那就让它爆炸得了。。

在这里插入图片描述

单独写一个函数，当篮球击中鸡时设置为爆炸的gif，0.5s后让鸡从起点再次飞出。

总结

技术点

  1. @keyframes 是 CSS 动画的一个重要部分，用于创建和定义 CSS 动画的关键帧。通过使用 @keyframes，可以控制动画在不同时间点的样式变化。

基本语法

@keyframes animation-name {from {/* 起始状态的样式 */}to {/* 结束状态的样式 */}
}/* 或者使用百分比 */
@keyframes animation-name {0% {/* 起始状态的样式 */}100% {/* 结束状态的样式 */}
}

关键属性

  • animation-name：指定动画的名称，与 @keyframes 中定义的名称相同。
  • from 和 to：这两个关键字表示动画的起始和结束状态。也可以使用百分比来定义多个中间状态。
  • 百分比：除了 from 和 to，还可以使用 0%、25%、50%、75% 和 100% 等来定义多个关键帧，从而实现更复杂的动画效果。

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>公鸡与篮球</title><style>body {overflow: hidden;/* 隐藏溢出部分 */margin: 0;/* 移除默认边距 */background-color: white;/* 背景色 */}.container {position: relative;width: 1000px;/* 设置容器宽度 */height: 600px;/* 可以设置一个合适的高度 */margin: 100px auto 0;/* 上边距100px，左右居中 */display: flex;flex-direction: column;align-items: center;/* 居中对齐 */justify-content: flex-start;/* 顶部对齐 *//* border: 2px solid #333; /* 添加边框，便于查看范围 */*/ background-color: #fff;/* 设置容器背景色 */box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;}.score {position: absolute;top: 20px;/* 距离顶部的距离 */right: 20px;/* 距离右边的距离 */font-size: 24px;/* 字体大小 */font-weight: bold;/* 字体加粗 */color: #333;/* 字体颜色 */z-index: 10;/* 确保得分在其他元素之上 */}.rooster {width: 200px;/* 公鸡图片宽度 */position: absolute;animation: moveRooster 4s linear infinite;/* 添加动画 */}@keyframes moveRooster {0% {left: 0;/* 起始位置在左边 */}100% {left: 100%;/* 结束位置在右边 */}}.ball {margin-top: 450px;/* 与公鸡图片的距离 */display: flex;justify-content: center;/* 居中对齐 */width: 100%;/* 容器宽度 */cursor: pointer;/* 鼠标悬停时显示手形光标 */}.ball img {width: 100px;/* 篮球图片宽度 */transition: transform 0.2s ease;/* 添加平滑过渡效果 */}</style></head><body><div class="container"><div class="score" id="score">得分: 0</div> <!-- 得分显示 --><img src="img/c.gif" class="rooster" id="rooster" /><div class="ball" id="basketball"><img src="img/篮球.png" alt="篮球" /></div></div><script>document.addEventListener('DOMContentLoaded', (event) => {const basketball = document.getElementById('basketball');const rooster = document.getElementById('rooster');const scoreDisplay = document.getElementById('score');let isBouncing = false;let score = 0; // 初始化得分// 添加事件监听器到整个文档document.addEventListener('click', (event) => {if (isBouncing) return; // 如果正在弹跳，阻止多次点击isBouncing = true; // 设置为正在弹跳状态// 获取篮球中心位置const ballRect = basketball.getBoundingClientRect();const ballCenterX = ballRect.left + ballRect.width / 2;const ballCenterY = ballRect.top + ballRect.height / 2;// 获取点击位置const clickX = event.clientX;const clickY = event.clientY;// 计算方向const deltaX = clickX - ballCenterX;const deltaY = clickY - ballCenterY;const angle = Math.atan2(deltaY, deltaX); // 计算角度// 计算移动的距离，修改这里可以调整飞出的高度和距离const distance = 420; // 向上飞出的距离const offsetX = Math.cos(angle) * distance; // X方向的位移const offsetY = Math.sin(angle) * distance; // Y方向的位移// 先让篮球向上飞出basketball.style.transition = 'transform 0.5s ease'; // 设置飞出时的过渡时间basketball.style.transform = `translate(${offsetX}px, ${-distance}px)`; // 向上和方向移动篮球// 在向上飞出后再添加向下的动画setTimeout(() => {basketball.style.transition = 'transform 0.7s ease'; // 设置掉落时的过渡时间basketball.style.transform = 'translate(0, 0)'; // 重置篮球位置basketball.style.transition = 'transform 0.2s ease'; // 短暂时间的上下拍动basketball.style.transform += ' translateY(-30px)'; // 向上拍动，增加拍动幅度// 检查篮球是否击中公鸡setTimeout(() => {const hit = isHit();console.log('Hit:', hit);if (hit) {score++; // 得分加1scoreDisplay.textContent = '得分: ' + score; // 更新得分显示explodeRooster(); // 处理公鸡爆炸效果}basketball.style.transform = 'translate(0)'; // 恢复到原始位置isBouncing = false; // 重置状态basketball.style.transition = 'transform 0.2s ease'; // 恢复过渡时间}, 200); // 给拍动效果一些时间后检测碰撞}, 500); // 向上移动的时间});// 检查篮球是否击中公鸡function isHit() {const roosterRect = rooster.getBoundingClientRect(); // 获取公鸡的矩形const ballRect = basketball.getBoundingClientRect(); // 获取篮球的矩形// 计算公鸡的中心点const roosterCenterX = roosterRect.left + roosterRect.width / 2;const roosterCenterY = roosterRect.top + roosterRect.height / 2;// 计算篮球的中心点const ballCenterX = ballRect.left + ballRect.width / 2;const ballCenterY = ballRect.top + ballRect.height / 2;// 计算两者的距离const distanceX = ballCenterX - roosterCenterX;const distanceY = ballCenterY - roosterCenterY;const distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY); // 计算两点之间的距离// 计算半径const ballRadius = ballRect.width / 2; // 取篮球宽度的一半作为半径const roosterRadius = Math.sqrt((roosterRect.width / 2) ** 2 + (roosterRect.height / 2) **2); // 取公鸡的对角线的一半作为半径// 设置额外的阈值，调整这个值来缩小范围const hitThreshold = 200; // 可以根据需要调整这个值// 碰撞检测条件，减去阈值const hit = distance < (ballRadius + roosterRadius - hitThreshold);// 打印碰撞检测结果console.log('Collision Detected:', hit);return hit;}// 公鸡爆炸效果function explodeRooster() {const originalSrc = rooster.src; // 保存原始公鸡图片的路径rooster.src = 'img/explosion.gif'; // 设置为爆炸GIFsetTimeout(() => {rooster.src = originalSrc; // 还原公鸡图片rooster.style.animation = 'moveRooster 5s linear infinite'; // 恢复公鸡的动画}, 500); // 持续0.5秒rooster.style.animation = 'none'; // 暂停公鸡的动画}});</script></body>
</html>

相关文章：

我希望，你把篮球和鸡联系起来想一想。。。

“我希望&#xff0c;你把篮球和鸡联系起来想一想。” “篮球和鸡?” “我有一个好点子…” 目录 创建页面页面准备实现基础样式实现鸡的跑马灯 篮球弹跳实现篮球击出检查是否击中鸡并计算得分实现看一眼就爆炸效果 总结技术点完整代码 创建页面 页面准备 首先开始万恶的第一…...

编程日记 2024/10/24 21:52:47

STM32 ADC介绍

文章目录 STM32 ADC介绍一、ADC的基本概念二、STM32 ADC的主要特点高分辨率&#xff1a;多通道输入&#xff1a;多种工作模式&#xff1a;内置温度传感器和参考电压&#xff1a; 三、ADC的工作原理采样阶段&#xff1a;转换阶段&#xff1a;数据存储&#xff1a; 四、ADC的配置…...

编程日记 2024/10/24 21:51:46

JavaWeb合集12-Redis

十二、Redis 1、Redis 入门 Redis是一个基于内存的key-valule 结构数据库。 特点&#xff1a;基于内存存储&#xff0c;读写性能高 场景&#xff1a;适合存储热点数据(热点商品、资讯、新闻) Redis安装包分为Windows版和Linux版&#xff1a; Windows版 下载地址: https://gith…...

编程日记 2024/10/24 21:49:43

【C++】在Windows中使用Boost库——实现TCP、UDP通信

目录 一、编译Boost库 二、TCP服务端 三、TCP客户端 四、UDP连接 一、编译Boost库 1. 先去官网下载Boost库源码 2. 点击下载最新的版本 下载Windows环境的压缩包&#xff0c;然后解压 3. 在解压后的目录路径下找到“bootstrap.bat” 打开控制台&#xff0c;在“bootstrap.…...

编程日记 2024/10/24 21:48:42

怎么提取pdf的某一页？批量提取pdf的某一页的简单方法

怎么提取pdf的某一页&#xff1f;在日常工作与学习中&#xff0c;我们经常会遇到各式各样的PDF文件&#xff0c;它们以其良好的兼容性和稳定性&#xff0c;成为了信息传输和存储的首选格式。然而&#xff0c;在浩瀚的文档海洋中&#xff0c;有时某个PDF文件中的某一页内容尤为重…...

编程日记 2024/10/24 21:47:41

Github优质项目推荐（第八期）

文章目录 Github优质项目推荐 - 第八期一、【manim】&#xff0c;66.5k stars - 创建数学动画的 Python 框架二、【siyuan】&#xff0c;19.5k stars - 个人知识管理软件三、 【GetQzonehistory】&#xff0c;1.3k stars - 获取QQ空间发布的历史说说四、【SecLists】&#xff0…...

编程日记 2024/10/24 21:46:40

快读快写模板

原理 众所周知&#xff0c;在c中&#xff0c;用putchar和getchar输入输出字符的速度是很快的&#xff0c;因此&#xff0c;我们可以考虑把数字转化为字符&#xff0c;按位输出&#xff1b;把字符读入后转化为数字的每一位。 该快读快写可以实现对所有整数类型的输入。 templ…...

编程日记 2024/10/24 21:44:38

make_blobs函数

make_blobs 是 scikit-learn 库中用于生成聚类&#xff08;或分类&#xff09;数据集的函数。它通常用于生成多个高斯分布的簇状数据&#xff0c;以便进行分类或聚类算法的测试和验证。make_blobs 非常灵活&#xff0c;可以控制簇的数量、样本数量、每个簇的标准差、中心点等参…...

编程日记 2024/10/24 21:43:37

特斯拉Optimus：展望智能生活新篇章

近日&#xff0c;特斯拉举办了 "WE ROBOT" 发布会&#xff0c;发布会上描绘的未来社会愿景&#xff0c;让无数人为之向往。在这场吸引全球无数媒体的直播中&#xff0c;特斯拉 Optimus 人形机器人一出场就吸引了所有观众的关注。从多家媒体现场拍摄的视频可以看出来&…...

编程日记 2024/10/24 21:42:35

基于Leaflet和SpringBoot的全球国家综合检索WebGIS可视化

目录 前言 一、Java后台程序设计 1、业务层设计 2、控制层设计 二、WebGIS可视化实现 1、侧边栏展示 2、空间边界信息展示 三、标注成果展示 1、面积最大的国家 2、国土面积最小的国家 3、海拔最低的国家 4、最大的群岛国家 四、总结 前言 在前面的博文中&#xff…...

编程日记 2024/10/24 21:40:32

【Linux】/usr/share目录

在Linux和类Unix操作系统中&#xff0c;/usr/share 目录是一个用于存放共享数据文件的目录。这个目录遵循Filesystem Hierarchy Standard (FHS)&#xff0c;它定义了Linux系统中文件和目录的组织结构。/usr 代表 “user”&#xff0c;而 share 表示这些文件可以被系统上的多个用…...

编程日记 2024/10/24 21:39:30

Java中如何应用序列化 serialVersionUID 版本号呢？

文章目录 示例1&#xff1a;没有 serialVersionUID 的类输出结果&#xff1a;示例2&#xff1a;类修改后未定义 serialVersionUID可能出现的问题&#xff1a;示例3&#xff1a;显式定义 serialVersionUID总结最佳实践推荐阅读文章 为了更好地理解 serialVersionUID 的使用&…...

编程日记 2024/10/24 21:37:28

面部识别技术：AI 如何识别人脸

在科技飞速发展的今天&#xff0c;面部识别技术已经广泛应用于各个领域&#xff0c;从手机解锁到安防监控&#xff0c;从金融支付到门禁系统&#xff0c;面部识别技术正在改变着我们的生活方式。那么&#xff0c;AI 究竟是如何识别人脸的呢&#xff1f;让我们一起来揭开面部识别…...

编程日记 2024/10/24 21:36:28

全面解析文档对象模型（DOM）及其操作(DOM的概念与结构、操作DOM节点、描述DOM树的形成过程、用DOMParser解析字符串为DOM对象）

1. 引言 文档对象模型&#xff08;DOM&#xff09;是Web开发中的核心概念&#xff0c;它提供了一种结构化的方法来表示和操作HTML和XML文档。通过DOM&#xff0c;开发者可以动态地访问和更新文档的内容、结构和样式。本文将深入探讨DOM的概念与结构、操作DOM节点的方法、DOM树…...

编程日记 2024/10/24 21:35:27

字符串使用方法：

字符串: -- 拼接字符串 SELECT CONCAT(糯米,啊啊啊撒,删掉); -- 字符长度 SELECT LENGTH(asssssssggg); -- 转大写 SELECT UPPER(asdf); -- 转小写 SELECT LOWER(ASDFG); -- 去除左边空格 SELECT LTRIM( aaaasdrf ); -- 去除右边空格 SELECT RTRIM( aaaasdff ); -- 去除两端…...

编程日记 2024/10/24 21:33:24

想让前后端交互更轻松？alovajs了解一下？

作为一个前端开发者&#xff0c;我最近发现了一个超赞的请求库 alovajs&#xff0c;它真的让我眼前一亮&#xff01;说实话&#xff0c;我感觉自己找到了前端开发的新大陆。大家知道&#xff0c;在前端开发中&#xff0c;处理 Client-Server 交互一直是个老大难的问题&#xff…...

编程日记 2024/10/24 21:32:23

E/MicroMsg.SDK.WXMediaMessage:checkArgs fail,thumbData is invalid 图片资源太大导致分享失败

1、微信分享报&#xff1a; 2、这个问题是因为图片太大导致&#xff1a; WXWebpageObject webpage new WXWebpageObject();webpage.webpageUrl qrCodeUrl;//用 WXWebpageObject 对象初始化一个 WXMediaMessage 对象WXMediaMessage msg new WXMediaMessage(webpage);msg.tit…...

编程日记 2024/10/24 21:31:22

No.21 笔记 | WEB安全 - 任意文件绕过详解 part 3

&#xff08;一&#xff09;空格绕过 原理 Windows系统将文件名中的空格视为空&#xff0c;但程序检测代码无法自动删除空格&#xff0c;使攻击者可借此绕过黑名单限制。基于黑名单验证的代码分析 代码未对上传文件的文件名进行去空格处理&#xff0c;存在安全隐患。相关代码逻…...

编程日记 2024/10/24 21:29:21

咸鱼自动发货 免费无需授权

下载&#xff1a;&#xff08;两个都可以下&#xff0c;自己选择&#xff09; https://pan.quark.cn/s/1e3039e322ad https://pan.xunlei.com/s/VO9ww89ZNkEg_Fq1wRr-fk9ZA1?pwd8x9s# 不是闲管家 闲鱼自动发货&#xff08;PC端&#xff09; 暂不支持密&#xff0c;免费使…...

编程日记 2024/10/24 21:27:17

Netty核心组件

1.Channel Channel可以理解为是socket连接&#xff0c;在客户端与服务端连接的时候就会建立一个Channel&#xff0c;它负责基本的IO操作&#xff08;binf()、connect()、rad()、write()等&#xff09;&#xff1b; 1.1 Channel的作用 通过Channel可获得当前网络连接的通道状态…...

编程日记 2024/10/24 21:26:16

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

编程新知 2025/6/25 22:16:28

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

编程新知 2025/6/20 13:16:00

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/6/17 5:28:58

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

编程新知 2025/6/25 22:59:54

AI书签管理工具开发全记录（十九）：嵌入资源处理

1.前言 &#x1f4dd; 在上一篇文章中&#xff0c;我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源&#xff0c;方便后续将资源打包到一个可执行文件中。 2.embed介绍 &#x1f3af; Go 1.16 引入了革命性的 embed 包&#xff0c;彻底改变了静态资源管理的…...

编程新知 2025/6/25 2:46:54

Mac下Android Studio扫描根目录卡死问题记录

环境信息 操作系统: macOS 15.5 (Apple M2芯片)Android Studio版本: Meerkat Feature Drop | 2024.3.2 Patch 1 (Build #AI-243.26053.27.2432.13536105, 2025年5月22日构建) 问题现象 在项目开发过程中&#xff0c;提示一个依赖外部头文件的cpp源文件需要同步&#xff0c;点…...

编程新知 2025/6/19 16:29:01

代理篇12|深入理解 Vite中的Proxy接口代理配置

在前端开发中，常常会遇到 跨域请求接口 的情况。为了解决这个问题，Vite 和 Webpack 都提供了 proxy 代理功能，用于将本地开发请求转发到后端服务器。 什么是代理（proxy）？ 代理是在开发过程中，前端项目通过开发服务器，将指定的请求“转发”到真实的后端服务器，从而绕…...

编程新知 2025/6/17 5:18:28

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2025/6/21 21:13:58

iOS性能调优实战：借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

编程新知 2025/6/19 5:23:30

十九、【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础：用户列表与角色模型的初步构建 前言准备工作第一部分：回顾 Django 内置的 `User` 模型第二部分：设计并创建 `Role` 和 `UserProfile` 模型第三部分：创建 Serializers第四部分：创建 ViewSets第五部分：注册 API 路由第六部分：后端初步测…...

编程新知 2025/6/21 11:15:11