MVC项目发布前的配置

行盒子基线的移动

这是使用vertical-align时一个常见的坑:行盒子基线的位置会受到其中所有元素的影响。假设一个元素采用的对齐方式会导致行盒子移动。由于大多数垂直对齐(除topbottom外),都相对于基线计算,因此这会导致该行所有其他元素重新调整位置。

下面是几个例子。

  • 如果行内有一个很高的元素,这个元素上方和下方都没有空间了,此时要与行盒子的基线对齐,就必须让它移动。矮盒子是vertical-align: baseline。左侧的高盒子是vertical-align: text-bottom,而右侧的高盒子是vertical-algin: text-top。可以看到,基线带着矮盒子移动到了上方。

    图片 1

<!-- left mark-up --> <span class="tall-box
text-bottom"></span> <span
class="short-box"></span> <!-- right mark-up -->
<span class="tall-box text-top"></span> <span
class="short-box"></span> <style type="text/css">
.tall-box, .short-box { display: inline-block; /\* size, color, etc.
\*/ } .text-bottom { vertical-align: text-bottom; } .text-top {
vertical-align: text-top; } </style>

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69e191499678196096-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e191499678196096-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69e191499678196096-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e191499678196096-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69e191499678196096-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e191499678196096-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f69e191499678196096-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e191499678196096-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f69e191499678196096-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e191499678196096-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f69e191499678196096-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e191499678196096-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f69e191499678196096-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e191499678196096-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f69e191499678196096-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e191499678196096-16">
16
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69e191499678196096-1" class="crayon-line">
 &lt;!-- left mark-up --&gt;
</div>
<div id="crayon-5b8f69e191499678196096-2" class="crayon-line crayon-striped-line">
 &lt;span class=&quot;tall-box text-bottom&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e191499678196096-3" class="crayon-line">
 &lt;span class=&quot;short-box&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e191499678196096-4" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f69e191499678196096-5" class="crayon-line">
 &lt;!-- right mark-up --&gt;
</div>
<div id="crayon-5b8f69e191499678196096-6" class="crayon-line crayon-striped-line">
 &lt;span class=&quot;tall-box text-top&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e191499678196096-7" class="crayon-line">
 &lt;span class=&quot;short-box&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e191499678196096-8" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f69e191499678196096-9" class="crayon-line">
 &lt;style type=&quot;text/css&quot;&gt;
</div>
<div id="crayon-5b8f69e191499678196096-10" class="crayon-line crayon-striped-line">
   .tall-box,
</div>
<div id="crayon-5b8f69e191499678196096-11" class="crayon-line">
   .short-box   { display: inline-block;
</div>
<div id="crayon-5b8f69e191499678196096-12" class="crayon-line crayon-striped-line">
                 /* size, color, etc. */ }
</div>
<div id="crayon-5b8f69e191499678196096-13" class="crayon-line">
 
</div>
<div id="crayon-5b8f69e191499678196096-14" class="crayon-line crayon-striped-line">
   .text-bottom { vertical-align: text-bottom; }
</div>
<div id="crayon-5b8f69e191499678196096-15" class="crayon-line">
   .text-top    { vertical-align: text-top; }
</div>
<div id="crayon-5b8f69e191499678196096-16" class="crayon-line crayon-striped-line">
 &lt;/style&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

在通过`vertical-align`的其他值对齐一个较高的元素时,也会出现同样的现象。
  • 即使设置vertical-alignbottom(左)和top(右),也会导致基线移动。这就很奇怪了,因为此时根本不关基线什么事。

    图片 2

