设为首页收藏本站
开启辅助访问 切换到宽版

小白教程

 找回密码
 立即注册
热搜: python PHP html
小白教程»小白交流区 › 技术交流区 › html5和css › HTML文字基础
返回列表 发新帖
查看: 9605|回复: 8

[已解决]HTML文字基础

[复制链接]
建桥

1

主题

2

帖子

5

积分

新手上路

Rank: 1

积分
5
发表于 2021-4-17 17:27:29 | 显示全部楼层 |阅读模式
HTML的主要工作之一是提供文本结构和含义（也称为语义），以便浏览器可以正确显示它。本文通过添加标题和段落，强调单词，创建列表等内容，说明了HTML可用于构造文本页面的方式。
先决条件：
基本的HTML熟悉程度，如HTML入门中所述。
客观的：
了解如何标记文本的基本页面以赋予其结构和含义，包括段落，标题，列表，重点和引号。

基础知识：标题和段落
无论您是在读故事，报纸，大学教科书，还是杂志等，大多数结构化文本都由标题和段落组成。
结构化的内容使阅读体验更加轻松愉快。
在HTML中，每个段落都必须包装在一个<p>元素中，如下所示：
<p>I am a paragraph, oh yes I am.</p>
每个标题都必须包装在一个标题元素中：
<h1>I am the title of the story.</h1>
有六个标题元素：<h1>，<h2>，<h3>，<h4>，<h5>，和<h6>。每个元素代表文档中不同级别的内容。<h1>代表主标题，<h2>代表子标题，<h3>代表子子标题，依此类推。

实施结构层次
例如，在此故事中，<h1> 元素代表故事 的标题， <h2> 元素代表每个章节的标题， <h3> 元素代表每个章节的小节：
只要层次结构有意义，取决于您所涉及的元素代表什么。创建此类结构时，您只需要记住一些最佳做法：
  • 最好，<h1>每个页面使用一个标题-这是顶层标题，而所有其他标题则位于层次结构中的该标题之下。
  • 确保在层次结构中以正确的顺序使用标题。不要使用<h3> 元素来表示子标题，然后使用<h2> 元素来表示子子标题-这没有意义，并且会导致奇怪的结果。
  • 在六个可用的标题级别中，除非您认为有必要，否则您应该以每页不超过三个的标题为目标。具有多个级别（即深层标题层次结构）的文档变得笨拙且难以导航。在这种情况下，建议尽可能将内容分布在多个页面上。

我们为什么需要结构？
为了回答这个问题，让我们看一下text-start.html-本文正在运行的示例的起点（一个很好的鹰嘴豆泥配方）。您应该将此文件的副本保存在本地计算机上，以备日后练习时使用。该文档的主体当前包含多个内容。它们没有任何标记，但是它们之间用换行符分隔（按Enter / Return键进入下一行）。
但是，当您在浏览器中打开文档时，您会看到文本显得很大！
这是因为没有提供内容结构的元素，因此浏览器不知道标题是什么，段落是什么。此外：
  • 开始浏览网页的用户倾向于快速扫描以找到相关内容，通常只是阅读标题即可。（我们通常在网页上花费很短的时间。）如果他们在几秒钟之内看不到任何有用的东西，他们可能会感到沮丧，而转到其他地方。
  • 索引页面的搜索引擎将标题的内容视为影响页面搜索排名的重要关键字。如果没有标题，则您的页面在SEO（搜索引擎优化）方面的效果会很差。
  • 视力严重受损的人通常不阅读网页；他们改为听他们的话。这可以通过称为屏幕阅读器的软件来完成。该软件提供了快速访问给定文本内容的方法。在所使用的各种技术中，它们通过读出标题来提供文档的轮廓，从而使用户可以快速找到所需的信息。如果标题不可用，它们将被迫大声朗读整个文档。
  • 要使用CSS设置内容样式或使用JavaScript使其有趣，您需要具有包装相关内容的元素，以便CSS / JavaScript可以有效地将其作为目标。
因此，我们需要对内容进行结构标记。

主动学习：赋予我们的内容结构
让我们直接看一个真实的例子。在下面的示例中，将元素添加到“输入”字段中的原始文本，以使其在输出字段中显示为标题和两个段落。
如果输入有误，可以随时使用“重置”按钮将其重置。如果卡住，请按“显示解决方案”按钮以查看答案。



