JavaScript网页生日快乐

小鱼儿 2022-12-29 06:35 190阅读 0赞

# JavaScript网页生日快乐 #

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

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]

程序源代码：

<!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>

[点击此处链接下载文件][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/4a5c734eae96461099a01772220ad44c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/03e9acd239864a9ab83032d58389436b.png
[Link 1]: https://download.csdn.net/download/weixin_42579348/13739931