&lt;!-- left mark-up --&gt; &lt;span class="tall-box
bottom"&gt;&lt;/span&gt; &lt;span class="short-box"&gt;&lt;/span&gt;
&lt;!-- right mark-up --&gt; &lt;span class="tall-box
top"&gt;&lt;/span&gt; &lt;span class="short-box"&gt;&lt;/span&gt;
&lt;style type="text/css"&gt; .tall-box, .short-box { display:
inline-block; /\* size, color, etc. \*/ } .bottom { vertical-align:
bottom; } .top { vertical-align: top; } &lt;/style&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69e19149d154218738-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e19149d154218738-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69e19149d154218738-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e19149d154218738-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69e19149d154218738-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e19149d154218738-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f69e19149d154218738-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e19149d154218738-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f69e19149d154218738-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e19149d154218738-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f69e19149d154218738-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e19149d154218738-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f69e19149d154218738-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e19149d154218738-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f69e19149d154218738-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e19149d154218738-16">
16
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69e19149d154218738-1" class="crayon-line">
&lt;!-- left mark-up --&gt;
</div>
<div id="crayon-5b8f69e19149d154218738-2" class="crayon-line crayon-striped-line">
&lt;span class=&quot;tall-box bottom&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e19149d154218738-3" class="crayon-line">
&lt;span class=&quot;short-box&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e19149d154218738-4" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f69e19149d154218738-5" class="crayon-line">
&lt;!-- right mark-up --&gt;
</div>
<div id="crayon-5b8f69e19149d154218738-6" class="crayon-line crayon-striped-line">
&lt;span class=&quot;tall-box top&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e19149d154218738-7" class="crayon-line">
&lt;span class=&quot;short-box&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e19149d154218738-8" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f69e19149d154218738-9" class="crayon-line">
&lt;style type=&quot;text/css&quot;&gt;
</div>
<div id="crayon-5b8f69e19149d154218738-10" class="crayon-line crayon-striped-line">
  .tall-box,
</div>
<div id="crayon-5b8f69e19149d154218738-11" class="crayon-line">
  .short-box { display: inline-block;
</div>
<div id="crayon-5b8f69e19149d154218738-12" class="crayon-line crayon-striped-line">
              /* size, color, etc. */ }
</div>
<div id="crayon-5b8f69e19149d154218738-13" class="crayon-line">
 
</div>
<div id="crayon-5b8f69e19149d154218738-14" class="crayon-line crayon-striped-line">
  .bottom    { vertical-align: bottom; }
</div>
<div id="crayon-5b8f69e19149d154218738-15" class="crayon-line">
  .top       { vertical-align: top; }
</div>
<div id="crayon-5b8f69e19149d154218738-16" class="crayon-line crayon-striped-line">
&lt;/style&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • 把两个较大的元素放在一行并垂直对齐它们,基线也会移动以匹配两种对齐。然后,行的高度会调整(左)。再增加一个元素,但该元素对齐方式决定了它不会超出行盒子的边界,所以行盒子不会调整(中)。如果新增的元素会超出行盒子的边界,那么行盒子的高度和基线就会再次调整。在这例子中,前两个盒子向下移动了(右)。

    图片 3

