使用jQuery+html表白代码

虽然七夕刚过,但是表白什么都不迟,在这里我就搞了一点代码,献给大家

代码如下:


<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>心形文字title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        @font-face {
            font-family: digit;
            src: url('digital-7_mono.ttf') format("truetype");
        }
    style>
    <link href="style/default.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="style/jquery.js">script>
    <script type="text/javascript" src="style/garden.js">script>
    <script type="text/javascript" src="style/functions.js">script>
head>

<body>
    <div id="mainDiv">
        <div id="content">
            <div id="code">
                <span class="comments">写上自己想说的话span><br />
				
					<div id='hidden'>	
					u.accept(i);<br />
					i.liveHappilyWith(u);<br />
					div>
<script type="text/javascript">
window.on(function(){
 
   $(this).hide();
  });
});
script>
            div>
            <div id="loveHeart">
                <canvas id="garden">canvas>
                <div id="words">
                    <div id="messages">
<center>
<script type="text/javascript">
script>
center>
                       
                        <div id="elapseClock" style="display:none">div>
                        <a href='#' id="accept">click me if accept mea>
                    div>
                    <div id="loveu">
                        Love u forever and ever.<br/>
                        <div class="signature">- boynamediv>
                    div>
                div>
            div>
        div>
    div>
    <script type="text/javascript">
        var offsetX = $("#loveHeart").width() / 2;
        var offsetY = $("#loveHeart").height() / 2 - 55;
        
        if (!document.createElement('canvas').getContext) {
            var msg = document.createElement("div");
            msg.id = "errorMsg";
            msg.innerHTML = "Your browser doesn't support HTML5!
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 () { adjustWordsPosition(); startHeartAnimation(); }, 10000); $("#accept").click(function(){ $(this).hide(); $("#elapseClock").show(); var together = new Date(); timeElapse(together); setInterval(function () { timeElapse(together); }, 500); }) adjustCodePosition(); $("#code").typewriter(); }
script> body> html>

这是一个动态的效果,但是不能展示,所以想看效果的在下面下载
效果如下:
使用jQuery+html表白代码_第1张图片
点击之后
使用jQuery+html表白代码_第2张图片

想要的请点下载
链接: https://pan.baidu.com/s/1MRHlKDlyf_1UsZW72VN0hA 提取码: crt2

你可能感兴趣的:(前端)