JavaScript网页生日快乐

JavaScript网页生日快乐

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

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

JavaScript网页生日快乐_第1张图片

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

JavaScript网页生日快乐_第2张图片

程序源代码:


<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">
                
                <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>
                
随着一句句生日祝福的响起,我们相信,此刻的陶先生是无比的幸福的。 <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+"删除"; //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>

点击此处链接下载文件

你可能感兴趣的:(前端开发,javascript,js,html,css)