&lt;!-- left mark-up --&gt; &lt;span class="tall-box
text-bottom"&gt;&lt;/span&gt; &lt;span class="tall-box
text-top"&gt;&lt;/span&gt; &lt;!-- middle mark-up --&gt; &lt;span
class="tall-box text-bottom"&gt;&lt;/span&gt; &lt;span
class="tall-box text-top"&gt;&lt;/span&gt; &lt;span class="tall-box
middle"&gt;&lt;/span&gt; &lt;!-- right mark-up --&gt; &lt;span
class="tall-box text-bottom"&gt;&lt;/span&gt; &lt;span
class="tall-box text-top"&gt;&lt;/span&gt; &lt;span class="tall-box
text-100up"&gt;&lt;/span&gt; &lt;style type="text/css"&gt; .tall-box
{ display: inline-block; /\* size, color, etc. \*/ } .middle {
vertical-align: middle; } .text-top { vertical-align: text-top; }
.text-bottom { vertical-align: text-bottom; } .text-100up {
vertical-align: 100%; } &lt;/style&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f69e1914a1214295132-1">
1
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e1914a1214295132-2">
2
</div>
<div class="crayon-num" data-line="crayon-5b8f69e1914a1214295132-3">
3
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e1914a1214295132-4">
4
</div>
<div class="crayon-num" data-line="crayon-5b8f69e1914a1214295132-5">
5
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e1914a1214295132-6">
6
</div>
<div class="crayon-num" data-line="crayon-5b8f69e1914a1214295132-7">
7
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e1914a1214295132-8">
8
</div>
<div class="crayon-num" data-line="crayon-5b8f69e1914a1214295132-9">
9
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e1914a1214295132-10">
10
</div>
<div class="crayon-num" data-line="crayon-5b8f69e1914a1214295132-11">
11
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e1914a1214295132-12">
12
</div>
<div class="crayon-num" data-line="crayon-5b8f69e1914a1214295132-13">
13
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e1914a1214295132-14">
14
</div>
<div class="crayon-num" data-line="crayon-5b8f69e1914a1214295132-15">
15
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e1914a1214295132-16">
16
</div>
<div class="crayon-num" data-line="crayon-5b8f69e1914a1214295132-17">
17
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e1914a1214295132-18">
18
</div>
<div class="crayon-num" data-line="crayon-5b8f69e1914a1214295132-19">
19
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e1914a1214295132-20">
20
</div>
<div class="crayon-num" data-line="crayon-5b8f69e1914a1214295132-21">
21
</div>
<div class="crayon-num crayon-striped-num" data-line="crayon-5b8f69e1914a1214295132-22">
22
</div>
<div class="crayon-num" data-line="crayon-5b8f69e1914a1214295132-23">
23
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f69e1914a1214295132-1" class="crayon-line">
&lt;!-- left mark-up --&gt;
</div>
<div id="crayon-5b8f69e1914a1214295132-2" class="crayon-line crayon-striped-line">
&lt;span class=&quot;tall-box text-bottom&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e1914a1214295132-3" class="crayon-line">
&lt;span class=&quot;tall-box text-top&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e1914a1214295132-4" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f69e1914a1214295132-5" class="crayon-line">
&lt;!-- middle mark-up --&gt;
</div>
<div id="crayon-5b8f69e1914a1214295132-6" class="crayon-line crayon-striped-line">
&lt;span class=&quot;tall-box text-bottom&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e1914a1214295132-7" class="crayon-line">
&lt;span class=&quot;tall-box text-top&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e1914a1214295132-8" class="crayon-line crayon-striped-line">
&lt;span class=&quot;tall-box middle&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e1914a1214295132-9" class="crayon-line">
 
</div>
<div id="crayon-5b8f69e1914a1214295132-10" class="crayon-line crayon-striped-line">
&lt;!-- right mark-up --&gt;
</div>
<div id="crayon-5b8f69e1914a1214295132-11" class="crayon-line">
&lt;span class=&quot;tall-box text-bottom&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e1914a1214295132-12" class="crayon-line crayon-striped-line">
&lt;span class=&quot;tall-box text-top&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e1914a1214295132-13" class="crayon-line">
&lt;span class=&quot;tall-box text-100up&quot;&gt;&lt;/span&gt;
</div>
<div id="crayon-5b8f69e1914a1214295132-14" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f69e1914a1214295132-15" class="crayon-line">
&lt;style type=&quot;text/css&quot;&gt;
</div>
<div id="crayon-5b8f69e1914a1214295132-16" class="crayon-line crayon-striped-line">
  .tall-box    { display: inline-block;
</div>
<div id="crayon-5b8f69e1914a1214295132-17" class="crayon-line">
                /* size, color, etc. */ }
</div>
<div id="crayon-5b8f69e1914a1214295132-18" class="crayon-line crayon-striped-line">
 
</div>
<div id="crayon-5b8f69e1914a1214295132-19" class="crayon-line">
  .middle      { vertical-align: middle; }
</div>
<div id="crayon-5b8f69e1914a1214295132-20" class="crayon-line crayon-striped-line">
  .text-top    { vertical-align: text-top; }
</div>
<div id="crayon-5b8f69e1914a1214295132-21" class="crayon-line">
  .text-bottom { vertical-align: text-bottom; }
</div>
<div id="crayon-5b8f69e1914a1214295132-22" class="crayon-line crayon-striped-line">
  .text-100up  { vertical-align: 100%; }
</div>
<div id="crayon-5b8f69e1914a1214295132-23" class="crayon-line">
&lt;/style&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

构造函数

worker():创建一个专用的Web
worker,在指定的URL上执行脚本。示例:var worker=new
Worker(‘js/setTime.js’);

 

居中图标

有一个问题一直困扰着我。有一个图标,我想让它与一行文本垂直居中。如果只应用vertical-align: middle好像不行,比如这个例子:

图片 4

