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>

点击此处链接下载文件

JavaScript网页生日快乐相关推荐

HTML+CSS+JavaScript 超具创意的网页生日快乐祝福网页模板
HTML+CSS+JavaScript 超具创意的网页生日快乐祝福网页模板是不是还没有给心爱的人准备小礼物呀,但是别担心,精心创作了一个"飘动爱心3D相册"网页,按照下面这个教程 ...
《HTML、CSS、JavaScript 网页制作从入门到精通》——6.6 单元格属性
本节书摘来自异步社区<HTML.CSS.JavaScript 网页制作从入门到精通>一书中的第6章,第6.6节,作者:[美]John Resig(莱西格) , Bear Bibeault( ...
Javascript网页滚动方法
Javascript网页滚动方法作者:不详来源于:源码下载吧发布时间:2007-6-6 16:24:26 [ 字体:大中小 ] 我想大家都看过各种各样的滚动(最常用的就是用在新闻的更新上 ...
php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...
7款Flash和Javascript网页视频播放器
Flash和javascript网页视频播放器.梦想中的视频播放器是这样的: 支持所有格式,兼容所有主流视频网站,支持播放列表.视频缩略图.全屏播放.画面调节.预加载.体积贼小,功能贼多--. 也许你 ...
《HTML、CSS、JavaScript 网页制作从入门到精通》——第6章使用表格
本节书摘来自异步社区<HTML.CSS.JavaScript 网页制作从入门到精通>一书中的第6章,第6.1节,作者:[美]John Resig(莱西格) , Bear Bibeault( ...
HTML5期末大作业：漫画网站设计——海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例企业网站制作计算机毕设网页设计源码
HTML5期末大作业:漫画网站设计--海贼王我当定了(6页) web前端期末大作业 html+css+javascript网页设计实例企业网站制作计算机毕设网页设计源码常见网页设计作业题材有个 ...
javascript网页设计期末作业购物网站
本次主要介绍下之前上传的作业的主要功能,网页下载地址: 网页设计期末作业购物网站如果对本文章内容还有疑问可以观看视频,也可以在评论区留言: javascript 网页设计期末作业购物网站网页实 ...
文化网页设计成品 web网页设计实例作业 ——古典中国风工艺美术(9页) html+css+javascript网页设计实例
web网页设计实例作业 --古典中国风工艺美术(9页) html+css+javascript网页设计实例常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶 ...

JavaScript网页生日快乐

JavaScript网页生日快乐

JavaScript网页生日快乐相关推荐

最新文章

热门文章