JavaScript网页生日快乐

最新推荐文章于 2024-05-13 16:45:04 发布

我是Dreamer啊

最新推荐文章于 2024-05-13 16:45:04 发布

阅读量3.1k

点赞数 8

分类专栏：前端开发文章标签： javascript js html css

BY Dreamer同学

本文链接：https://blog.csdn.net/weixin_42579348/article/details/111461634

版权

前端开发专栏收录该内容

57 篇文章 6 订阅

订阅专栏

JavaScript网页生日快乐

最近考试周，没怎么学JS，朋友过生日就顺手写了一个憨憨网页，假装它是一篇新闻。

哈哈哈哈有一个算是粉嫩的封面吧，深得pink老师真传…点击生日快乐四个大字的话会变成新闻页

在这里插入图片描述

有一个祝福视频，有一个背景音乐，还有一个小视频。下面有留言部分，默认三条生日快乐留言，可以删除留言，也可以留言！

在这里插入图片描述

程序源代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摆毛21岁生日快乐</title>
    <embed src="happybirthday.mp3" autostart="true" loop="true" hidden="true">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body {
            background-color: pink;
        }
        .happy_birthday {
            position: absolute;
            font-size: 50px;
            font-family: '楷体';
            font-weight: 900;
            top: 50%;
            left: 50%;
            margin-top: -25px;
            margin-left: -50px;
        }
        .body1 {
            display: none;
            position: absolute;
            width: 1200px;
            left: 50%;
            margin-left: -600px;
            background-color: silver;
        }

        h1 {
            margin-top: 20px;
            text-align: center;
        }
        .a{
            height: 180px;
        }
        .line {
            width: 100%;
            height: 0px;
            border: 1px solid red;
        }
        .logo{
            float: left;
        }
        .tim{
            float: left;
            height: 100px;
            margin-top: 50px;
            margin-left: 500px;
            font-size: 25px;
            text-align: center;
            line-height: 50px;          
        }


        h2 {
            text-align: center;
            line-height: 100px;
        }
        
        .text {
            margin-left: 100px;
            width: 1000px;
            font-size: 18px;
            text-indent: 36px;
        }
        .text2 {
            margin-left: 100px;
            width: 1000px;
            font-size: 18px;
            text-indent: 36px;
        }
        .text3 {
            margin-left: 1000px;
            font-size: 12px;
        }
        video {
            margin-left: 280px;
        }
       
        textarea {
            margin-top: 10px;
            width: 600px;
            height: 100px;
            font-size: 30px;
            font-weight: 900;
            margin-left: 300px;
        }
        button{
            width: 80px;
            height: 30px;
            margin-top: 50px;
        }
        a{
            float: right;
            color: black;
            text-decoration: none;
        }
        li {
            list-style: none;
            width: 680px;
            height: 30px;
            font-size: 25px;
            color: green;
            margin-top: 5px;
            font-weight: 900;
            margin-left: 300px;
            border: 1px solid black;

        }
    
    </style>
</head>

<body>
    
    <div class="happy_birthday">生日快乐</div>

    <div class="body1">
        <div class="title">
            <h1>航仔新闻网</h1>
            <div class="a">
                <img class ="logo" src="logo.png">
                <div class="tim">2020年12月20日<br>星期日</div>
            </div>
            
            
        </div>
        <div class="line"></div>
        <div>
            <div>
                <h2>陶宇轩先生21岁生日，众星齐送祝福</h2>
                <div class="text">
                    今天是2020年12月20日，星期日，农历十一月初六，今天是陶宇轩先生的21岁生日，陶先生在青年一辈中可谓是一表人才，他博学多才、才思敏捷、才高八斗、学富五车、出口成章、出类拔萃、文武双全、谈吐不凡、十全十美、完美无缺。在此美好的日子，娱乐圈众多明星也给陶先生送来了祝福。
                </div>
                <video width="600" height="600" controls>
                    <source src="birthday.mp4" type="video/mp4">
                </video>
                <div class ="text2">
                   随着一句句生日祝福的响起，我们相信，此刻的陶先生是无比的幸福的。
                   <p>迎春花在风里为你摇曳着春的烂漫，百鸟站在枝头为你，唱着悦耳的赞歌，天空中幻化出最美的色彩，让你醉入天涯，大地捧出最灿的鲜花，装扮着你美丽的发卡，流水曲殇，伴着唯美的环佩妙音；高山仰止，却为你顶礼膜拜。</p>
                   <p>青春的树越长越葱茏，生命的花就越开越艳丽。在陶先生生日的这一天，我谨代表航仔新闻网给陶先生送来深深的祝福，愿陶先生充满活力，青春常在，心想事成，生日快乐！</p>
                   
                </div>
                <div class="text3">
                    记者：GYH<br>
                    编辑：GYH
                </div>
                <div class="line"></div>
                <textarea name="" id=""></textarea>
                <button>发布</button>
                <ul>
                    <li>生日快乐<a href='javaScript:;'>删除</a></li>
                    <li>生日快乐<a href='javaScript:;'>删除</a></li>
                    <li>生日快乐<a href='javaScript:;'>删除</a></li>
                </ul>
            </div>
        </div>

        <div class='history'>
           
        </div>
    </div>
    <script>
        var happy_birthday = document.querySelector('.happy_birthday');
        var body = document.querySelector('body');
        var body1 = document.querySelector('.body1');
        var btn = document.querySelector('button');
        var text = document.querySelector('textarea');
        var ul = document.querySelector('ul');
        happy_birthday.addEventListener('mouseover',function(){
            this.style.cursor = 'pointer';
        })
        happy_birthday.addEventListener('click',function(){
            this.style.display = 'none';
            body.style.backgroundColor = 'white';
            body1.style.display = 'block';
        })

        btn.onclick = function(){
            if(text.value == ''){
                alert("您没有输入内容。")
                return false;
            }else{
                var li = document.createElement('li');
                li.innerHTML = text.value+"<a href='javaScript:;'>删除</a>";
                //ul.appendChild(li);
                //添加元素
                ul.insertBefore(li,ul.children[0])
                //删除元素
                var as = document.querySelectorAll('a');
                for (var i =0;i<as.length;i++){
                    as[i].onclick = function(){
                        ul.removeChild(this.parentNode);
                    }
                }
            }
            text.value='';
           var as = document.querySelectorAll('a');
                for (var i =0;i<as.length;i++){
                    as[i].onclick = function(){
                        ul.removeChild(this.parentNode);
                    }
                } 
        }
        var as = document.querySelectorAll('a');
                for (var i =0;i<as.length;i++){
                    as[i].onclick = function(){
                        ul.removeChild(this.parentNode);
                    }
                }
    </script>
</body>
</html>

点击此处链接下载文件

我是Dreamer啊

关注

8
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
JavaScript网页生日快乐

JavaScript网页生日快乐最近考试周，没怎么学JS，朋友过生日就顺手写了一个憨憨网页，假装它是一篇新闻。哈哈哈哈有一个算是粉嫩的封面吧，深得pink老师真传…点击生日快乐四个大字的话会变成新闻页有一个祝福视频，有一个背景音乐，还有一个小视频。下面有留言部分，默认三条生日快乐留言，可以删除留言，也可以留言！程序源代码：<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-
复制链接

扫一扫

专栏目录