<span class=”icon middle”></span> Centered? <span
class=”icon middle”></span> <span>Centered!</span>
<style type=”text/css”> .icon { display: inline-block; /* size,
color, etc. */ } .middle { vertical-align: middle; } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
<span class="icon middle"></span>
Centered?
 
 
<span class="icon middle"></span>
<span>Centered!</span>
 
<style type="text/css">
  .icon   { display: inline-block;
            /* size, color, etc. */ }
 
  .middle { vertical-align: middle; }
</style>

还是同一个例子,只不过这次多了一些辅助线:

图片 5

这次可以看清问题所在了。因为左侧的情况是文本没对齐,而是仍然位于基线之上。应用vertical-align: middle,实际上会导致图标中心与不出头小写字母的中心(x-height的一半)对齐,所以出头的字母会在上方突出出来。

右侧,仍然是对齐整个字体区的垂直中点。结果文本基线稍稍向下移动了一点,于是就实现了文本与图标完美对齐。

使用规则

  1. 必须同源:也就是说js文件的路径必须和主线程的脚本同源。防止了外部引用。
  2. dom限制:在worker线程中不能操作dom(document,window,parent)。注意可以使用浏览器的navigator和location对象。
  3. 通讯限制:worker线程和主线程不在一个上下文中所以不能直接通讯。也就是说主线程定义的变量在worker中也是不能使用的。所有只能通过消息完成。
  4. 提示禁止:worker线程不能alert和confirm,这个不知到具体原因?
  5. 传值dom:进行消息通讯也不能传值dom只能是变量。
  6. ie限制:ie9不能使用!ie9不能使用!ie9不能使用!

微信小程序支付
小程序端源码

行内元素

图片 6

这里有三行文本紧挨着。红线表示行高的顶边和底边,绿线表示字体高度,蓝线表示基线。左边这一行,行高与字体高度相同,因此上下方的红色和绿线重叠在了一起。中间一行,行高是font-size的两倍。右边一行,行高为font-size的一半。

行内元素的外边界与自己行高的上、下边对齐。行高比font-size小不小并不重要。因此上图中红线同时也就表示外边界。

行内元素的基线是字符恰好位于其上的那条线,也就是图中的蓝线。大致来说,基线总是穿过字体高度一半以下的某一点。可以参考W3C规范中详细的定义。

场景业务设计

那么我们现在设计这么一个业务操作,

  • 首先我们页面有一个定时器和一个业务操作按钮(用来模拟耗时的操作)。
  • 然后把定时器写到一个worker中进行倒计时操作。
  • 最后通过消息通讯把每次的倒计时时间发送给主线程让主线程修改显示时间。
  • 结束倒计时完毕结束定时器和线程

 有人可能会说为什么还要回到主线程修改时间显示值,请看一下上面的使用规则,我本来也是打算进行主线程传值dom给worker线程奈何不行只能在回传回来。

使用的是MVC .NET Framework4

行内元素下面可能会有一个小间隙

看看这个例子:对列表元素的li应用vertical-align

图片 7

<ul> <li class=”box”></li> <li
class=”box”></li> <li class=”box”></li> </ul>
<style type=”text/css”> .box { display: inline-block; /* size,
color, etc. */ } </style>

1
2
3
4
5
6
7
8
9
10
<ul>
  <li class="box"></li>
  <li class="box"></li>
  <li class="box"></li>
</ul>
 
<style type="text/css">
  .box { display: inline-block;
         /* size, color, etc. */ }
</style>

我们看到,列表项位于基线上。基线下面有一个小间隙,用于文本的下伸部分。怎么办?只要把基线向上移开一点就行了,比如用vertical-align: middle

图片 8

<ul> <li class=”box middle”></li> <li class=”box
middle”></li> <li class=”box middle”></li>
</ul> <style type=”text/css”> .box { display: inline-block;
/* size, color, etc. */ } .middle { vertical-align: middle; }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
<ul>
  <li class="box middle"></li>
  <li class="box middle"></li>
  <li class="box middle"></li>
</ul>
 
<style type="text/css">
  .box    { display: inline-block;
            /* size, color, etc. */ }
 
  .middle { vertical-align: middle; }
</style>

有文本内容的行内块不会出现这种情况,因为内容已经把基线向上移了。

代码展示

 Html代码:

<body>
        <div>
            10 :
            00
        </div>

        <button type="button" onclick="business()">耗时操作</button>
 </body>