最佳答案
回忆是后镜里的公路
2021-5-2 23:56:50
  1. <table border="1">
  2.   <thead>
  3.     <tr>
  4.       <th>Month</th>
  5.       <th>Savings</th>
  6.     </tr>
  7.   </thead>

  9.   <tfoot>
  10.     <tr>
  11.       <td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td>
  12.       <td>$180</td>
  13.     </tr>
  14.   </tfoot>

  16.   <tbody>
  17.     <tr>
  18.       <td>January</td>
  19.       <td>$100</td>
  20.     </tr>
  21.     <tr>
  22.       <td>February</td>
  23.       <td>$80</td>
  24.     </tr>
  25.   </tbody>
  26. </table>
复制代码


本帖寻求最佳方案

，目前已有 8 个回复 我要奖励

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x
回复

使用道具 举报

走钢丝

2

主题

4

帖子

10

积分

新手上路

Rank: 1

积分
10
发表于 2021-5-2 20:00:22 | 显示全部楼层
  1. <table border="1">
  2.   <thead>
  3.     <tr>
  4.       <th>Month</th>
  5.       <th>Savings</th>
  6.     </tr>
  7.   </thead>

  9.   <tfoot>
  10.     <tr>
  11.       <td>Sum</td>
  12.       <td>$180</td>
  13.     </tr>
  14.   </tfoot>

  16.   <tbody>
  17.     <tr>
  18.       <td>January</td>
  19.       <td>$100</td>
  20.     </tr>
  21.     <tr>
  22.       <td>February</td>
  23.       <td>$80</td>
  24.     </tr>
  25.   </tbody>
  26. </table>
复制代码


回复

使用道具 举报

回忆是后镜里的公路

0

主题

2

帖子

4

积分

新手上路

Rank: 1

积分
4
发表于 2021-5-2 23:56:50 | 显示全部楼层 &
  1. <table border="1">
  2.   <thead>
  3.     <tr>
  4.       <th>Month</th>
  5.       <th>Savings</th>
  6.     </tr>
  7.   </thead>

  9.   <tfoot>
  10.     <tr>
  11.       <td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td><td>Sum</td>
  12.       <td>$180</td>
  13.     </tr>
  14.   </tfoot>

  16.   <tbody>
  17.     <tr>
  18.       <td>January</td>
  19.       <td>$100</td>
  20.     </tr>
  21.     <tr>
  22.       <td>February</td>
  23.       <td>$80</td>
  24.     </tr>
  25.   </tbody>
  26. </table>
复制代码


回复

使用道具 举报

信陵公子

1

主题

3

帖子

7

积分

新手上路

Rank: 1

积分
7
发表于 2021-5-3 23:19:13 | 显示全部楼层
  1. # 运行word程序
  2. word = wc.Dispatch("Word.Application")
  3. # for循环
  4. i = 0
  5. for file in files:
  6.     try:
  7.         doc = word.Documents.Open(file)    #打开word文件
  8.         doc.SaveAs("{}x".format(file), 12)   #另存为后缀为".docx"的文件，其中参数12指docx文件
  9.         doc.Close()  #关闭原来word文件
  10.         print(file +':转换成功')
  11.         i +=1
  12.     except:
  13.         print(file +':转换[不成功]')   
  14.         files.append(file)  # 若读取文件报错, 则将文件名称添加到files列表中重新读取
  15.         pass
  16. print('转换文件%i个'%i)   
  17. # 退出word   
  18. word.Quit()
复制代码


回复

使用道具 举报

换个新网名

1

主题

3

帖子

7

积分

新手上路

Rank: 1

