HTML计划更新

已于 2023-12-05 18:29:39 修改
阅读量67 收藏
点赞数
文章标签： html 前端
于 2023-12-05 18:27:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73158088/article/details/134814158
版权

这是之前的计划html代码更新

1、因为背景单调我用了视频循环播放

2、每次打开都是一个背景音乐我用js加入了随机播放，就可以在保存的歌曲中随机播放一首，让生活变得多姿多彩，让坚持每一时刻意义都附着在歌曲上

代码 分享

html部分

<!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>
    <link rel="stylesheet" href="CSS/周密计划.css">
</head>
<body>
    <div class="box">
        <video muted autoplay loop>
            <source src="../日程/photo/日落椰子树.mp4">
        </video>
    </div>
    <audio id="musicPlayer" loop="true" preload="auto" autoplay="autoplay"></audio>
    
    <div class="t1" >
        <table border="1"id="MyTable">
            <caption style="color:rgb(0, 255, 128)">日程安排</caption>  
            <tr><td>time</td><td>plan</td></tr>
            <tr><td>7:00</td><td>Get up</td></tr>
            <tr><td>7:30</td><td>早餐</td></tr>
            <tr><td>8:30</td><td></td></tr>
            <tr><td>9:00</td><td></td></tr>
            <tr><td>9:20</td><td></td></tr>
            <tr><td>10:05</td><td>数据结构89章</td></tr>
            <tr><td>10:30</td><td></td></tr>
            <!-- <tr><td>————</td><td></td></tr>  -->
            <tr><td>11:30</td><td>午餐</td></tr> 
            <tr><td>12:00</td><td>午睡</td></tr>
            <tr><td>13:00</td><td></td></tr>
            <tr><td>14:00</td><td></td></tr>
            <tr><td>15:05</td><td></td></tr>
            <tr><td>15:30</td><td></td></tr>
            <tr><td>16:00</td><td>健身</td></tr>
            <tr><td>17:00</td><td>晚饭</td></tr>
            <tr><td>18:00</td><td></td></tr>
            <tr><td>19:30</td><td>英语刷题</td></tr>
            <tr><td>20:30</td><td></td></tr>
            <tr><td>21:00</td><td></td></tr>
            <tr><td>22:00</td><td>music更新计划</td></tr>
            <tr><td>————————</td><td>————————</td></tr>
            <tr><td>昨日计划完成百分比</td><td>60%</td></tr> 
            <tr><td>昨日自律程度百分比</td><td>76%</td></tr>
            <tr><td>后悔程度</td><td>56%</td></tr>
            <tr><td>影响计划原因</td><td>晚起</td></tr>
            <tr><td>明天预计完成百分比</td><td>96%</td></tr>
            <tr><td>幸运值</td><td>99%</td></tr>
            <tr><td>坚持程度</td><td>100%</td></tr>
            <tr><td>不足</td><td>没时间java跟进</td></tr>
            
        </table>   
    </div>
    <div class="t2">
        <table border="1" id="My_Month">
            <caption style="color:rgb(128, 0, 255)">月度计划</caption>
            <tr><td>月底</td><td>减到140斤</td></tr>
            <tr><td>半月底</td><td>完成数据结构复习</td></tr>
            <tr><td>完成四级备考</td><td></td></tr>
            <tr><td>完成机组复习</td><td></td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
        </table>
    </div>
    <div class="t3">
        <table border="1" id="My_Week">
            <caption style="color:rgb(255, 0, 144)">周密计划</caption>
            <tr><td>跟进java课</td></tr>
            <tr><td>基本熟练掌握四级题型和答题技巧</td></tr>
            <tr><td>博客写两篇</td></tr>
            <tr><td></td></tr>
            <tr><td></td></tr>
            <tr><td>周三、五、日复习</td></tr>
            
        </table>
    </div>
    <div class="t4">
        <table border="1" id="My_Holiday">
            <caption style="color:rgb(255, 0, 144)">《紧急任务》</caption>
            <tr><td>准备四级</td></tr>
            <tr><td>复习数据结构</td></tr>
            <tr><td>复习机组</td></tr>
            <tr><td>复习概率</td></tr>
            <tr><td>复习物理</td></tr>
            <tr><td></td></tr>
        </table>
    </div>
    <!-- 导入JS代码 -->
    <script src="../日程/JS/日程.js"></script>