主线程js代码:

            //页面加载完成后初始化
            window.onload = function() {
                //创建定时器线程
                var worker = new Worker('js/setTime.js');
                //获取dom对象
                var domMinute_p = document.getElementById('Minute_p');
                var domSecond_p = document.getElementById('Second_p');
                worker.postMessage(600);

                //这里可以接受worker线程的返回值
                worker.onmessage = function(event) {
                    var totalSecond = event.data;
                    console.log(totalSecond)
                    //计算分钟数
                    var minute_p = parseInt(totalSecond / 60);
                    domMinute_p.innerText = minute_p;
                    //计算秒数
                    var second_p = parseInt(totalSecond % 60);
                    domSecond_p.innerText = second_p;
                }
            }
            //这里是模拟的耗时操作
            function business() {
                var data = [1, 2, 3, 4, 5];
                for(var i = 1; i < 1000; i++) {
                    for(var j = 1; j < 1000; j++) {
                        for(var k = 1; k < 5000; k++) {
                            var b = k * 100;
                        }
                    }
                }
                console.log("业务终于走完了!")
            }

worker线程js代码:

var totalSecond = 600;
var domMinute_p, domSecond_p,

    //接受事件参数
    onmessage = function(e) {
        console.log(e.data)
        domMinute_p = e.data;
    }
var timeId = setInterval(function() {
    totalSecond--;

    if(totalSecond == 0) {
        self.close();
    }
    console.log(totalSecond)
    postMessage(totalSecond)

}, 1000)

好了大致示例就是这么多。下面是截图效果:

