zoukankan      html  css  js  c++  java
  • 纪念日给男(女)朋友的表白页面

    这是一个简单的html+css+js的页面,促进你们的感情!

    话不多说,上代码......
    /*
    *在html代码前引入三个js文件,建议本地引入
    */
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/garden.js"></script>//文件内容在下
    <script type="text/javascript" src="js/functions.js"></script>//文件内容在下
    
    /*
    *html代码
    */
    <audio src="viedo/likeyou.mp3" loop="loop"  autoplay="autoplay" ></audio>//这里是浏览器背景音乐,可以自定义 记得修改路径
    	<div id="mainDiv">
    		<div id="content">
    			<div id="code">
    				<span class="comments">/**</span><br />
    				<span class="space" /><span class="comments">*2020.1.1</span><br />//她的生日
    				<span class="space" /><span class="comments">*2020-1-2.</span><br />//你的生日
    				<span class="space" /><span class="comments">*/</span><br />
    				Boy name = <span class="keyword">Mr</span> 小红<br />//看前面的Mr或者Mrs修改名字
    				Girl name = <span class="keyword">Mrs</span> 小明<br />
    				<span class="comments">//我永远是他的小仙女</span><br />//你想说的话 可以随意修改
    				The girl fall in love with the boy;<br />
    				<span class="comments">// 2020年1月1日相恋至今.</span><br />//从什么时候开始
    				有他的每一天都是幸福的,快乐的;<br />
    				<span class="comments">//不知何时.</span><br />
    				他已经成为我的生活中必不可少的一部分.<br />
    				<span class="comments">// 感谢上天让我遇到了疼我爱我的小明.</span><br />
    				<span class="comments">// 他会夸我漂亮 会给我买好吃的 会.......</span><br />
    				<span class="keyword">The boy</span> very <span class="keyword">happy</span>;<br />
    				<span class="keyword">The girl</span> is also very <span class="keyword">happy</span>;<br />
    				<span class="placeholder" /><span class="comments">//  我的故事都是关于你啊</span><br />
    				<span class="placeholder" /><span class="comments">// Love you forever.❤❤</span><br />
    				<span class="comments">//The girl wants the boy could will have been happy.</span><br />
    				<br>
    				<br>
    				I want to say:<br />
    				遇到你,我真幸运<br />
    				❤❤
    			</div>
    			<div id="loveHeart">
    				<canvas id="garden"></canvas>
    				<div id="words">
    					<div id="messages">
    						最爱的人:~小明~
    						<div id="elapseClock"></div>
    					</div>
    					<div id="loveu">Love you forever.<br />
    						<div class="signature">- 你最可爱的小红</div>
    						<div class="signature">- 小红</div>
    					</div>
    				</div>
    			</div>
    		</div>
    	</div>
    
    
    /*
    *js代码 PS:直接拿来用就行
    */
    <script type="text/javascript">
    		var offsetX = $("#loveHeart").width() / 2;
    		var offsetY = $("#loveHeart").height() / 2 - 55;
    		var together = new Date();
    		together.setFullYear(2017, 11, 13);
    		together.setHours(22);
    		together.setMinutes(0);
    		together.setSeconds(0);
    		together.setMilliseconds(0);
    
    		if (!document.createElement('canvas').getContext) {
    			var msg = document.createElement("div");
    			msg.id = "errorMsg";
    			msg.innerHTML = "Your browser doesn't support HTML5!<br/>Recommend use Chrome 14+/IE 9+/Firefox 7+/Safari 4+";
    			document.body.appendChild(msg);
    			$("#code").css("display", "none")
    			$("#copyright").css("position", "absolute");
    			$("#copyright").css("bottom", "10px");
    			document.execCommand("stop");
    		} else {
    			setTimeout(function () {
    				startHeartAnimation();
    			}, 5000);
    
    			timeElapse(together);
    			setInterval(function () {
    				timeElapse(together);
    			}, 500);
    
    			adjustCodePosition();
    			$("#code").typewriter();
    		}
    	</script> 
    
    /*
    *garden.js
    */
    	    function Vector(x, y) {
    	        this.x = x;
    	        this.y = y;
    	    };
    		
    	    Vector.prototype = {
    	        rotate: function (theta) {
    	            var x = this.x;
    	            var y = this.y;
    	            this.x = Math.cos(theta) * x - Math.sin(theta) * y;
    	            this.y = Math.sin(theta) * x + Math.cos(theta) * y;
    	            return this;
    	        },
    	        mult: function (f) {
    	            this.x *= f;
    	            this.y *= f;
    	            return this;
    	        },
    	        clone: function () {
    	            return new Vector(this.x, this.y);
    	        },
    	        length: function () {
    	            return Math.sqrt(this.x * this.x + this.y * this.y);
    	        },
    	        subtract: function (v) {
    	            this.x -= v.x;
    	            this.y -= v.y;
    	            return this;
    	        },
    	        set: function (x, y) {
    	            this.x = x;
    	            this.y = y;
    	            return this;
    	        }
    	    };
    		
    	    function Petal(stretchA, stretchB, startAngle, angle, growFactor, bloom) {
    	        this.stretchA = stretchA;
    	        this.stretchB = stretchB;
    	        this.startAngle = startAngle;
    	        this.angle = angle;
    	        this.bloom = bloom;
    	        this.growFactor = growFactor;
    	        this.r = 1;
    	        this.isfinished = false;
    	        //this.tanAngleA = Garden.random(-Garden.degrad(Garden.options.tanAngle), Garden.degrad(Garden.options.tanAngle));
    	        //this.tanAngleB = Garden.random(-Garden.degrad(Garden.options.tanAngle), Garden.degrad(Garden.options.tanAngle));
    	    }
    	    Petal.prototype = {
    	        draw: function () {
    	            var ctx = this.bloom.garden.ctx;
    	            var v1, v2, v3, v4;
    	            v1 = new Vector(0, this.r).rotate(Garden.degrad(this.startAngle));
    	            v2 = v1.clone().rotate(Garden.degrad(this.angle));
    	            v3 = v1.clone().mult(this.stretchA); //.rotate(this.tanAngleA);
    	            v4 = v2.clone().mult(this.stretchB); //.rotate(this.tanAngleB);
    	            ctx.strokeStyle = this.bloom.c;
    	            ctx.beginPath();
    	            ctx.moveTo(v1.x, v1.y);
    	            ctx.bezierCurveTo(v3.x, v3.y, v4.x, v4.y, v2.x, v2.y);
    	            ctx.stroke();
    	        },
    	        render: function () {
    	            if (this.r <= this.bloom.r) {
    	                this.r += this.growFactor; // / 10;
    	                this.draw();
    	            } else {
    	                this.isfinished = true;
    	            }
    	        }
    	    }
    
    	    function Bloom(p, r, c, pc, garden) {
    	        this.p = p;
    	        this.r = r;
    	        this.c = c;
    	        this.pc = pc;
    	        this.petals = [];
    	        this.garden = garden;
    	        this.init();
    	        this.garden.addBloom(this);
    	    }
    	    Bloom.prototype = {
    	        draw: function () {
    	            var p, isfinished = true;
    	            this.garden.ctx.save();
    	            this.garden.ctx.translate(this.p.x, this.p.y);
    	            for (var i = 0; i < this.petals.length; i++) {
    	                p = this.petals[i];
    	                p.render();
    	                isfinished *= p.isfinished;
    	            }
    	            this.garden.ctx.restore();
    	            if (isfinished == true) {
    	                this.garden.removeBloom(this);
    	            }
    	        },
    	        init: function () {
    	            var angle = 360 / this.pc;
    	            var startAngle = Garden.randomInt(0, 90);
    	            for (var i = 0; i < this.pc; i++) {
    	                this.petals.push(new Petal(Garden.random(Garden.options.petalStretch.min, Garden.options.petalStretch.max), Garden.random(Garden.options.petalStretch.min, Garden.options.petalStretch.max), startAngle + i * angle, angle, Garden.random(Garden.options.growFactor.min, Garden.options.growFactor.max), this));
    	            }
    	        }
    	    }
    
    	    function Garden(ctx, element) {
    	        this.blooms = [];
    	        this.element = element;
    	        this.ctx = ctx;
    	    }
    	    Garden.prototype = {
    	        render: function () {
    	            for (var i = 0; i < this.blooms.length; i++) {
    	                this.blooms[i].draw();
    	            }
    	        },
    	        addBloom: function (b) {
    	            this.blooms.push(b);
    	        },
    	        removeBloom: function (b) {
    	            var bloom;
    	            for (var i = 0; i < this.blooms.length; i++) {
    	                bloom = this.blooms[i];
    	                if (bloom === b) {
    	                    this.blooms.splice(i, 1);
    	                    return this;
    	                }
    	            }
    	        },
    	        createRandomBloom: function (x, y) {
    	            this.createBloom(x, y, Garden.randomInt(Garden.options.bloomRadius.min, Garden.options.bloomRadius.max), Garden.randomrgba(Garden.options.color.rmin, Garden.options.color.rmax, Garden.options.color.gmin, Garden.options.color.gmax, Garden.options.color.bmin, Garden.options.color.bmax, Garden.options.color.opacity), Garden.randomInt(Garden.options.petalCount.min, Garden.options.petalCount.max));
    	        },
    	        createBloom: function (x, y, r, c, pc) {
    	            new Bloom(new Vector(x, y), r, c, pc, this);
    	        },
    	        clear: function () {
    	            this.blooms = [];
    	            this.ctx.clearRect(0, 0, this.element.width, this.element.height);
    	        }
    	    }
    
    	    Garden.options = {
    	        petalCount: {
    	            min: 8,
    	            max: 15
    	        },
    	        petalStretch: {
    	            min: 0.1,
    	            max: 3
    	        },
    	        growFactor: {
    	            min: 0.1,
    	            max: 1
    	        },
    	        bloomRadius: {
    	            min: 8,
    	            max: 10
    	        },
    	        density: 10,
    	        growSpeed: 1000 / 60,
    	        color: {
    				rmin: 128,
    				rmax: 255,
    				gmin: 0,
    				gmax: 128,
    				bmin: 0,
    				bmax: 128,
    	            opacity: 0.1
    	        },
    	        tanAngle: 60
    	    };
    	    Garden.random = function (min, max) {
    	        return Math.random() * (max - min) + min;
    	    };
    	    Garden.randomInt = function (min, max) {
    	        return Math.floor(Math.random() * (max - min + 1)) + min;
    	    };
    	    Garden.circle = 2 * Math.PI;
    	    Garden.degrad = function (angle) {
    	        return Garden.circle / 360 * angle;
    	    };
    	    Garden.raddeg = function (angle) {
    	        return angle / Garden.circle * 360;
    	    };
    	    Garden.rgba = function (r, g, b, a) {
    	        return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
    	    };
    	    Garden.randomrgba = function (rmin, rmax, gmin, gmax, bmin, bmax, a) {
    			var r = Math.round(Garden.random(rmin, rmax));
    			var g = Math.round(Garden.random(gmin, gmax));
    			var b = Math.round(Garden.random(bmin, bmax));
    			var limit = 5;
    			if (Math.abs(r - g) <= limit && Math.abs(g - b) <= limit && Math.abs(b - r) <= limit) {
    				return Garden.rgba(rmin, rmax, gmin, gmax, bmin, bmax, a);
    			} else {
    				return Garden.rgba(r, g, b, a);
    			}
    	    };
    
    /*
    *functions.js
    */
    
    var $window = $(window), gardenCtx, gardenCanvas, $garden, garden;
    var clientWidth = $(window).width();
    var clientHeight = $(window).height();
    
    $(function () {
    	// setup garden
    	$loveHeart = $("#loveHeart");
    	var offsetX = $loveHeart.width() / 2;
    	var offsetY = $loveHeart.height() / 2 - 55;
    	$garden = $("#garden");
    	gardenCanvas = $garden[0];
    	gardenCanvas.width = $("#loveHeart").width();
    	gardenCanvas.height = $("#loveHeart").height()
    	gardenCtx = gardenCanvas.getContext("2d");
    	gardenCtx.globalCompositeOperation = "lighter";
    	garden = new Garden(gardenCtx, gardenCanvas);
    
    	$("#content").css("width", $loveHeart.width() + $("#code").width());
    	$("#content").css("height", Math.max($loveHeart.height(), $("#code").height()));
    	$("#content").css("margin-top", Math.max(($window.height() - $("#content").height()) / 2, 10));
    	$("#content").css("margin-left", Math.max(($window.width() - $("#content").width()) / 2, 10));
    
    	// renderLoop
    	setInterval(function () {
    		garden.render();
    	}, Garden.options.growSpeed);
    });
    
    $(window).resize(function () {
    	var newWidth = $(window).width();
    	var newHeight = $(window).height();
    	if (newWidth != clientWidth && newHeight != clientHeight) {
    		location.replace(location);
    	}
    });
    
    function getHeartPoint(angle) {
    	var t = angle / Math.PI;
    	var x = 19.5 * (16 * Math.pow(Math.sin(t), 3));
    	var y = - 20 * (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t));
    	return new Array(offsetX + x, offsetY + y);
    }
    
    function startHeartAnimation() {
    	var interval = 50;
    	var angle = 10;
    	var heart = new Array();
    	var animationTimer = setInterval(function () {
    		var bloom = getHeartPoint(angle);
    		var draw = true;
    		for (var i = 0; i < heart.length; i++) {
    			var p = heart[i];
    			var distance = Math.sqrt(Math.pow(p[0] - bloom[0], 2) + Math.pow(p[1] - bloom[1], 2));
    			if (distance < Garden.options.bloomRadius.max * 1.3) {
    				draw = false;
    				break;
    			}
    		}
    		if (draw) {
    			heart.push(bloom);
    			garden.createRandomBloom(bloom[0], bloom[1]);
    		}
    		if (angle >= 30) {
    			clearInterval(animationTimer);
    			showMessages();
    		} else {
    			angle += 0.2;
    		}
    	}, interval);
    }
    
    (function ($) {
    	$.fn.typewriter = function () {
    		this.each(function () {
    			var $ele = $(this), str = $ele.html(), progress = 0;
    			$ele.html('');
    			var timer = setInterval(function () {
    				var current = str.substr(progress, 1);
    				if (current == '<') {
    					progress = str.indexOf('>', progress) + 1;
    				} else {
    					progress++;
    				}
    				$ele.html(str.substring(0, progress) + (progress & 1 ? '_' : ''));
    				if (progress >= str.length) {
    					clearInterval(timer);
    				}
    			}, 75);
    		});
    		return this;
    	};
    })(jQuery);
    
    function timeElapse(date) {
    	var current = Date();
    	var seconds = (Date.parse(current) - Date.parse(date)) / 1000;
    	var days = Math.floor(seconds / (3600 * 24));
    	seconds = seconds % (3600 * 24);
    	var hours = Math.floor(seconds / 3600);
    	if (hours < 10) {
    		hours = "0" + hours;
    	}
    	seconds = seconds % 3600;
    	var minutes = Math.floor(seconds / 60);
    	if (minutes < 10) {
    		minutes = "0" + minutes;
    	}
    	seconds = seconds % 60;
    	if (seconds < 10) {
    		seconds = "0" + seconds;
    	}
    	var result = "<span class="digit">" + days + "</span> days <span class="digit">" + hours + "</span> hours <span class="digit">" + minutes + "</span> minutes <span class="digit">" + seconds + "</span> seconds";
    	$("#elapseClock").html(result);
    }
    
    function showMessages() {
    	adjustWordsPosition();
    	$('#messages').fadeIn(5000, function () {
    		showLoveU();
    	});
    }
    
    function adjustWordsPosition() {
    	$('#words').css("position", "absolute");
    	$('#words').css("top", $("#garden").position().top + 195);
    	$('#words').css("left", $("#garden").position().left + 70);
    }
    
    function adjustCodePosition() {
    	$('#code').css("margin-top", ($("#garden").height() - $("#code").height()) / 2);
    }
    
    function showLoveU() {
    	$('#loveu').fadeIn(3000);
    }
    

    两个js文件直接复制到新建的js文件中引入就行

    内容自己改哟,加油!单身的你别看啦,快找个对象吧!!!

    早日脱单哟!!!

    所触及过的星空,哪怕牺牲所有,也竭力想要抵达的地方!
  • 相关阅读:
    【Canvas】摆线模拟
    【JS】JS正则表达式常见用法(验证、查找和替换)
    【Canvas】将屏幕坐标系转换成笛卡尔坐标系
    【Canvas】狗撵兔子和贝塞尔曲线
    精妙的SQL和SQL SERVER 与ACCESS、EXCEL的数据导入导出转换
    用Javascript实现HtmlEncode与HtmlDecode的另类方法
    [Javascript] 如何在客户端验证表单被改变
    关于IE6和IE7关闭窗口时提示和不提示以及上传图片前的本地预览解决办法
    项目开发经验谈(一)
    Windows 7 开发新特性
  • 原文地址:https://www.cnblogs.com/lishaoxiong/p/13225122.html
Copyright © 2011-2022 走看看