BinaryDevelop
  1. ホーム
  2. ハイパーリンク

バレンタインデーに最適なHTML5の記念日機能付きギフト

2022-02-22 02:30:26
<パス

前文

HTML5、css、jsを使ってラブツリーを実装し、音楽とタイピングで気持ちを伝えるWebページの記念日、恋人へのバレンタインデーに最適です

具体的なHTMLコード

具体的には、男性用so-and-soと女性用so-and-soのテキストセグメント内のコードを変更するだけで、それ自体も変更できますし、コードの下半分のJSコードは、日付の開始を変更する必要があります。
もちろん、HTMLとJSのコードの一部だけでは記事を実行することはできませんので、記事の下部には完全なコードのダウンロードアドレスも添付しています 

<!DOCTYPE html>
<html xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8& quot;>
		<title>Male so-and-so and female so-and-so date memorial function</title>
	    
        <link type="text/css" rel="stylesheet" href=". /index_files/default.css">
		<script type="text/javascript" src=". /index_files/jquery.min.js"></script>
		<script type="text/javascript" src=". /index_files/jscex.min.js"></script>
		<script type="text/javascript" src=". /index_files/jscex-parser.js"></script>
		<script type="text/javascript" src=". /index_files/jscex-jit.js"></script>
		<script type="text/javascript" src=". /index_files/jscex-builderbase.min.js"></script>
		<script type="text/javascript" src=". /index_files/jscex-async.min.js"></script>
		<script type="text/javascript" src=". /index_files/jscex-async-powerpack.min.js"></script>
		<script type="text/javascript" src=". /index_files/functions.js" charset="utf-8"></script>
		<script type="text/javascript" src=". /index_files/love.js" charset="utf-8"></script>
	    <style type="text/css">
<! --
.STYLE1 {color: #66666666}
-->
        </style>
</head>
    <body>
        <div id="main">
            <div id="error"> This page is edited in HTML5, currently your browser can not display, please change to Google (<a href="http://www.google.cn/chrome/intl/zh-CN/landing_ chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>) or Firefox (<a href="http://firefox.com.cn/download/"> Firefox</a>) browser, or the latest version of any other excursion. </div>
            <div id="wrap">
                <div id="text">
			        <div id="code">
			        	<span class="say">* To female so-and-so: *</span><br>
						<span class="say"> </span><br>
			        	<span class="say">- Happy Valentine's Day, female so-and-so! </span><br>
						<span class="say"> </span><br>
                        <span class="say"> - To meet without thinking, maybe it's fate, maybe it's destined. </span><br>
						<span class="say"> </span><br>
			        	<span class="say">- Although ...... , but according to ......! </span><br>
						<span class="say"> </span><br>
			        	<span class="say">- Although ...... , but ......! </span><br>
						<span class="say"> </span><br>
			        	<span class="say">- Although ...... , but ......! </span><br>
						<span class="say"> </span><br>
			        	<span class="say">- Although ...... </span><br>
						<span class="say"> </span><br>
			        	<span class="say">- No matter what, as long as you and I still like each other, I will always be there for you. </span><br>
                        <span class="say"> </span><br>
             
                        [590, 293, 646, 277, 648, 271, 2, 80]
                    ]]
                ]] 
            ],
            bloom: {
                num: 700,
                width: 1080,
                height: 650,
            },
            footer: {
                width: 1200,
                height: 5,
                speed: 10,
            }
        }

        var tree = new Tree(canvas[0], width, height, opts);
        var seed = tree.seed;
        var foot = tree.footer;
        var hold = 1;

        canvas.click(function(e) {
            var offset = canvas.offset(), x, y;
            x = e.pageX - offset.left;
            y = e.pageY - offset.top;
            if (seed.hover(x, y)) {
                hold = 0; 
                canvas.unbind("click");
                canvas.unbind("mousemove");
                canvas.removeClass('hand');
            }
        }).mousemove(function(e){
            var offset = canvas.offset(), x, y;
            x = e.pageX - offset.left;
            y = e.pageY - offset.top;
            canvas.toggleClass('hand', seed.hover(x, y));
        });

        var seedAnimate = eval(Jscex.compile("async", function () {
            seed.draw();
            while (hold) {
                $await(Jscex.Async.sleep(10));
            }
            while (seed.canScale()) {
                seed.scale(0.95);
                $await(Jscex.Async.sleep(10));
            }
            while (seed.canMove()) {
                seed.move(0, 2);
                foot.draw();
                $await(Jscex.Async.sleep(10));
            }
        }));

        var growAnimate = eval(Jscex.compile("async", function () {
            do {
    	        tree.grow();
                $await(Jscex.Async.sleep(10));
            } while (tree.canGrow());
        }));

        var flowAnimate = eval(Jscex.compile("async", function () {
            do {
    	        tree.flower(2);
                $await(Jscex.Async.sleep(10));
            } while (tree.canFlower());
        }));

        var moveAnimate = eval(Jscex.compile("async", function () {
            tree.snapshot("p1", 240, 0, 610, 680);
            while (tree.move("p1", 500, 0)) {
                foot.draw();
                $await(Jscex.Async.sleep(10));
            }
            foot.draw();
            tree.snapshot("p2", 500, 0, 610, 680);


            canvas.parent().css("background", "url(" + tree.toDataURL('image/png') + ")");
            canvas.css("background", "#ffe");
            $await(Jscex.Async.sleep(300));
            canvas.css("background", "none");
        }));

        var jumpAnimate = eval(Jscex.compile("async", function () {
            var ctx = tree.ctx;
            while (true) {
                tree.ctx.clearRect(0, 0, width, height);
                tree.jump();
                foot.draw();
                $await(Jscex.Async.sleep(25));
            }
        }));
       // The following changes the start date
        var textAnimate = eval(Jscex.compile("async", function () {
		    var together = new Date();
		    together.setFullYear(2020, 1, 2); // time year month day month month 0~11
		    together.setHours(22); //hours	
		    together.setMinutes(22); //minutes
		    together.setSeconds(2); //one before the second
		    together.setMilliseconds(2); //seconds second

		    $("#code").show().typewriter();
            $("#clock-box").fadeIn(500);
            while (true) {
                timeElap

画面のデモンストレーションです。

ページ中央のラブ・ハートをクリックすると、最初にページに入ったときに自動的に音楽が流れます。

2.ゆっくりと、かなり速く、ラブツリーを生成します。

そして、ラブツリーを右端にパンして、記事を生成できる状態にします。

ゆっくりと話す言葉を生成します 日付は2020.02.02 22:22:22に設定されています。

最終的な⑤の外観

フルコード・リソース、内部はページをクリックするだけで実行できます。

注：モバイルは動作しません。完全に動作させるには、Google、Firefox、またはそれ以上のバージョンのブラウザが必要です。
ページテキストを修正する必要がある場合は、上記と同じコードのファイル（anniversary.html）を修正するだけです。メモ帳で開いて修正できますし、もちろんHTMLを書く各種コンパイラでも修正・保存が可能です。
以下は、主にクラウドリンク切れを恐れて、ポイントが必要なCSDNダウンロードです。
フルリソースRARパッケージのダウンロードアドレス
ここでは、無料のクラウドは、そのほとんどが輸送され、統合され、小さな部分を変更されているので
リンク： https://pan.baidu.com/s/1DE2l4fkNdnZUxxme4HS6vw 抽出コード： i69r

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します