图片 9

 开始运行后编号1会开始倒计时,但是当你点击了编号2进行了模拟耗时后,编号1还是会卡住,只有完成编号2后才会运行,但是不同与上面说到的单线程是,他再次运行时的时间是正确时间,还是刚才的例子如果是9:57,点击编号2模拟耗时了3秒,耗时完成后编号1会显示9:54而不是单线程的9:57。就说明worker现在在耗时操作的时候是持续运行的,时间卡只不过是主线程的dom操作被卡住了而已(可以把耗时业务也开启worker就不卡住了)。这里只是介绍worker的使用,所有就不纠结这个界面显示的问题。

 

 

  1 using System;
  2 using System.Collections.Generic;
  3 using System.Linq;
  4 using System.Text;
  5 using System.Web;
  6 using System.Web.Mvc;
  7 using System.IO;
  8 using System.Security.Cryptography;
  9 using System.Text;
 10 using System.Xml;
 11 using Newtonsoft.Json;
 12 using Newtonsoft.Json.Linq;
 13 namespace Mvc_vue.Controllers
 14 {
 15     public class wxController : Controller
 16     {
 17         //
 18         // GET: /wx/
 19 
 20         public ActionResult Index()
 21         {
 22             return View();
 23         }
 24         //所需值
 25         public static string _appid = "wxd930ea5d5a258f4f";
 26         public static string _mch_id = "10000100";
 27         public static string _key = "192006250b4c09247ec02edce69f6a2d";
 28 
 29         //模拟wx统一下单 openid(前台获取)
 30         public string getda(string openid)
 31         {
 32             return Getprepay_id(_appid, "shanghaifendian", "monixiaofei", _mch_id, GetRandomString(30), "http://www.weixin.qq.com/wxpay/pay.php", openid, getRandomTime(), 1);
 33 
 34         }
 35 
 36         
 37 
 38         //微信统一下单获取prepay_id & 再次签名返回数据
 39         private static string Getprepay_id(string appid, string attach, string body, string mch_id, string nonce_str, string notify_url, string openid, string bookingNo, int total_fee)
 40         {
 41             var url = "https://api.mch.weixin.qq.com/pay/unifiedorder";//微信统一下单请求地址
 42             string strA = "appid=" + appid + "&attach=" + attach + "&body=" + body + "&mch_id=" + mch_id + "&nonce_str=" + nonce_str + "&notify_url=" + notify_url + "&openid=" + openid + "&out_trade_no=" + bookingNo + "&spbill_create_ip=61.50.221.43&total_fee=" + total_fee + "&trade_type=JSAPI";
 43             string strk = strA + "&key="+_key;  //key为商户平台设置的密钥key(假)
 44             string strMD5 = MD5(strk).ToUpper();//MD5签名
 45 
 46             //string strHash=HmacSHA256("sha256",strmd5).ToUpper();   //签名方式只需一种(MD5 或 HmacSHA256     【支付文档需仔细看】)
 47 
 48             //签名
 49             var formData = "<xml>";
 50             formData += "<appid>" + appid + "</appid>";//appid  
 51             formData += "<attach>" + attach + "</attach>"; //附加数据(描述)
 52             formData += "<body>" + body + "</body>";//商品描述
 53             formData += "<mch_id>" + mch_id + "</mch_id>";//商户号  
 54             formData += "<nonce_str>" + nonce_str + "</nonce_str>";//随机字符串,不长于32位。  
 55             formData += "<notify_url>" + notify_url + "</notify_url>";//通知地址
 56             formData += "<openid>" + openid + "</openid>";//openid
 57             formData += "<out_trade_no>" + bookingNo + "</out_trade_no>";//商户订单号    --待
 58             formData += "<spbill_create_ip>61.50.221.43</spbill_create_ip>";//终端IP  --用户ip
 59             formData += "<total_fee>" + total_fee + "</total_fee>";//支付金额单位为(分)
 60             formData += "<trade_type>JSAPI</trade_type>";//交易类型(JSAPI--公众号支付)
 61             formData += "<sign>" + strMD5 + "</sign>"; //签名
 62             formData += "</xml>";
 63 
 64 
 65 
 66             //请求数据
 67             var getdata = sendPost(url, formData);
 68 
 69             //获取xml数据
 70             XmlDocument doc = new XmlDocument();
 71             doc.LoadXml(getdata);
 72             //xml格式转json
 73             string json = Newtonsoft.Json.JsonConvert.SerializeXmlNode(doc);
 74 
 75 
 76 
 77             JObject jo = (JObject)JsonConvert.DeserializeObject(json);
 78             string prepay_id = jo["xml"]["prepay_id"]["#cdata-section"].ToString();
 79 
 80             //时间戳
 81             string _time = getTime().ToString();
 82 
 83             //再次签名返回数据至小程序
 84             string strB = "appId=" + appid + "&nonceStr=" + nonce_str + "&package=prepay_id=" + prepay_id + "&signType=MD5&timeStamp=" + _time + "&key="_key;
 85 
 86             //wx自己写的一个类
 87             wx w = new wx();
 88             w.timeStamp = _time;
 89             w.nonceStr = nonce_str;
 90             w.package = "prepay_id=" + prepay_id;
 91             w.paySign = MD5(strB).ToUpper(); ;
 92             w.signType = "MD5";
 93 
 94             //向小程序返回json数据
 95              return JsonConvert.SerializeObject(w);
 96         }
 97 
 98         /// <summary>
 99         /// 生成随机串    
100         /// </summary>
101         /// <param name="length">字符串长度</param>
102         /// <returns></returns>
103         private static string GetRandomString(int length)
104         {
105             const string key = "ABCDEFGHJKLMNPQRSTUVWXYZ23456789";
106             if (length < 1)
107                 return string.Empty;
108 
109             Random rnd = new Random();
110             byte[] buffer = new byte[8];
111 
112             ulong bit = 31;
113             ulong result = 0;
114             int index = 0;
115             StringBuilder sb = new StringBuilder((length / 5 + 1) * 5);
116 
117             while (sb.Length < length)
118             {
119                 rnd.NextBytes(buffer);
120 
121                 buffer[5] = buffer[6] = buffer[7] = 0x00;
122                 result = BitConverter.ToUInt64(buffer, 0);
123 
124                 while (result > 0 && sb.Length < length)
125                 {
126                     index = (int)(bit & result);
127                     sb.Append(key[index]);
128                     result = result >> 5;
129                 }
130             }
131             return sb.ToString();
132         }
133 
134         /// <summary>
135         /// 获取时间戳
136         /// </summary>
137         /// <returns></returns>
138         private static long getTime()
139         {
140             TimeSpan cha = (DateTime.Now - TimeZone.CurrentTimeZone.ToLocalTime(new System.DateTime(1970, 1, 1)));
141             long t = (long)cha.TotalSeconds;
142             return t;
143         }
144 
145 
146         /// <summary>
147         /// MD5签名方法  
148         /// </summary>  
149         /// <param name="inputText">加密参数</param>  
150         /// <returns></returns>  
151         private static string MD5(string inputText)
152         {
153             MD5 md5 = new MD5CryptoServiceProvider();
154             byte[] fromData = System.Text.Encoding.UTF8.GetBytes(inputText);
155             byte[] targetData = md5.ComputeHash(fromData);
156             string byte2String = null;
157 
158             for (int i = 0; i < targetData.Length; i++)
159             {
160                 byte2String += targetData[i].ToString("x2");
161             }
162 
163             return byte2String;
164         }
165         /// <summary>
166         /// HMAC-SHA256签名方式
167         /// </summary>
168         /// <param name="message"></param>
169         /// <param name="secret"></param>
170         /// <returns></returns>
171         private static string HmacSHA256(string message, string secret)
172         {
173             secret = secret ?? "";
174             var encoding = new System.Text.UTF8Encoding();
175             byte[] keyByte = encoding.GetBytes(secret);
176             byte[] messageBytes = encoding.GetBytes(message);
177             using (var hmacsha256 = new HMACSHA256(keyByte))
178             {
179                 byte[] hashmessage = hmacsha256.ComputeHash(messageBytes);
180                 return Convert.ToBase64String(hashmessage);
181             }
182         }
183 
184         /// <summary>
185         /// wx统一下单请求数据
186         /// </summary>
187         /// <param name="URL">请求地址</param>
188         /// <param name="urlArgs">参数</param>
189         /// <returns></returns>
190         private static string sendPost(string URL, string urlArgs)
191         {
192             
193             System.Net.WebClient wCient = new System.Net.WebClient();
194             wCient.Headers.Add("Content-Type", "application/x-www-form-urlencoded");
195             //byte[] postData = System.Text.Encoding.ASCII.GetBytes(urlArgs);  如果微信签名中有中文会签名失败
196         byte[] postData = System.Text.Encoding.UTF8.GetBytes(urlArgs);     
197             byte[] responseData = wCient.UploadData(URL, "POST", postData);
198         
199             string returnStr = System.Text.Encoding.UTF8.GetString(responseData);//返回接受的数据 
200             return returnStr;
201          }
202 
203         /// <summary>
204         /// 生成订单号
205         /// </summary>
206         /// <returns></returns>
207         private static string getRandomTime()
208         {
209             Random rd = new Random();//用于生成随机数
210             string DateStr = DateTime.Now.ToString("yyyyMMddHHmmssMM");//日期
211             string str = DateStr + rd.Next(10000).ToString().PadLeft(4, '0');//带日期的随机数
212             return str;
213         }
214 
215     }
216 }

