自学内容网 自学内容网

为宝贝大孙子写的成长日志记录小程序

为宝贝大孙子写的成长日志记录小程序

2024年7月3日早晨06时06分,在这个温馨而充满喜悦的时刻,我们迎来了家族中最璀璨的星辰——我的宝贝孙子,一个带着无限希望与梦想降临人间的小天使。他的到来,如同春日里最温暖的阳光,瞬间融化了我们所有人的心房,让家中每一个角落都洋溢着幸福与欢笑。此刻我依然还沉寂在那幸福的一刻。于是我有了一个美好的想法,我要用自己的专长为我孙子编个记录他今后成长的日志的小程序。记录从他出生到他以后的成长岁月的点点滴滴。

设计思路及功能简介

以超文本html的格式显示输出,内容包括标题、日历插件、宝贝的一些个人信息、出生时长的实时更新时间、珍贵的拍摄照片。

日志文本是json文件格式,用单独开发的小程序进行日志记录保存、和照片上传。同样是根据日历插件进行选择并输入日志记录。

下面分享一下我的“孙子成长记录日志小程序”。

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>
    <style>
    body {
     
            color: white;
            transition: background-color 2s ease-in-out;
        }

        h1 {
     
            font-weight: bold;
            font-family: '宋体', sans-serif;
        }
     #imageCarousel {
     
            width: 700px;
            height: 800px;
            position: absolute;
            top: 0px;
            right: 0px;
            overflow: hidden;
        }

        .carouselImage {
     
            width: 100%;
            height: 100%;
            position: absolute;
            opacity: 0;
            transition: opacity 1s;
        }
        </style>
    <style>
        body {
     
            color: white;
            transition: background-color 2s ease-in-out;
        }

        h1 {
     
            font-weight: bold;
            font-family: '宋体', sans-serif;
        }
    </style>
</head>
<body>
    <h1 font="Arial, sans-serif">宝贝大孙子的成长记录日志</h1>
    <h3>选择日期并查看当天的日志</h3>
    <input type="date" id="selectedDate">
    <button onclick<

原文地址:https://blog.csdn.net/weixin_41905135/article/details/140242634

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!