</body>
</html>

css部分

*{
    margin:0px;
    padding:0px;
}
table{
    font-size: 18px;
    color:rgb(0, 0, 0);
}
img{
    opacity:0.9;
    width:30%;
    height:50%;
    margin-left: 480px;
}
#MyTable{
   /* background-image: url("../photo/5.1.jpg");
  background-repeat: no-repeat;
  background-size: cover; */
    
    margin-top: 10px;
    margin-left: 400px;
}
body{
    background-color:antiquewhite;
}
caption{
    font-size:18px;
}
#My_Month{
    /* background-: url("../photo/93d1076413c3e8918cac2318e6ff5d7e.mp4  ");  */
    /* background-repeat: no-repeat;
    background-size: cover; */
    width:50%;
    height:20%;
  }

/* 背景 */
* {
    padding: 0;
    margin: 0;
  }
  .box {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .box > video {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.75;
  }
  .content {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: skyblue;
    z-index: 1;
}
div.t1{
    float:right;
    margin-right: 100px;
    display: inline;
    width: 650px;
    height: 800px;
}
div.t2{
    width:200px;
    height:800px;
    float:left;
    display: inline;
}
div.t3{
    margin-left: 50px;
    float: left;
    width:250px;
    height:800px;
    display: inline;
}
div.t4
{
    margin-left: 50px ;
    float:left;
    width:300px;
    height:800px;
    display: inline;
}

JS部分

const musicList = [
    '../日程/旺仔小乔 - 下雨天.mp3',
    '../日程/July - Beyond the Memory.mp3',
    '../日程/m-taku - Komorebi (叶隙间洒落的阳光).flac',
    '../日程/岑宁儿 - 追光者.mp3',
    '../日程/一笑倾城.mp3',
    '../日程/小咪 - 我走后.mp3',
    '../日程/邓寓君(等什么君) - 春庭雪.flac',
    '../日程/于冬然 - 其实都没有.flac',
    
];

let playedMusicList = [];

function getRandomMusic() {
    let remainderList = musicList.filter(item => !playedMusicList.includes(item));
    if (remainderList.length === 0) {
        playedMusicList = [];
        remainderList = musicList;
    }
    const randomIndex = Math.floor(Math.random() * remainderList.length);
    const randomMusic = remainderList[randomIndex];
    playedMusicList.push(randomMusic);
    return randomMusic;
}
// 播放音乐
function playRandomMusic() {
    const musicPlayer = document.getElementById('musicPlayer');
    
    // 打乱数组顺序
    musicList.sort(() => Math.random() - 0.5);
    
    const randomMusic = getRandomMusic();
    musicPlayer.src = randomMusic;
    musicPlayer.load();
    musicPlayer.play();
}

// 页面加载完成时触发
window.addEventListener('load', function() {
    playRandomMusic();

    // 监听音乐播放完毕事件，继续随机播放下一首音乐
    const musicPlayer = document.getElementById('musicPlayer');
    musicPlayer.addEventListener('ended', function() {
        playRandomMusic();
    });
});

希望可以帮到大家.。

我只是个初学者——

手把手教你基于HTML、CSS搭建我的相册（上）
官方推荐
03-20 1万+
通过有趣的demo来带你掌握前端基础
如何使用lxml判断网站公告是否更新
herosunly的博客
07-01 2万+
1. 搭建环境 1.1 安装Python库 1.2 下载ChromeDriver 1.2.1 查看Chrome版本 1.2.2 下载适配的ChromeDriver 2. 思路分析与代码讲解 2.1 常用的XPath语法 2.2 思路分析 2.2.1 ssl.SSLError: [SSL: CERTIFICATE_VERIFY_FAILED] certificate verify failed (_ssl.c:833) 2.2.2 整体思路讲解 2.3 完整代码 3. 使用计划任务修改代码 3.1 修改代码
Win10关闭自动更新
liu_chenglong的博客
04-18 1774
通过多个途径关闭和禁用win10的自动更新。
20+免费精美响应式Html5 网站模板01(含源码)
努力是为了站在万人之中，成为别人的光
06-02 1万+
今天花了几个小时的时间整理了一些响应式网站模板，代码下载方式放在了文章末尾，有什么问题可以私信我或者评论区留言，此文章为系列文章，后面还会继续更新网站模板0203等等
5分钟自动更新php,使用织梦计划任务功能让网站每5分钟更新一次
weixin_39843078的博客
03-10 2495
使用过dedecms织梦系统的人都知道有一个计划任务的功能，这个功能很多人不知道怎么使用，今日小编就讲讲如何使用计划任务让网站每5分钟自动更新首页，也就是自动生成内容来自dedecmsindex.html文件，让网站的静态文件保持一个更新的状态，这个的好处就是可以让蜘蛛在爬取index.html的时候，不会返回状态码304 ，因为你的首页是更新的状态，有利于蜘蛛的爬取。大家可以看看蜘蛛爬取的状态...
苹果cms首页文件html,苹果cms首页视频不更新怎么解决
weixin_35241774的博客
06-16 8234
苹果cms首页视频不更新怎么解决？这个问题的答案是多样性的，比如没有设置苹果cms全自动定时采集。或是首页生成了html静态文件等问题。【1】没有设置苹果cms全自动定时采集，导致苹果cms首页视频不更新站长们在建立好自己的网站添加好自定义资源库后，必须每日采集才会有新影片出现在网站上。由于手动采集方式比较耗时间和精力更新也不够及时，特别希望能有一个全自动定时采集方法来帮助网站增加每日视频资源的更...
谷歌浏览器怎么关闭自动更新？
weixin_58344191的博客
05-10 3098
右键选择【管理】——【计算机管理本地】——【系统工具】——【任务计划程序】——【任务计划程序库】，这里找到两个和Google自动更新相关的任务计划【GoogleUpdateTaskMachineCore】与【GoogleUpdateTaskMachineUA】，谷歌浏览器安装完成后，每天都会自动更新到最新的版本，但是对于有些程序的驱动，浏览器一更新就不能自动启动浏览器，会给我们带来很多困扰。下面我们介绍怎么将谷歌浏览器自动更新关闭，如果需要更新，手动更新即可。
Java 程序员全面成长计划
热门推荐
人生嘛！无非是左脚比右脚前，右脚再比左脚前，明天比今天好！
03-15 11万+
作为一名 Java 程序员，全面而系统的学习是快速成长的关键。以下是推荐的学习路线和成长计划，旨在全方位提升你的技术能力和解决问题的能力。
sqlserver 执行计划
weixin_41048746的博客
05-31 4596
一个很好的手册分享，执行计划里的属性解释官方文档：https://docs.microsoft.com/zh-cn/sql/relational-databases/showplan-logical-and-physical-operators-reference?view=sql-server-2017 想复杂的事情简单说，在看执行计划的其他文章的时候，发现直接上很复杂的DDL脚本来讲解，这样...
web前端html期末大作业实例 (1500套)
HTML网页设计
10-03 9万+
临近期末，大一新生的各种考试和专业结课作业纷至沓来。web实训大作业、网页期末作业、web课程与设计、网页设计等，简直让人头大。你还在为网页设计老师的作业要求感到头大？网页作业无从下手？网页要求的总数量太多？没有合适的模板？等等一系列问题。你想要解决的问题，在这篇博文中基本都能满足你的需求, 废话不多说，直接看效果。📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确
html学习计划
09-02
一个有效的HTML学习计划对于新手来说至关重要，因为它可以帮助系统地掌握这项技能。以下是一个详细的HTML学习计划，旨在帮助初学者逐步熟悉并精通HTML。 1. **基础知识**： - **HTML概述**：理解HTML的基本概念，...
周计划程序：动态HTML，CSS和JavaScript周计划程序应用
02-13
在周计划程序中，当用户添加、修改或删除任务时，JavaScript会改变HTML结构，从而在不刷新整个页面的情况下实现内容的动态更新。 5. **周计划应用程序的功能**：这样的应用通常包括以下功能： - 日历视图：展示一...
HTML5事件日历/计划程序
04-11
HTML5事件日历/计划程序是一个现代Web应用程序，它利用了HTML5的最新特性来创建一个功能丰富的交互式日历组件。这个项目不仅提供了一种可视化的方式来管理日常任务和活动，还具有美观的CSS主题，使得用户体验更加...
旅游计划HTML模板.zip
06-02
此模板基于HTML5，这是一个更新的版本，增加了许多新特性，如音频、视频、表单控件等，增强了网页交互性和用户体验。 "旅游计划HTML模板"的设计遵循了时间线的布局，这种设计方式使得信息展示有序且易于理解。时间...
teachplan(1).rar_css_html_nodejs_教学计划管理
09-24
它包含了CSS、HTML和NODEJS等技术的应用，意在构建一个完整的教学计划管理系统。 【CSS】是Cascading Style Sheets的缩写，是一种用于描述网页及应用程序用户界面外观和表现的样式语言。在这个项目中，CSS文件用于...
HTML 属性大全：全面解析所有 HTML 属性
weixin_45474825的博客
01-21 1220
HTML 属性是 HTML 元素的附加信息，通常以键值对的形式出现在元素的开始标签中。属性名和属性值之间用等号连接，属性值通常用引号括起来（单引号或双引号均可）。HTML 属性是 HTML 元素的重要组成部分，它们为元素提供了额外的功能和信息。无论是全局属性、链接属性、图片属性还是表单属性，掌握这些属性的使用方法对于构建功能强大的网页至关重要。通过本文的学习，你应该已经对 HTML 属性有了全面的了解。如果你想了解更多关于 HTML 属性的详细信息，可以参考菜鸟教程的 HTML 参考手册。HTML 教程。
深入理解 HTML DOM：文档对象模型详解
最新发布
weixin_45474825的博客
01-24 635
HTML DOM 是浏览器将 HTML 文档解析为一个树形结构的编程接口。它将文档中的每个部分（如元素、属性、文本等）表示为节点（Node），这些节点共同组成了 DOM 树。通过 DOM，开发者可以使用 JavaScript 动态地操作网页内容。HTML DOM 是前端开发中不可或缺的一部分，它为我们提供了强大的文档操作能力。通过掌握 DOM，开发者可以创建更加动态和交互性强的网页应用。希望本文能帮助你更好地理解和使用 HTML DOM！如果你对 DOM 还有其他疑问，欢迎在评论区留言讨论！
HTML `＜head＞` 元素详解
weixin_45474825的博客
01-21 781
head>charset属性指定文档的字符编码，通常使用 UTF-8 以支持多语言。< meta name = " description " content = " 这是一个关于 HTML head 元素的教程。" >< meta name = " description " content = " 这是一个关于 HTML head 元素的教程。" >< meta name = " description " content = " 这是一个关于 HTML head 元素的教程。" >
用css和html制作太极图
maoqiwei的博客
01-14 1447
【代码】用css和html制作太极图。
个人网站更新计划及HTML开发
2. 网站更新的重要性：定期更新个人网站能够保持内容的新鲜度，吸引访客回访，并提升搜索引擎排名。 3. 网站技术栈：个人网站可能基于HTML等基础技术构建，用户可能需要了解或使用HTML、CSS、JavaScript等技术。 4...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一条小鱼儿～

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值