为何Vertical-Align的行为如此乖张

下面我们看看在某些情况下的垂直对齐。特别是一些容易出错的情况。

worker文档

Web Workers
API的Worker界面代表了一个可以轻松创建的后台任务,可以将消息发送回其创建者。创建worker就像调用 构造函数并指定要在工作线程中运行的脚本一样简单。

对哪些元素可以使用Vertical-Align

vertical-align用于对齐行内元素。所谓行内元素,即display属性值为下列之一的元素:

  • inline
  • inline-block
  • inline-table (本文未涉及)

其中,行内元素(inline element)就是包含文本的标签。

行内块元素(inline-block
element)
,顾名思义,就是位于行内的块元素。可以有宽度和高度(可以由其内容决定),也可以有内边距、边框和外边距。

行内级元素会相互挨着排成行。如果一行排不下,就会在下方再建一行。所有行都会创建所谓的行盒子,行盒子装着自己行中的所有内容。内容的高度不同,行盒子的高度也不同。在下面的示意图中,行盒子的顶部和底部用红色点线表示。

图片 10

这些行盒子限定了我们可以影响的范围。在行盒子内部,可以通过vertical-align来对齐个别元素。那么,相对于什么来对齐元素呢?

     
因为下个项目中要用到一些倒计时的功能,所以就提前准备了一下,省的到时候出现一下界面不友好和一些其他的事情。正好趁着这个机会也加深一下html5中的多线程worker的用法和理解。

发表评论

电子邮件地址不会被公开。 必填项已用*标注