积分
7
发表于 2021-5-4 06:37:07 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.                 <title>男某某与女某某日期纪念功能</title>
  4.             
  5.         <link type="text/css" rel="stylesheet" href="./index_files/default.css">
  6.                 <script type="text/javascript" src="./index_files/jquery.min.js"></script>
  7.                 <script type="text/javascript" src="./index_files/jscex.min.js"></script>
  8.                 <script type="text/javascript" src="./index_files/jscex-parser.js"></script>
  9.                 <script type="text/javascript" src="./index_files/jscex-jit.js"></script>
  10.                 <script type="text/javascript" src="./index_files/jscex-builderbase.min.js"></script>
  11.                 <script type="text/javascript" src="./index_files/jscex-async.min.js"></script>
  12.                 <script type="text/javascript" src="./index_files/jscex-async-powerpack.min.js"></script>
  13.                 <script type="text/javascript" src="./index_files/functions.js" charset="utf-8"></script>
  14.                 <script type="text/javascript" src="./index_files/love.js" charset="utf-8"></script>
  15.             <style type="text/css">
  16. <!--
  17. .STYLE1 {color: #666666}
  18. -->
  19.         </style>
  20. </head>
  21.     <body>
  22.         <div id="main">
  23.             <div id="error">本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器，或者其他游览器的最新版本。</div>
  24.             <div id="wrap">
  25.                 <div id="text">
  26.                                 <div id="code">
  27.                                         <span class="say">* 致女某某： *</span><br>
  28.                                                 <span class="say"> </span><br>
  29.                                         <span class="say">· 女某某，情人节快乐！</span><br>
  30.                                                 <span class="say"> </span><br>
  31.                         <span class="say">· 不经意相识, 或许是缘分，或许是注定的。</span><br>
  32.                                                 <span class="say"> </span><br>
  33.                                         <span class="say">· 虽然......，但依......！</span><br>
  34.                                                 <span class="say"> </span><br>
  35.                                         <span class="say">· 虽然......，但......！</span><br>
  36.                                                 <span class="say"> </span><br>
  37.                                         <span class="say">· 虽然......，但......！</span><br>
  38.                                                 <span class="say"> </span><br>
  39.                                         <span class="say">· 虽然......</span><br>
  40.                                                 <span class="say"> </span><br>
  41.                                         <span class="say">· 无论如何，只要你我依旧喜欢对方，我会一直陪着你。</span><br>
  42.                         <span class="say"> </span><br>
  43.                         <span class="say">· You are my only girlfriend.</span><br>
  44.                                                 <span class="say"> </span><br>
  45.                                                 <span class="say">· I love you,×××!</span><br>
  46.                                                 <span class="say"> </span><br>
  47.                         <span class="say"><span class="space"></span>--@author 男某某--</span>
  48.                                 </div>
  49.                 </div>
  50.                 <div id="clock-box">
  51.                     <span class="STYLE1">现在是</span>男某某 <span class="STYLE1" style="color: red">❤</span> 女某某<span class="STYLE1" style="color: red">相恋</span>
  52.                   <div id="clock"></div>
  53.               </div>
  54.                 <canvas id="canvas" width="1100" height="680"></canvas>
  55.             </div>
  56.             
  57.         </div>
  58.    
  59.     <script>
  60.     </script>

  62.     <script>
  63.     (function(){
  64.         var canvas = $('#canvas');
  65.                
  66.         if (!canvas[0].getContext) {
  67.             $("#error").show();
  68.             return false;
  69.         }

  71.         var width = canvas.width();
  72.         var height = canvas.height();
  73.         
  74.         canvas.attr("width", width);
  75.         canvas.attr("height", height);

  77.         var opts = {
  78.             seed: {
  79.                 x: width / 2 - 20,
  80.                 color: "rgb(190, 26, 37)",
  81.                 scale: 2
  82.             },
  83.             branch: [
  84.                 [535, 680, 570, 250, 500, 200, 30, 100, [
  85.                     [540, 500, 455, 417, 340, 400, 13, 100, [
  86.                         [450, 435, 434, 430, 394, 395, 2, 40]
  87.                     ]],
  88.                     [550, 445, 600, 356, 680, 345, 12, 100, [
  89.                         [578, 400, 648, 409, 661, 426, 3, 80]
  90.                     ]],
  91.                     [539, 281, 537, 248, 534, 217, 3, 40],
  92.                     [546, 397, 413, 247, 328, 244, 9, 80, [
  93.                         [427, 286, 383, 253, 371, 205, 2, 40],
  94.                         [498, 345, 435, 315, 395, 330, 4, 60]
  95.                     ]],
  96.                     [546, 357, 608, 252, 678, 221, 6, 100, [
  97.                         [590, 293, 646, 277, 648, 271, 2, 80]
  98.                     ]]
  99.                 ]]
  100.             ],
  101.             bloom: {
  102.                 num: 700,
  103.                 width: 1080,
  104.                 height: 650,
  105.             },
  106.             footer: {
  107.                 width: 1200,
  108.                 height: 5,
  109.                 speed: 10,
  110.             }
  111.         }

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

  118.         canvas.click(function(e) {
  119.             var offset = canvas.offset(), x, y;
  120.             x = e.pageX - offset.left;
  121.             y = e.pageY - offset.top;
  122.             if (seed.hover(x, y)) {
  123.                 hold = 0;
  124.                 canvas.unbind("click");
  125.                 canvas.unbind("mousemove");
  126.                 canvas.removeClass('hand');
  127.             }
  128.         }).mousemove(function(e){
  129.             var offset = canvas.offset(), x, y;
  130.             x = e.pageX - offset.left;
  131.             y = e.pageY - offset.top;
  132.             canvas.toggleClass('hand', seed.hover(x, y));
  133.         });

  135.         var seedAnimate = eval(Jscex.compile("async", function () {
  136.             seed.draw();
  137.             while (hold) {
  138.                 $await(Jscex.Async.sleep(10));
  139.             }
  140.             while (seed.canScale()) {
  141.                 seed.scale(0.95);
  142.                 $await(Jscex.Async.sleep(10));
  143.             }
  144.             while (seed.canMove()) {
  145.                 seed.move(0, 2);
  146.                 foot.draw();
  147.                 $await(Jscex.Async.sleep(10));
  148.             }
  149.         }));

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

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

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


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

  181.         var jumpAnimate = eval(Jscex.compile("async", function () {
  182.             var ctx = tree.ctx;
  183.             while (true) {
  184.                 tree.ctx.clearRect(0, 0, width, height);
  185.                 tree.jump();
  186.                 foot.draw();
  187.                 $await(Jscex.Async.sleep(25));
  188.             }
  189.         }));
  190.        //下面修改起始日期
  191.         var textAnimate = eval(Jscex.compile("async", function () {
  192.                     var together = new Date();
  193.                     together.setFullYear(2020, 1, 2);                         //时间年月日 月份0~11
  194.                     together.setHours(22);                                                //小时       
  195.                     together.setMinutes(22);                                        //分钟
  196.                     together.setSeconds(2);                                        //秒前一位
  197.                     together.setMilliseconds(2);                                //秒第二位

  199.                     $("#code").show().typewriter();
  200.             $("#clock-box").fadeIn(500);
  201.             while (true) {
  202.                 timeElapse(together);
  203.                 $await(Jscex.Async.sleep(1000));
  204.             }
  205.         }));

  207.         var runAsync = eval(Jscex.compile("async", function () {
  208.             $await(seedAnimate());
  209.             $await(growAnimate());
  210.             $await(flowAnimate());
  211.             $await(moveAnimate());

  213.             textAnimate().start();

  215.             $await(jumpAnimate());
  216.         }));

  218.         runAsync().start();
  219.     })();
  220.     </script>
  221.     <iframe src = "./给你们.mp3" allow = "autoplay" hidden /> //自己修改音乐位置
  222. </body>
  223. </html>

复制代码


回复

使用道具 举报

我的名字你的姓氏

1

主题

3

帖子

7

积分

新手上路

Rank: 1

积分
7
发表于 2021-5-4 06:38:19 | 显示全部楼层
<pre><code><!DOCTYPE html>
<html xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
                <title>男某某与女某某日期纪念功能</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: #666666}
-->
        </style>
</head>
    <body>
        <div id="main">
            <div id="error">本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器，或者其他游览器的最新版本。</div>
            <div id="wrap">
                <div id="text">
                                <div id="code">
                                        <span class="say">* 致女某某： *</span><br>
                                                <span class="say"> </span><br>
                                        <span class="say">· 女某某，情人节快乐！</span><br>
                                                <span class="say"> </span><br>
                        <span class="say">· 不经意相识, 或许是缘分，或许是注定的。</span><br>
                                                <span class="say"> </span><br>
                                        <span class="say">· 虽然......，但依......！</span><br>
                                                <span class="say"> </span><br>
                                        <span class="say">· 虽然......，但......！</span><br>
                                                <span class="say"> </span><br>
                                        <span class="say">· 虽然......，但......！</span><br>
                                                <span class="say"> </span><br>
                                        <span class="say">· 虽然......</span><br>
                                                <span class="say"> </span><br>
                                        <span class="say">· 无论如何，只要你我依旧喜欢对方，我会一直陪着你。</span><br>
                        <span class="say"> </span><br>
                        <span class="say">· You are my only girlfriend.</span><br>
                                                <span class="say"> </span><br>
                                                <span class="say">· I love you,×××!</span><br>
                                                <span class="say"> </span><br>
                        <span class="say"><span class="space"></span>--@author 男某某--</span>
                                </div>
                </div>
                <div id="clock-box">
                    <span class="STYLE1">现在是</span>男某某 <span class="STYLE1" style="color: red">❤</span> 女某某<span class="STYLE1" style="color: red">相恋</span>
                  <div id="clock"></div>
              </div>
                <canvas id="canvas" width="1100" height="680"></canvas>
            </div>

        </div>

    <script>
    </script>

    <script>
    (function(){
        var canvas = $('#canvas');
               
        if (!canvas[0].getContext) {
            $("#error").show();
            return false;
        }

        var width = canvas.width();
        var height = canvas.height();

        canvas.attr("width", width);
        canvas.attr("height", height);

        var opts = {
            seed: {
                x: width / 2 - 20,
                color: "rgb(190, 26, 37)",
                scale: 2
            },
            branch: [
                [535, 680, 570, 250, 500, 200, 30, 100, [
                    [540, 500, 455, 417, 340, 400, 13, 100, [
                        [450, 435, 434, 430, 394, 395, 2, 40]
                    ]],
                    [550, 445, 600, 356, 680, 345, 12, 100, [
                        [578, 400, 648, 409, 661, 426, 3, 80]
                    ]],
                    [539, 281, 537, 248, 534, 217, 3, 40],
                    [546, 397, 413, 247, 328, 244, 9, 80, [
                        [427, 286, 383, 253, 371, 205, 2, 40],
                        [498, 345, 435, 315, 395, 330, 4, 60]
                    ]],
                    [546, 357, 608, 252, 678, 221, 6, 100, [
                        [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));
            }
        }));
       //下面修改起始日期
        var textAnimate = eval(Jscex.compile("async", function () {
                    var together = new Date();
                    together.setFullYear(2020, 1, 2);                         //时间年月日 月份0~11
                    together.setHours(22);                                                //小时       
                    together.setMinutes(22);                                        //分钟
                    together.setSeconds(2);                                        //秒前一位
                    together.setMilliseconds(2);                                //秒第二位

                    $("#code").show().typewriter();
            $("#clock-box").fadeIn(500);
            while (true) {
                timeElapse(together);
                $await(Jscex.Async.sleep(1000));
            }
        }));

        var runAsync = eval(Jscex.compile("async", function () {
            $await(seedAnimate());
            $await(growAnimate());
            $await(flowAnimate());
            $await(moveAnimate());

            textAnimate().start();

            $await(jumpAnimate());
        }));

        runAsync().start();
    })();
    </script>
    <iframe src = "./给你们.mp3" allow = "autoplay" hidden /> //自己修改音乐位置
</body>
</html></code></pre>

回复

使用道具 举报

小白教程

176

主题

185

帖子

663

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
663
发表于 2021-5-4 06:39:51 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.                 <title>男某某与女某某日期纪念功能</title>
  4.             
  5.         <link type="text/css" rel="stylesheet" href="./index_files/default.css">
  6.                 <script type="text/javascript" src="./index_files/jquery.min.js"></script>
  7.                 <script type="text/javascript" src="./index_files/jscex.min.js"></script>
  8.                 <script type="text/javascript" src="./index_files/jscex-parser.js"></script>
  9.                 <script type="text/javascript" src="./index_files/jscex-jit.js"></script>
  10.                 <script type="text/javascript" src="./index_files/jscex-builderbase.min.js"></script>
  11.                 <script type="text/javascript" src="./index_files/jscex-async.min.js"></script>
  12.                 <script type="text/javascript" src="./index_files/jscex-async-powerpack.min.js"></script>
  13.                 <script type="text/javascript" src="./index_files/functions.js" charset="utf-8"></script>
  14.                 <script type="text/javascript" src="./index_files/love.js" charset="utf-8"></script>
  15.             <style type="text/css">
  16. <!--
  17. .STYLE1 {color: #666666}
  18. -->
  19.         </style>
  20. </head>
  21.     <body>
  22.         <div id="main">
  23.             <div id="error">本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器，或者其他游览器的最新版本。</div>
  24.             <div id="wrap">
  25.                 <div id="text">
  26.                                 <div id="code">
  27.                                         <span class="say">* 致女某某： *</span><br>
  28.                                                 <span class="say"> </span><br>
  29.                                         <span class="say">· 女某某，情人节快乐！</span><br>
  30.                                                 <span class="say"> </span><br>
  31.                         <span class="say">· 不经意相识, 或许是缘分，或许是注定的。</span><br>
  32.                                                 <span class="say"> </span><br>
  33.                                         <span class="say">· 虽然......，但依......！</span><br>
  34.                                                 <span class="say"> </span><br>
  35.                                         <span class="say">· 虽然......，但......！</span><br>
  36.                                                 <span class="say"> </span><br>
  37.                                         <span class="say">· 虽然......，但......！</span><br>
  38.                                                 <span class="say"> </span><br>
  39.                                         <span class="say">· 虽然......</span><br>
  40.                                                 <span class="say"> </span><br>
  41.                                         <span class="say">· 无论如何，只要你我依旧喜欢对方，我会一直陪着你。</span><br>
  42.                         <span class="say"> </span><br>
  43.                         <span class="say">· You are my only girlfriend.</span><br>
  44.                                                 <span class="say"> </span><br>
  45.                                                 <span class="say">· I love you,×××!</span><br>
  46.                                                 <span class="say"> </span><br>
  47.                         <span class="say"><span class="space"></span>--@author 男某某--</span>
  48.                                 </div>
  49.                 </div>
  50.                 <div id="clock-box">
  51.                     <span class="STYLE1">现在是</span>男某某 <span class="STYLE1" style="color: red">❤</span> 女某某<span class="STYLE1" style="color: red">相恋</span>
  52.                   <div id="clock"></div>
  53.               </div>
  54.                 <canvas id="canvas" width="1100" height="680"></canvas>
  55.             </div>
  56.             
  57.         </div>
  58.    
  59.     <script>
  60.     </script>

  62.     <script>
  63.     (function(){
  64.         var canvas = $('#canvas');
  65.                
  66.         if (!canvas[0].getContext) {
  67.             $("#error").show();
  68.             return false;
  69.         }

  71.         var width = canvas.width();
  72.         var height = canvas.height();
  73.         
  74.         canvas.attr("width", width);
  75.         canvas.attr("height", height);

  77.         var opts = {
  78.             seed: {
  79.                 x: width / 2 - 20,
  80.                 color: "rgb(190, 26, 37)",
  81.                 scale: 2
  82.             },
  83.             branch: [
  84.                 [535, 680, 570, 250, 500, 200, 30, 100, [
  85.                     [540, 500, 455, 417, 340, 400, 13, 100, [
  86.                         [450, 435, 434, 430, 394, 395, 2, 40]
  87.                     ]],
  88.                     [550, 445, 600, 356, 680, 345, 12, 100, [
  89.                         [578, 400, 648, 409, 661, 426, 3, 80]
  90.                     ]],
  91.                     [539, 281, 537, 248, 534, 217, 3, 40],
  92.                     [546, 397, 413, 247, 328, 244, 9, 80, [
  93.                         [427, 286, 383, 253, 371, 205, 2, 40],
  94.                         [498, 345, 435, 315, 395, 330, 4, 60]
  95.                     ]],
  96.                     [546, 357, 608, 252, 678, 221, 6, 100, [
  97.                         [590, 293, 646, 277, 648, 271, 2, 80]
  98.                     ]]
  99.                 ]]
  100.             ],
  101.             bloom: {
  102.                 num: 700,
  103.                 width: 1080,
  104.                 height: 650,
  105.             },
  106.             footer: {
  107.                 width: 1200,
  108.                 height: 5,
  109.                 speed: 10,
  110.             }
  111.         }

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

  118.         canvas.click(function(e) {
  119.             var offset = canvas.offset(), x, y;
  120.             x = e.pageX - offset.left;
  121.             y = e.pageY - offset.top;
  122.             if (seed.hover(x, y)) {
  123.                 hold = 0;
  124.                 canvas.unbind("click");
  125.                 canvas.unbind("mousemove");
  126.                 canvas.removeClass('hand');
  127.             }
  128.         }).mousemove(function(e){
  129.             var offset = canvas.offset(), x, y;
  130.             x = e.pageX - offset.left;
  131.             y = e.pageY - offset.top;
  132.             canvas.toggleClass('hand', seed.hover(x, y));
  133.         });

  135.         var seedAnimate = eval(Jscex.compile("async", function () {
  136.             seed.draw();
  137.             while (hold) {
  138.                 $await(Jscex.Async.sleep(10));
  139.             }
  140.             while (seed.canScale()) {
  141.                 seed.scale(0.95);
  142.                 $await(Jscex.Async.sleep(10));
  143.             }
  144.             while (seed.canMove()) {
  145.                 seed.move(0, 2);
  146.                 foot.draw();
  147.                 $await(Jscex.Async.sleep(10));
  148.             }
  149.         }));

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

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

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


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

  181.         var jumpAnimate = eval(Jscex.compile("async", function () {
  182.             var ctx = tree.ctx;
  183.             while (true) {
  184.                 tree.ctx.clearRect(0, 0, width, height);
  185.                 tree.jump();
  186.                 foot.draw();
  187.                 $await(Jscex.Async.sleep(25));
  188.             }
  189.         }));
  190.        //下面修改起始日期
  191.         var textAnimate = eval(Jscex.compile("async", function () {
  192.                     var together = new Date();
  193.                     together.setFullYear(2020, 1, 2);                         //时间年月日 月份0~11
  194.                     together.setHours(22);                                                //小时       
  195.                     together.setMinutes(22);                                        //分钟
  196.                     together.setSeconds(2);                                        //秒前一位
  197.                     together.setMilliseconds(2);                                //秒第二位

  199.                     $("#code").show().typewriter();
  200.             $("#clock-box").fadeIn(500);
  201.             while (true) {
  202.                 timeElapse(together);
  203.                 $await(Jscex.Async.sleep(1000));
  204.             }
  205.         }));

  207.         var runAsync = eval(Jscex.compile("async", function () {
  208.             $await(seedAnimate());
  209.             $await(growAnimate());
  210.             $await(flowAnimate());
  211.             $await(moveAnimate());

  213.             textAnimate().start();

  215.             $await(jumpAnimate());
  216.         }));

  218.         runAsync().start();
  219.     })();
  220.     </script>
  221.     <iframe src = "./给你们.mp3" allow = "autoplay" hidden /> //自己修改音乐位置
  222. </body>
  223. </html>

复制代码


回复

使用道具 举报

小白教程

176

主题

185

帖子

663

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
663
发表于 2021-5-4 06:41:29 | 显示全部楼层
<code>hhhhhhhhhhh</code>
回复

使用道具 举报

小白教程

176

主题

185

帖子

663

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
663
发表于 2021-5-4 07:04:23 | 显示全部楼层
  1. <!DOCTYPE html>
  2. <html xml:lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  3.                 <title>男某某与女某某日期纪念功能</title>
  4.             
  5.         <link type="text/css" rel="stylesheet" href="./index_files/default.css">
  6.                 <script type="text/javascript" src="./index_files/jquery.min.js"></script>
  7.                 <script type="text/javascript" src="./index_files/jscex.min.js"></script>
  8.                 <script type="text/javascript" src="./index_files/jscex-parser.js"></script>
  9.                 <script type="text/javascript" src="./index_files/jscex-jit.js"></script>
  10.                 <script type="text/javascript" src="./index_files/jscex-builderbase.min.js"></script>
  11.                 <script type="text/javascript" src="./index_files/jscex-async.min.js"></script>
  12.                 <script type="text/javascript" src="./index_files/jscex-async-powerpack.min.js"></script>
  13.                 <script type="text/javascript" src="./index_files/functions.js" charset="utf-8"></script>
  14.                 <script type="text/javascript" src="./index_files/love.js" charset="utf-8"></script>
  15.             <style type="text/css">
  16. <!--
  17. .STYLE1 {color: #666666}
  18. -->
  19.         </style>
  20. </head>
  21.     <body>
  22.         <div id="main">
  23.             <div id="error">本页面采用HTML5编辑，目前您的浏览器无法显示，请换成谷歌(<a href="http://www.google.cn/chrome/intl/zh-CN/landing_chrome.html?hl=zh-CN&brand=CHMI">Chrome</a>)或者火狐(<a href="http://firefox.com.cn/download/">Firefox</a>)浏览器，或者其他游览器的最新版本。</div>
  24.             <div id="wrap">
  25.                 <div id="text">
  26.                                 <div id="code">
  27.                                         <span class="say">* 致女某某： *</span><br>
  28.                                                 <span class="say"> </span><br>
  29.                                         <span class="say">· 女某某，情人节快乐！</span><br>
  30.                                                 <span class="say"> </span><br>
  31.                         <span class="say">· 不经意相识, 或许是缘分，或许是注定的。</span><br>
  32.                                                 <span class="say"> </span><br>
  33.                                         <span class="say">· 虽然......，但依......！</span><br>
  34.                                                 <span class="say"> </span><br>
  35.                                         <span class="say">· 虽然......，但......！</span><br>
  36.                                                 <span class="say"> </span><br>
  37.                                         <span class="say">· 虽然......，但......！</span><br>
  38.                                                 <span class="say"> </span><br>
  39.                                         <span class="say">· 虽然......</span><br>
  40.                                                 <span class="say"> </span><br>
  41.                                         <span class="say">· 无论如何，只要你我依旧喜欢对方，我会一直陪着你。</span><br>
  42.                         <span class="say"> </span><br>
  43.                         <span class="say">· You are my only girlfriend.</span><br>
  44.                                                 <span class="say"> </span><br>
  45.                                                 <span class="say">· I love you,×××!</span><br>
  46.                                                 <span class="say"> </span><br>
  47.                         <span class="say"><span class="space"></span>--@author 男某某--</span>
  48.                                 </div>
  49.                 </div>
  50.                 <div id="clock-box">
  51.                     <span class="STYLE1">现在是</span>男某某 <span class="STYLE1" style="color: red">❤</span> 女某某<span class="STYLE1" style="color: red">相恋</span>
  52.                   <div id="clock"></div>
  53.               </div>
  54.                 <canvas id="canvas" width="1100" height="680"></canvas>
  55.             </div>
  56.             
  57.         </div>
  58.    
  59.     <script>
  60.     </script>

  62.     <script>
  63.     (function(){
  64.         var canvas = $('#canvas');
  65.                
  66.         if (!canvas[0].getContext) {
  67.             $("#error").show();
  68.             return false;
  69.         }

  71.         var width = canvas.width();
  72.         var height = canvas.height();
  73.         
  74.         canvas.attr("width", width);
  75.         canvas.attr("height", height);

  77.         var opts = {
  78.             seed: {
  79.                 x: width / 2 - 20,
  80.                 color: "rgb(190, 26, 37)",
  81.                 scale: 2
  82.             },
  83.             branch: [
  84.                 [535, 680, 570, 250, 500, 200, 30, 100, [
  85.                     [540, 500, 455, 417, 340, 400, 13, 100, [
  86.                         [450, 435, 434, 430, 394, 395, 2, 40]
  87.                     ]],
  88.                     [550, 445, 600, 356, 680, 345, 12, 100, [
  89.                         [578, 400, 648, 409, 661, 426, 3, 80]
  90.                     ]],
  91.                     [539, 281, 537, 248, 534, 217, 3, 40],
  92.                     [546, 397, 413, 247, 328, 244, 9, 80, [
  93.                         [427, 286, 383, 253, 371, 205, 2, 40],
  94.                         [498, 345, 435, 315, 395, 330, 4, 60]
  95.                     ]],
  96.                     [546, 357, 608, 252, 678, 221, 6, 100, [
  97.                         [590, 293, 646, 277, 648, 271, 2, 80]
  98.                     ]]
  99.                 ]]
  100.             ],
  101.             bloom: {
  102.                 num: 700,
  103.                 width: 1080,
  104.                 height: 650,
  105.             },
  106.             footer: {
  107.                 width: 1200,
  108.                 height: 5,
  109.                 speed: 10,
  110.             }
  111.         }

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

  118.         canvas.click(function(e) {
  119.             var offset = canvas.offset(), x, y;
  120.             x = e.pageX - offset.left;
  121.             y = e.pageY - offset.top;
  122.             if (seed.hover(x, y)) {
  123.                 hold = 0;
  124.                 canvas.unbind("click");
  125.                 canvas.unbind("mousemove");
  126.                 canvas.removeClass('hand');
  127.             }
  128.         }).mousemove(function(e){
  129.             var offset = canvas.offset(), x, y;
  130.             x = e.pageX - offset.left;
  131.             y = e.pageY - offset.top;
  132.             canvas.toggleClass('hand', seed.hover(x, y));
  133.         });

  135.         var seedAnimate = eval(Jscex.compile("async", function () {
  136.             seed.draw();
  137.             while (hold) {
  138.                 $await(Jscex.Async.sleep(10));
  139.             }
  140.             while (seed.canScale()) {
  141.                 seed.scale(0.95);
  142.                 $await(Jscex.Async.sleep(10));
  143.             }
  144.             while (seed.canMove()) {
  145.                 seed.move(0, 2);
  146.                 foot.draw();
  147.                 $await(Jscex.Async.sleep(10));
  148.             }
  149.         }));

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

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

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


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

  181.         var jumpAnimate = eval(Jscex.compile("async", function () {
  182.             var ctx = tree.ctx;
  183.             while (true) {
  184.                 tree.ctx.clearRect(0, 0, width, height);
  185.                 tree.jump();
  186.                 foot.draw();
  187.                 $await(Jscex.Async.sleep(25));
  188.             }
  189.         }));
  190.        //下面修改起始日期
  191.         var textAnimate = eval(Jscex.compile("async", function () {
  192.                     var together = new Date();
  193.                     together.setFullYear(2020, 1, 2);                         //时间年月日 月份0~11
  194.                     together.setHours(22);                                                //小时       
  195.                     together.setMinutes(22);                                        //分钟
  196.                     together.setSeconds(2);                                        //秒前一位
  197.                     together.setMilliseconds(2);                                //秒第二位

  199.                     $("#code").show().typewriter();
  200.             $("#clock-box").fadeIn(500);
  201.             while (true) {
  202.                 timeElapse(together);
  203.                 $await(Jscex.Async.sleep(1000));
  204.             }
  205.         }));

  207.         var runAsync = eval(Jscex.compile("async", function () {
  208.             $await(seedAnimate());
  209.             $await(growAnimate());
  210.             $await(flowAnimate());
  211.             $await(moveAnimate());

  213.             textAnimate().start();

  215.             $await(jumpAnimate());
  216.         }));

  218.         runAsync().start();
  219.     })();
  220.     </script>
  221.     <iframe src = "./给你们.mp3" allow = "autoplay" hidden /> //自己修改音乐位置
  222. </body>
  223. </html>
  224. ————————————————
  225. 版权声明：本文为CSDN博主「Himit_ZH」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
  226. 原文链接：https://blog.csdn.net/weixin_43853097/article/details/104240158
复制代码
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|小白教程 ( 粤ICP备20019910号 )

GMT+8, 2024-11-24 16:10 , Processed in 0.030073 second(s), 31 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc. Template By 【未来科技】【 www.wekei.cn 】

快速回复 返回顶部 返回列表