HTML爱情许愿树中的文字效果是怎么制作的

HTML爱情许愿树中的文字效果是怎么制作的,第1张

<HTML><HEAD><TITLE>爱情许愿树,情人好运!</TITLE>

<META content="text/htmlcharset=gb2312" http-equiv=Content-Type>

<STYLE type=text/css>TD {

FONT-SIZE: 14pxLINE-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>

用html5开发随机生成的大树,你应该没想到40+行代码就可以搞定了吧~接下来就跟大家说说这棵大树是如何在html5开发中实现的。

同样必须要有html容器。新建Index.html,代码如下:

<、html>

1 <、head>

2 <、meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />

3 <、title>canvas tree

4 <、/head>

5 <、body>

6 <、script type="text/javascript" src="tree.js">

7 <、/body>

8 <、/html>

接下来咱们开始tree.js:

、var canvas = document.createElement("canvas")

9 var ctx = canvas.getContext("2d")

10 canvas.width = 640

11 canvas.height = 480

12 document.body.appendChild(canvas)

代码很好理解,创建一个canvas画布,然后选择为2d画布,设置长宽,最后将这个画布添加到body标签下。

这个脚本最重要的函数在下面,大树就是递归调用这个函数实现的,调用一次画一条线段:

var drawTree = function (ctx, startX, startY, length, angle, depth, branchWidth){

13 var rand = Math.random,

14 newLength, newAngle, newDepth, maxBranch = 3,

15 endX, endY, maxAngle = 2 * Math.PI / 4,

16 subBraches

17 ctx.beginPath()

18 ctx.moveTo(startX, startY)

19 endX = startX + length * Math.cos(angle)

20 endY = startY + length * Math.sin(angle)

21 ctx.lineCap = 'round'

22 ctx.lineWidth = branchWidth

23 ctx.lineTo(endX, endY)

24 if (depth <= 2){

25 ctx.strokeStyle = 'rgb(0,' + (((rand() * 64) + 128) >>0) + ',0)'

26 } else {

27 ctx.strokeStyle = 'rgb(' + (((rand() * 64) + 64) >>0) + ',50,25)'

28 }

29 ctx.stroke()

30 newDepth = depth - 1

31 if (!newDepth)

32 return

33 subBranches = (rand() * (maxBranch - 1)) + 1

34 branchWidth *= 0.7

35 for (var i = 0i <subBranchesi++){

36 newAngle = angle + rand() * maxAngle - maxAngle * 0.5

37 newLength = length * (0.7 + rand() * 0.3)

38 drawTree(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth)

39 }

40 }

接下来一点点解释:

首先,解释下各个变量的含义。ctx就是前面我们的2d画布startX是线段开始的横坐标,同理startY是纵坐标length是线段长度angle是角度depth是深度,叶子深度为1,树干为12(可自己设定)branchWidth就线段的粗细。有了这些信息,其实就描述了一个线段,通过这些信息我们才能画一个线段。

接下来又很可耻地一大段定义:

var rand = Math.random,

41 newLength, newAngle, newDepth, maxBranch = 3,

42 endX, endY, maxAngle = 2 * Math.PI / 4,

43 subBraches

rand其实就是随机一个0~1之间的实数,顾名思义,接下来这些new的就是下一节线段的各种参数。maxBranch就是最多有3个分叉,最大的角度 PI/2 即为,下一级调整角度在90%范围内。subBranches就是分叉的个数。

好了,重要可以画了:

ctx.beginPath()

44 ctx.moveTo(startX, startY)

45 endX = startX + length * Math.cos(angle)

46 endY = startY + length * Math.sin(angle)

47 ctx.lineCap = 'round'

48 ctx.lineWidth = branchWidth

49 ctx.lineTo(endX, endY)

beginPath()表示告诉浏览器“我要开始画了!”,把之前的记录放弃了,这点有点像ps。moveTo()把光标移动到(startX, startY),再计算终点坐标,endX,endY,有点像高中学的参数方程。然后告诉浏览器,lineCap要round,线段的两头要是圆形的。有多粗呢?等于branchWidth。线段一直画到(endX, endY)。

if (depth <= 2){

50 ctx.strokeStyle = 'rgb(0,' + (((rand() * 64) + 128) >>0) + ',0)'

51 } else {

52 ctx.strokeStyle = 'rgb(' + (((rand() * 64) + 64) >>0) + ',50,25)'

53 }

如果是已经画到了最后两级,即为叶子,那么就rgb就为(0, 128~192, 0)(rgb代表颜色,分别为红绿蓝,red green blue)。还没的话,就在(64~128, 50 ,25)中取。大家可能发现了,rgb必须为整数,但是rand()只能rand实数。大家其实也注意到了有个” >>0″,js当中表示位运算,整体向右移动n位,0就是移动0位。其实它的作用和Math.floor()一样,但是速度更快。

动手画!

ctx.stroke()

这个线段就画好了,是时候准备下它的分叉的时候了。

newDepth = depth - 1

54 if (!newDepth)

55 return

如果这个线段是最后一级,就没有分叉了,也是一个递归的终止条件。

subBranches = (rand() * (maxBranch - 1)) + 1

56 branchWidth *= 0.7

57 for (var i = 0i <subBranchesi++){

58 newAngle = angle + rand() * maxAngle - maxAngle * 0.5

59 newLength = length * (0.7 + rand() * 0.3)

60 drawTree(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth)

61 }

分叉数是1~3中的一个数。然后有多少个分叉,就画几条线段,newAngle为原角度调整90度之内,新长度为原长度的0.7~1.0之间。

最后画出主干,这棵树就可以开始画了。

drawTree(ctx, 320, 470, 60, -Math.PI / 2, 12, 12)

大家可能注意到角度为负,不符合传统观念。但你要知道,画布的纵坐标和传统的坐标轴正好是相反的。

好了,html5开发随机生成的大树代码就这样完成了,怎么样,一点都难吧!

桃树是爱情树。桃花是美好生活的象征,桃花源里生活是淳朴而美好的。灿烂的桃花,红红的桃子像爱情的甜蜜,生活的美好。《诗经·周南·桃夭》:“桃之夭夭,灼灼其华。之子于归,宜其室家。桃之夭夭,有蕡其实。之子于归,宜其家室。桃之夭夭,其叶蓁蓁。之子于归,宜其家人。”这首新婚的祝福歌把桃树与美好生活的祝愿紧密相连。我们也常把女子的美貌与桃花相比,比如面若桃花等,崔护诗中说:“人面桃花相映红”。

合欢树是爱情树。合欢树是夫妻好合的象征,寓意夫妻之间永远恩爱。因为它的叶子到了晚上就会合起来,好似夫妻团聚,相亲相爱。它还有一个美丽的传说,相伟虞舜南巡仓梧而死,他的妃子妃娥皇、女英遍寻湘江,终未寻见。二妃终日恸哭,泪尽滴血,血尽而死,逐为其神。她们的眼泪滴在竹子上,化为斑竹。后来,人们发现她们的精灵与虞舜的精灵“合二为一”,变成了合欢树。唐代韦庄专为此作诗《合欢》:虞舜南巡去不归,二妃相誓死江湄。空留万古香魂在,结作双葩合一枝。

梧桐树是爱情树。传说梧是雄树,桐是雌树。梧桐同长同老,同生同死,是忠贞爱情的象征,同生共死的坚贞的爱情故事凄美而动人,梁山伯与祝英台的故事流传了千年,“梧桐相待老,鸳鸯会双死。”(孟郊《烈女 *** 》)。梧桐还代表了多少有情人深深的思念,贺铸悼念亡妻时感叹“梧桐半死清霜后,白头鸳鸯失伴飞。”(《半死桐·重过阊门万事非》)

榕树是爱情树。刘三姐与阿牛哥在榕树下情定终身,榕树见证了这一美好的爱情故事,也让自己成了爱的化身,象征着纯洁的爱情。榕树能把刘三姐的心思告诉阿牛哥,成全一对佳人,也让很多痴情男女为了与心上人终成眷属,不远千里到榕树下去许愿。榕树的根盘根错节,像是两个人相互依附,永不分离。

木棉树是爱情树。舒婷的《致橡树》:“我必须是你近旁的一株木棉,作为树的形象和你站在一起。”让我们熟知了木棉树,木棉花红艳而漂亮,热情似火,像热恋中的男女。在傣族的歌曲中,爱慕的青年被夸成木棉树。《致橡树》又赋予了木棉新的爱情意义,平等独立,而又风雨同舟。“我们分担寒潮风雷、霹雳;我们共享雾霭、流岚、虹霓。仿佛永远分离,却又终身相依。”

红豆树是爱情树。“红豆生南国,春来发几枝。愿君多采撷,此物最相思。”红豆像一颗颗不变的红心,历来表示着不得相见的人的相思。如果你们的爱情聚少离多,是长长的思念,大约你心中的爱情树是红豆树。“玲珑骰子安红豆,入骨相思知不知。”(温庭筠《南歌子》)刻骨相思大约也会让你喜欢柳树,“柳”“留”谐音,希望心爱的人能长久地留在身边。

还有以为结香树、银杏树、枫树等为爱情之树的。窃以为槐树做爱情之树也未尝不可,洁白的槐花象征爱情的纯洁,甜丝丝的味道像爱情的甜蜜。种一棵你们的爱情树,用心呵护它成长。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7229512.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存