许愿树或许愿墙如何制作？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了许愿树或许愿墙如何制作？相关的知识，希望对你有一定的参考价值。
我是一个菜鸟，现在一个网页需在本月的18号以前完成，我希望我的网页中有个许愿树或许愿墙，希望有高手帮帮我，谢谢！！！急需～～
还有就是如何安装呀
它内容出现的时候是一个字一个字出现的
您可以参考一下 希望得到您的分数 谢谢
html><HEAD><TITLE>爱情许愿树,情人好运!</TITLE>
<META content="text/html; charset=gb2312" http-equiv=Content-Type>
<STYLE type=text/css>TD
FONT-SIZE: 14px; LINE-HEIGHT: 28px
</STYLE>
<META content="Microsoft FrontPage 5.0" name=GENERATOR>
<bgsound src="fallingstar.mid" loop="-1">
</HEAD>
<BODY topmargin=0 bgcolor="#090808" text="#FFFFFF" link="#FFFFFF" vlink="#A2A2A2" alink="#FFFFFF" background="jw.gif" bgproperties="fixed">
<SCRIPT language="vbscript">
num=4
msgbox "进入页面前，请一定照着提示上说的回答，可不要乱写，不然的话会让测试不准确的!切记！现在放松一下，记住，写的时候应该完全是你的第一直觉！！！"
msgbox"这个测试源于印度的一个神秘的密教经典，当时发现它的人按照它说的做了，结果他的愿望在10分钟内就实现了!"
msgbox"这是一个非常奇妙的测试，不知道你做过没有，最好没有旁观者！我做了，非常准确，想不信邪都难!"
y1 = inputbox("1.请输入你一个异性朋友的名字","")
y2 = inputbox("2.请再输入你一个异性朋友的名字","")
t1 = inputbox("3.输入你一个同性朋友的名字","")
t2 = inputbox("4.输入你第二个同性朋友的名字","")
t3 = inputbox("5.再次输入你一个同性朋友的名字","")
m1 = inputbox("6.输入一首你喜欢的歌的名字","")
m2 = inputbox("7.输入另外一首歌的名字","")
m3 = inputbox("8.再输入一首歌的名字 请不要急躁，保持轻松的心态","")
m4 = inputbox("9.最后输入一首喜欢的歌名字","")
num = inputbox("10.输入一个你喜欢的幸运数字","")
wish = inputbox("11.许下一个你的愿望","")
num=num *4
</script>
<SCRIPT language="vbscript">
aa=""
aa=aa+"<div id=ww0 style=\'DISPLAY: none\'><TABLE align=center border=0 width=\'90%\'><TBODY><TR><TD> 在你心中" + y1 + " 占据着最重要的位置，你对 " + y1 + " "
aa=aa+"的感觉用 " + m1 + " 这首歌来形容再好不过了。你相信这是上天安排的缘分，因为你深深的爱着"
aa=aa+" " + y1 + " "
aa=aa+"。 对于 " + y2 + " "
aa=aa+"，也许是宿命吧，虽然你也喜欢 " + y2 + " "
aa=aa+"，但是你们注定不可能在一起，就象 " + m2 + " "
aa=aa+"中唱的一样。<p> " + t1 + " "
aa=aa+"是最关心你的人，而 " + t2 + " "
aa=aa+"是最了解你的人，你们两个在一起会彼此有知己的感觉。 " + t3 + " "
aa=aa+"是你的幸运星，也许会给你带来好运气的哦~!~!~! <p align=\'left\'> " + m3 + " "
aa=aa+"这首歌最能代表你现在的想法。 " + m4 + " "
aa=aa+"这首歌代表你对生活的感受。 把本页推荐给你的 " + cstr(num) + " "
aa=aa+"个朋友，你的愿望--- " + wish + " 就会实现，信不信由你！<br>"
aa=aa+"<br><b><font color=#FF0000>不要把这个心愿放在心里。否则这个心愿会在96小时后离开你。<br>将本页发给你的网友。<br>"
aa=aa+"让您的好友也来许愿，看看会发生什么？<br>在今后的四天里，你会收到一个令你高兴的惊喜。<br>好的东西记得与朋友分享噢！<br></font></b><br>"
aa=aa+"<font color=#276BD1>0-10 人: 你会经历一个小小的变化。<br>11-19 人: 你的生活会按照你期望的方向改进。<br> 20-30 人: 在今后4天，你至少得到5个快乐的惊喜。<br> 30 人以上:你的生活会发生惊人的变化，你的美梦将会成真。</font></p></TD></TR></TBODY></TABLE></div>"
document.write(aa)
</script>
<SCRIPT language=VBScript>
dim w,t,p,mm,c,mr,dy,tmp,vs:vs=5:dy=1:p=1:mr="<BR><BR><BR>":c="<font color=white><B>|"&mr:Set w = document.body
sub tp
m=mid(t,p,1):if m="" then c=mr
if m="`" then m="":mm=mid(mm,1,len(mm)-1)
if m="<" then av=instr(mid(t,p),">"):m=mid(t,p,av):p=p+av-1
if m="&" then av=instr(mid(t,p),";"):m=mid(t,p,av):p=p+av-1
tmp=100:if m="." then tmp=400 else if m="," then tmp=200 else if m=" " then tmp=200
if w.scrollHeight-w.scrollTop>w.offsetHeight then w.scrollTop=w.scrollTop+int(dy):dy=dy+dy/vs else dy=1
mm=mm&m:w1.innerHTML=mm&c:p=p+1:if p<=len(t)+1 then SetTimeOut "tp",16+tmp else w.scroll="yes"
end sub
sub window_onload()
w.scroll="yes"
w.bgcolor="#A8A8A8"
w.style.cursor="crosshair"
\'-------------------
t=w0.innerHTML
t=ww0.innerHTML + t
tp
end sub
</SCRIPT>
<DIV id=w0 style="DISPLAY: none">
<TABLE align=center border=0 >
<TBODY>
<TR>
<TD>
<hr>
<center>
<p align="center"><font color="#FFFFFF">印度的密教经典－－古老的祝福</font>
<p align="left">
不管你是否迷信，这个网页都应该读一下，好吗？<br>
这是密教图腾上的文字。<br>
读了这封信后的四天内，你会有好运来临。<br>
把这封信邮寄给几个你想要祝福的人。有许许多多人，也许你已经淡忘了，如果仍然在你的心里，他们也一样会得到幸运。<br>
我不会给你钱，因为我没有。<p align="left">
给你生活的忠告:<br>
多吃些粗粮.<br>
给别人比他们自己期许的更多，并且用心去做<br>
熟记你喜欢的诗歌<br>
不要轻信你听到的每件事，不要花光你的所有，不要想睡多久就睡多久。<br>
无论何时说“我爱你”，请真心实意。<br>
无论何时说“对不起”，请看着对方的眼睛。<br>
相信一见钟情。<br>
永远不要忽视别人的梦想。<br>
深情热烈地爱，也许你会受伤，但这是使人生完整的唯一方法。<br>
用一种明确的方法解决争议，不要冒犯。<br>
永远不要以貌取人。慢慢地说，但要迅速地想。<br>
当别人问你不想回答的问题时，笑着说“你为什么想知道？”<br>
记住那些敢于承担最大风险的人才能得到最深的爱和最大的成就。<br>
给妈妈打电话。如果不行，至少在心里想着她。<br>
当别人打喷嚏时，说一声“菩萨保佑”。<br>
如果你失败了，千万不要忘记汲取教训。<br>
记住三个“尊”：尊重你自己；尊重别人；保持尊严，对自己的行为负责。<br>
不要让小小的争端损毁了一段伟大的友谊。<br>
无论何时你发现自己做错了，竭尽所能去弥补。动作要快！<br>
无论什么时候打电话，摘起话筒的时候请微笑，因为对方能感觉到！<br>
找一个你爱聊的人结婚 ， 因为当年龄大了以后，你会发觉喜欢聊天是一个人最大的优点。<br>
找点时间，单独呆会儿。<br>
欣然接收改变，但是不要摒弃你的个人理念。<br>
记住，沉默是金。<br>
多看点书，少看点电视。<br>
过一种高尚而诚实的生活。当你年老时回想起过去，你就能再一次享受人生。<br>
相信上帝，但是别忘了锁门。<br>
家庭的融洽氛围是难能可贵的。<br>
尽你的全力让家平顺和谐。<br>
当你和你亲近的人吵嘴的时候，试着就事论事，不要扯出那些陈芝麻，烂谷子的事。<br>
不要摆脱不了昨天。<br>
多注意言下之意。<br>
和别人分享你的知识，那才是永恒之道！<br>
善待我们的地球。<br>
不要愚弄自然母亲。<br>
忙自己该做的事。<br>
不要相信接吻时从不闭眼的伴侣。<br>
每年至少去一个你从没去过的地方。<br>
如果你赚了很多钱，在活着的时候多行善事。这是你能得到的最好回报。<br>
记住有时候，不是最好的收获也是一种好运。<br>
深刻理解所有的规则，合理地更新他们。<br>
记住：最好的关系存在于对别人的爱胜于对别人的索求之上。<br>
回头看看你发誓取得的目标，然后评判你到底有多成功。<br>
无论是烹调还是爱情，都用百分之百的负责态度对待，但是不要期求太多的回报。 </td>
</center>
</TD></TR></TBODY></TABLE></DIV>
<DIV id=w1></DIV>
<br>
<div align=\'center\'><tr><td class=\'p9\'>
<font color=\'#B157ED\'>
因为陌生，所以勇敢，因为距离，所以美丽。 <br>
┏━━┓我 ●╭○╮ 我┏━━┓<br>
┃天长┃想°☆ /█∨█\\ ☆ 爱┃曾经┃<br>
┃地久┃你 ∏ ∏ 你┃拥有┃<br>
┗━━┛ <font color="#FF00FF">㊣☆爱你一生☆㊣</font> ┗━━┛<br>
<a target="_blank" style="color: #B157ED" href="http://www.mmhz.net/Christmas/">圣诞节特别专题</a><font color="#FF0000">♀♂</font><a target="_blank" style="color: #B157ED" href="http://so.mmhz.net">全能搜索引擎</a><font color="#FF0000">♀♂</font><a target="_blank" style="color: #B157ED" href="http://www.mmhz.net/yanhua/">点击夜空欣赏烟花</a><font color="#FF0000">♀♂</font><a target="_blank" style="color: #B157ED" href="http://www.1gcom.cn">免费空间</a><font color="#FF0000">♀♂</font><a target="_blank" style="color: #B157ED" href="http://www.mmhz.net/flash">flash休闲游戏</a><br>
<font color="#FF00FF">将本页发给20个网友，<font color="#FF0000">情人幸运天使</font>将给你带来好运！^^</font><br>
<br>
<script src=\'http://s36.cnzz.com/stat.php?id=118655&web_id=118655&show=pic1\' language=\'javascript\' charset=\'gb2312\'></script>
</BODY>
</HTML> 参考技术A 可以来参考下我的 许愿墙 喜欢的话可以联系我!我送你代码...syx5241@163.com
许愿墙js简易版代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>许愿墙</title>
<style>
*
margin: 0;
padding: 0;
html
height: 100%;
background: linear-gradient(0deg, rgb(171, 212, 238), deepskyblue);
body
position: relative;
.container
width: 100%;
height: 630px;
position: relative;
input[id="res"]
width: 300px;
height: 40px;
position: fixed;
bottom: 30px;
left: 50%;
margin-left: -150px;
padding-left: 15px;
border: 1px solid #ccc;
outline: none;
border-radius: 5px;
.item
width: 150px;
height: 150px;
position: absolute;
top: 100px;
left: 100px;
box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.2);
padding: 10px;
border-radius: 15px/5px 10px 10px 0;
transform: skew(-1deg);
cursor: move;
.item span
position: absolute;
right: 6px;
bottom: 4px;
font-size: 12px;
color: #eee;
cursor: pointer;
.comfirmBtn
width: 100px;
height: 40px;
position: fixed;
bottom: 31px;
left: 64%;
border: none;
outline: none;
border:1px solid;
border-radius: 10px;
cursor: pointer;
</style>
</head>
<body>
<div class="container"></div>
<input type="text" name="res" id="res" placeholder="随便说说吧...点击确认按钮发布">
<button class="comfirmBtn">点击发布</button>
<script>
// 获取DOM元素
let container = document.getElementsByClassName(‘container‘)[0];
let btn = document.getElementsByClassName(‘comfirmBtn‘)[0];
// 默认的许愿单文字
let wishes = [‘新年来好运‘, ‘能找一份好工作‘, ‘日语等级考试通过‘, ‘能交上女朋友‘, ‘新年来好运‘, ‘能找一份好工作‘, ‘日语等级考试通过‘, ‘能交上女朋友‘];
// 许愿单随机背景颜色
let bgcColors = [‘#96c2f1‘, ‘#bbe1f1‘, ‘#e3e197‘, ‘#f8b3d0‘, ‘#ffcc00‘, ‘rgba(255,123,123,1)‘, ‘yellowgreen‘, ‘pink‘, ‘skyblue‘];
// 渲染函数 新增一个div元素 做好css配置以后将该div返回
let render = function (wish)
// 生成随机数据
let bgcColorIndex = Math.floor(Math.random() * bgcColors.length);
let randomTop = Math.floor(Math.random() * (630 - 150)); // container容器的高减去150
let randomLeft = Math.floor(Math.random() * (window.innerWidth - 175)); // left值在减去盒子宽度150的基础上多减去了25px
let content = `<div class="item" style="top:$randomToppx;left:$randomLeftpx;">$bgcColors[bgcColorIndex]">$wish<span>关闭</span></div>`;
container.innerHTML += content;
// 页面刚开始加载时 将默认的许愿单加载到页面上
window.onload = function ()
// 遍历所有默认的许愿单 将其渲染到页面上面
for (let i = 0; i < wishes.length; i++)
render(wishes[i]);
// 发布新内容函数
let newContent = function ()
if (res.value !== ‘‘)
let inputText = res.value;
render(inputText);
res.value = ‘‘;
else
alert(‘不能为空！‘);
// 有两种方式可以添加新的愿望 按回车键 或者 点击发布按钮
document.onkeyup = function (e)
if (e.keyCode === 13)
newContent();
// 为确认按钮添加点击事件
btn.onclick = newContent;
// 通过事件委托 给整个document绑定点击事件 但是只有点击span元素的时候 移除其父节点
document.onclick = function (e)
if (e.target.nodeName === ‘SPAN‘)
container.removeChild(e.target.parentNode);
// 设置许愿单拖动
container.onmousedown = function (e)
if (e.target.className === ‘item‘)
let offsetX = parseInt(e.target.style.left); // 获取当前的x轴距离
let offsetY = parseInt(e.target.style.top); // 获取当前的y轴距离
let innerX = event.clientX - offsetX; // 获取鼠标在方块内的x轴距
let innerY = event.clientY - offsetY; // 获取鼠标在方块内的y轴距
let that = e.target;
document.onmousemove = function (e)
that.style.left = event.clientX - innerX + "px";
that.style.top = event.clientY - innerY + "px";
// 边界判断
if (parseInt(that.style.left) <= 0) // 左边边界
that.style.left = "0px";
if (parseInt(that.style.top) <= 0) // 上边边界
that.style.top = "0px";
if (parseInt(that.style.left) >= window.innerWidth - 175) // 右边边界 = 窗口宽度 - 盒子大小 稍微多减去了25px
that.style.left = window.innerWidth - 175 + "px";
if (parseInt(that.style.top) >= 480) // 下边边界 = 630 - 150
that.style.top = 480 + "px";
document.onmouseup = function ()
document.onmousemove = null;
document.onmouseup = null;
</script>
</body>
</html>
以上是关于许愿树或许愿墙如何制作？的主要内容，如果未能解决你的问题，请参考以下文章