js图片自动轮播代码分享,js的局地笔试面试题

前者参考指南

2015/05/09 · CSS,
HTML5,
JavaScript ·
前端

本文由 伯乐在线 –
cucr
翻译,周进林
校稿。未经许可,禁止转发!
英文出处:github.com。欢迎到场翻译组。

1.
断定字符串是还是不是是那样组合的,第四个必须是字母,后面可以是字母、数字、下划线,总长度为5-20

1.
判定字符串是还是不是是那样组合的,首个必须是字母,前边可以是字母、数字、下划线,总长度为5-20

1、利用图片width呈现地点来播音图片,技术:.offsetWidth 、aBtn[i].index
= i 、setInterval() 、oUl[0].style.left =  、onclick()
2、利用数组放入图片经行轮播,技术:setInterval()。没有onclick()

HTML

  1. var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
  2. reg.test(“a1a__a1a__a1a__a1a__”);
  1. var reg = /^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
  2. reg.test(“a1a__a1a__a1a__a1a__”);

图形轮播12js.html

语义

HTML5为大家提供了汪洋的语义成分,旨在精准地叙述内容。确保您受益于其增加的词汇。

XHTML

<!– bad –> <div id=”main”> <div class=”article”>
<div class=”header”> <h1>Blog post</h1>
<p>Published: <span>21st Feb, 2015</span></p>
</div> <p>…</p> </div> </div> <!– good
–> <main> <article> <header> <h1>Blog
post</h1> <p>Published: <time
datetime=”2015-02-21″>21st Feb, 2015</time></p>
</header> <p>…</p> </article> </main>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!– bad –>
<div id="main">
  <div class="article">
    <div class="header">
      <h1>Blog post</h1>
      <p>Published: <span>21st Feb, 2015</span></p>
    </div>
    <p>…</p>
  </div>
</div>
 
<!– good –>
<main>
  <article>
    <header>
      <h1>Blog post</h1>
      <p>Published: <time datetime="2015-02-21">21st Feb, 2015</time></p>
    </header>
    <p>…</p>
  </article>
</main>

确保您了解您正在利用的语义成分。以错误的点子选择语义成分比不利用更不佳。

XHTML

<!– bad –> <h1> <figure> <img alt=Company
src=logo.png> </figure> </h1> <!– good –>
<h1> <img alt=Company src=logo.png> </h1>

1
2
3
4
5
6
7
8
9
10
11
<!– bad –>
<h1>
  <figure>
    <img alt=Company src=logo.png>
  </figure>
</h1>
 
<!– good –>
<h1>
  <img alt=Company src=logo.png>
</h1>

2.
截取字符串abcdefg的efg

2.
截取字符串abcdefg的efg

复制代码 代码如下:

简洁

维持代码简洁。忘记旧的XHTML习惯。

XHTML

<!– bad –> <!doctype html> <html lang=en>
<head> <meta http-equiv=Content-Type content=”text/html;
charset=utf-8″ /> <title>Contact</title> <link
rel=stylesheet href=style.css type=text/css /> </head>
<body> <h1>Contact me</h1> <label> Email
address: <input type=email placeholder=you@email.com
required=required /> </label> <script src=main.js
type=text/javascript></script> </body> </html>
<!– good –> <!doctype html> <html lang=en> <meta
charset=utf-8> <title>Contact</title> <link
rel=stylesheet href=style.css> <h1>Contact me</h1>
<label> Email address: <input type=email
placeholder=you@email.com required> </label> <script
src=main.js></script> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!– bad –>
<!doctype html>
<html lang=en>
  <head>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8" />
    <title>Contact</title>
    <link rel=stylesheet href=style.css type=text/css />
  </head>
  <body>
    <h1>Contact me</h1>
    <label>
      Email address:
      <input type=email placeholder=you@email.com required=required />
    </label>
    <script src=main.js type=text/javascript></script>
  </body>
</html>
 
<!– good –>
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Contact</title>
  <link rel=stylesheet href=style.css>
 
  <h1>Contact me</h1>
  <label>
    Email address:
    <input type=email placeholder=you@email.com required>
  </label>
  <script src=main.js></script>
</html>
  1. var str = “abcdefg”;
  2. if (/efg/.test(str)) {
  3.      var efg = str.substr(str.indexOf(“efg”), 3);
  4.      alert(efg);
  5. }
  1. var str = “abcdefg”;
  2. if (/efg/.test(str)) {
  3.      var efg = str.substr(str.indexOf(“efg”), 3);
  4.      alert(efg);
  5. }

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
   “;
<html xmlns=”” lang=”en”
xml:lang=”en”>
 <head>
  <meta http-equiv=”Content-Type” content=”text/html;
charset=ISO-8859-1″ />
  <title>images slide</title>
 <style type=”text/css”>
  * {
   margin: 0px;
   padding: 0px;
  }
  li {
   list-style: none;
  }
  img {
   border: 0;
  }
  a {
   text-decoration: none;
  }
  #slide {
   width: 800px;
   height: 400px;
   box-shadow: 0px 0px 5px #c1c1c1;
   margin: 20px auto;
   position: relative;
   overflow: hidden;
  }
  #slide ul {
   position: absolute;
   left: 0px;
   top: 0px;
   height: 400px;
   width: 11930px;
  }
  #slide ul li {
   width: 800px;
   height: 400px;
   overflow: hidden;
   float: left;
  }
  #slide .ico {
   width: 800px;
   height: 20px;
   overflow: hidden;
   text-align: center;
   position: absolute;
   left: 0px;
   bottom: 10px;
   z-index: 1;
  }
  #slide .ico a {
   display: inline-block;
   width: 10px;
   height:10px;
   background: url(out.png) no-repeat 0px 0px;
   margin: 0px 5px;
  }
  #slide .ico .active {
   background: url(out1.png) no-repeat 0px 0px;
  }
  #btnLeft {
   width: 60px;
   height: 400px;
   left: 0px;
   top: 0px;
   background: url() no-repeat 0px 0px;
   position: absolute;
   z-index: 2;
  }
  #btnLeft :hover {
   background: url() no-repeat 0px 0px;
  }
  #btnRight {
   width: 60px;
   height: 400px;
   right: 0px;
   top: 0px;
   background: url() no-repeat 0px 0px;
   position: absolute;
   z-index: 2;
  }
  #btnRight :hover {
   background: url() no-repeat 0px 0px;
  }  

可访问性

可访问性不应有是一个过后的想法。你不要成为一位WCAG专家来提高你的网站,你可以立时开头修复这几个不是难题,它将生出巨大的校正,如:

  • 学会科学利用alt属性
  • 确保您的链接和按钮等都很好地标记(没有<div class
    =button>那种暴行)
  • 决不完全依靠颜色来传达音信
  • 显式地给表单控件加标签

XHTML

<!– bad –> <h1><img alt=”Logo”
src=”logo.png”></h1> <!– good –> <h1><img
alt=”My Company, Inc.” src=”logo.png”></h1>

1
2
3
4
5
<!– bad –>
<h1><img alt="Logo" src="logo.png"></h1>
 
<!– good –>
<h1><img alt="My Company, Inc." src="logo.png"></h1>

3.
判定一个字符串中出现次数最多的字符,总括那么些次数

3.
断定一个字符串中冒出次数最多的字符,计算这一个次数

 </style>

语言

虽说定义语言和字符编码是可选的,但推荐在文档级别表明它们,尽管它们已经在HTTP请求底部已经指定。字符编码优先使用utf
– 8。

XHTML

<!– bad –> <!doctype html> <title>Hello,
world.</title> <!– good –> <!doctype html> <html
lang=en> <meta charset=utf-8> <title>Hello,
world.</title> </html>

1
2
3
4
5
6
7
8
9
10
<!– bad –>
<!doctype html>
<title>Hello, world.</title>
 
<!– good –>
<!doctype html>
<html lang=en>
  <meta charset=utf-8>
  <title>Hello, world.</title>
</html>
  1. //将字符串的字符保存在一个hash
    table中,key是字符,value是其一字符出现的次数
  2. var str = “abcdefgaddda”;
  3. var obj = {};
  4. for (var i = 0, l = str.length; i < l; i++) {
  5.         var key = str[i];
  6.               if (!obj[key]) {
  7.                  obj[key] = 1;
  8.             } else {
  9.                  obj[key]++;
  10.               }
  11. }
  12.  
  13. /*遍历这一个hash table,获取value最大的key和value*/
  14. var max = -1;
  15. var max_key = “”;
  16. var key;
  17. for (key in obj) {
  18.          if (max < obj[key]) {
  19.                    max = obj[key];
  20.                    max_key = key;
  21.        }
  22. }
  23.  
  24. alert(“max:”+max+” max_key:”+max_key);
  1. //将字符串的字符保存在一个hash
    table中,key是字符,value是那个字符出现的次数
  2. var str = “abcdefgaddda”;
  3. var obj = {};
  4. for (var i = 0, l = str.length; i < l; i++) {
  5.         var key = str[i];
  6.               if (!obj[key]) {
  7.                  obj[key] = 1;
  8.             } else {
  9.                  obj[key]++;
  10.               }
  11. }
  12.  
  13. /*遍历那几个hash table,获取value最大的key和value*/
  14. var max = -1;
  15. var max_key = “”;
  16. var key;
  17. for (key in obj) {
  18.          if (max < obj[key]) {
  19.                    max = obj[key];
  20.                    max_key = key;
  21.        }
  22. }
  23.  
  24. alert(“max:”+max+” max_key:”+max_key);

 <script type=”text/javascript”>
  window.onload = function() {
   var oIco = document.getElementById(“ico”);
   var aBtn = oIco.getElementsByTagName(“a”);
   var oSlide = document.getElementById(“slide”);
   var oUl = oSlide.getElementsByTagName(“ul”);
   var aLi = oUl[0].getElementsByTagName(“li”);
   var oBtnLeft = document.getElementById(“btnLeft”);
   var oBtnRight = document.getElementById(“btnRight”);

性能

唯有有一个靠边的理由在内容前边加载脚本,否则请不要把它放在前方阻止页面的渲染。假设你的样式表很大,分离出开始化时必须的体制,并在一个独门样式表中延迟加载其它一些。一次HTTP请求显明低于一次,但感知速度是最要紧的要素。

XHTML

<!– bad –> <!doctype html> <meta charset=utf-8>
<script src=analytics.js></script> <title>Hello,
world.</title> <p>…</p> <!– good –>
<!doctype html> <meta charset=utf-8> <title>Hello,
world.</title> <p>…</p> <script
src=analytics.js></script>

1
2
3
4
5
6
7
8
9
10
11
12
13
<!– bad –>
<!doctype html>
<meta charset=utf-8>
<script src=analytics.js></script>
<title>Hello, world.</title>
<p>…</p>
 
<!– good –>
<!doctype html>
<meta charset=utf-8>
<title>Hello, world.</title>
<p>…</p>
<script src=analytics.js></script>

4.
IE与FF脚本包容性难点

4.
IE与FF脚本包容性难点

   var baseWidth = aLi[0].offsetWidth;
   //alert(baseWidth);
   oUl[0].style.width = baseWidth * aLi.length + “px”;
   var iNow = 0;
   for(var i=0;i<aBtn.length;i++) { 
    aBtn[i].index = i;
    aBtn[i].onclick = function() {
     //alert(this.index);
     //alert(oUl[0].style.left);
     move(this.index);
     //aIco[this.index].className = “active”;
    }
   }
   oBtnLeft.onclick = function() {
    iNow ++;
    //document.title = iNow;
    move(iNow);
   }
   oBtnRight.onclick = function() {
    iNow –;
    document.title = iNow;
    move(iNow);
   }

CSS

(1)
window.event:
代表方今的轩然大波目的,IE有那一个目标,FF没有,FF通过给事件处理函数传递事件目的

(1)
window.event:
表示如今的风浪目标,IE有那一个目的,FF没有,FF通过给事件处理函数传送事件目的

   var curIndex = 0;
   var timeInterval = 1000;
   setInterval(change,timeInterval);
   function change() {
    if(curIndex == aBtn.length) {
     curIndex =0;   
    } else {
     move(curIndex);
     curIndex += 1;
    }

分号

技巧上来讲,分号在CSS里担任一个分隔符,但请把它当作一个扫尾符。

CSS

/* bad */ div { color: red } /* good */ div { color: red; }

1
2
3
4
5
6
7
8
9
/* bad */
div {
  color: red
}
 
/* good */
div {
  color: red;
}

(2)
获取事件源
IE用srcElement获取事件源,而FF用target取得事件源

(2)
获取事件源
IE用srcElement获取事件源,而FF用target获取事件源

   }

盒模型

盒模型对所有文档应该是平等的。即使全局样式 * { box-sizing:border-box;}
很好,但绝不在一定成分改变暗中认同的盒模型(要是您能够防止那样做)。

CSS

/* bad */ div { width: 100%; padding: 10px; box-sizing: border-box; }
/* good */ div { padding: 10px; }

1
2
3
4
5
6
7
8
9
10
11
/* bad */
div {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
 
/* good */
div {
  padding: 10px;
}

(3)
添加,去除事件
js图片自动轮播代码分享,js的局地笔试面试题。IE:element.attachEvent(“onclick”,
function) element.detachEvent(“onclick”, function)
FF:element.addEventListener(“click”,
function, true) element.removeEventListener(“click”, function, true)

(3)
添加,去除事件
IE:element.attachEvent(“onclick”,
function) element.detachEvent(“onclick”, function)
FF:element.addEventListener(“click”,
function, true) element.removeEventListener(“click”, function, true)

   function move(index) {
    //document.title = index;
    if(index>aLi.length-1) {
     index = 0;
     iNow = index;
    }
    if(index<0) {
     index = aLi.length – 1;
     iNow = index;
    }
    for(var n=0;n<aBtn.length;n++) {
     aBtn[n].className = “”; 
    }
    aBtn[index].className = “active”;
    oUl[0].style.left = -index * baseWidth + “px”;
    //buffer(oUl[0],{
    // left: -index * baseWidth
    // },8)

无须转移成分的默认行为(若是你能够避免那样做)。尽量保险成分在平常的文档流中。例如,删除图像下边的空域,不应有改成其暗中同意呈现:

CSS

/* bad */ img { display: block; } /* good */ img { vertical-align:
middle; }

1
2
3
4
5
6
7
8
9
/* bad */
img {
  display: block;
}
 
/* good */
img {
  vertical-align: middle;
}

同样的,不要让一个因素脱离文档流(借使您可以幸免那样做)。

CSS

/* bad */ div { width: 100px; position: absolute; right: 0; } /* good
*/ div { width: 100px; margin-left: auto; }

1
2
3
4
5
6
7
8
9
10
11
12
/* bad */
div {
  width: 100px;
  position: absolute;
  right: 0;
}
 
/* good */
div {
  width: 100px;
  margin-left: auto;
}

(4)
获取标签的自定义属性
IE:div1.value或div1[“value”]
FF:可用div1.getAttribute(“value”)

(4)
获取标签的自定义属性
IE:div1.value或div1[“value”]
FF:可用div1.getAttribute(“value”)

   }
  }
  </script>
  </head>
<body>
 <div id=”slide”>
  <a id=”btnLeft” href=”javascript:void(0);” ></a>
  <a id=”btnRight” href=”javascript:void(0);” ></a>
  <!–when change next image:style=”left: -(n-1)*800px;”–>
  <ul>
   <li><img src=”1.jpg” alt=”” /></li>
   <li><img src=”2.jpg” alt=”” /></li>
   <li><img src=”3.jpg” alt=”” /></li>
   <li><img src=”4.jpg” alt=”” /></li>
   <li><img src=”5.jpg” alt=”” /></li>
   <li><img src=”6.jpg” alt=”” /></li>
  </ul>
  <div id=”ico” class=”ico”> 
   <a class=”active” href=”javascript:void(0);”></a>
   <a href=”javascript:void(0);”></a>
   <a href=”javascript:void(0);”></a>
   <a href=”javascript:void(0);”></a>
   <a href=”javascript:void(0);”></a>
   <a href=”javascript:void(0);”></a>
  </div>
 </div>
</body>
</html>

位置

有广大艺术可以在CSS中定位成分,但尝试限制自身行使下边的性质/值。优先顺序如下:

XHTML

display: block; display: flex; position: relative; position: sticky;
position: absolute; position: fixed;

1
2
3
4
5
6
display: block;
display: flex;
position: relative;
position: sticky;
position: absolute;
position: fixed;

(5)
document.getElementByName()和document.all[name]
IE;document.getElementByName()和document.all[name]均不能够博取div成分
FF:可以

(5)
document.getElementByName()和document.all[name]
IE;document.getElementByName()和document.all[name]均不可以取得div成分
FF:可以

图表自动播放.html

选择器

调减紧耦合的DOM选用器。当您的拔取器超越3个结构伪类、后代或兄弟的组合,考虑添加一个class到您要求极度的成分上。

CSS

/* bad */ div:first-of-type :last-child > p ~ * /* good */
div:first-of-type .info

1
2
3
4
5
/* bad */
div:first-of-type :last-child > p ~ *
 
/* good */
div:first-of-type .info

幸免在不须求的时候重载你的选拔器。

CSS

/* bad */ img[src$=svg], ul > li:first-child { opacity: 0; } /*
good */ [src$=svg], ul > :first-child { opacity: 0; }

1
2
3
4
5
6
7
8
9
/* bad */
img[src$=svg], ul > li:first-child {
  opacity: 0;
}
 
/* good */
[src$=svg], ul > :first-child {
  opacity: 0;
}

(6)
input.type的属性
IE:input.type只读
FF:input.type可读写

(6)
input.type的属性
IE:input.type只读
FF:input.type可读写

复制代码 代码如下:

特性

不用让选取器难以掩盖。裁减使用 id 和幸免 !important。

CSS

/* bad */ .bar { color: green !important; } .foo { color: red; } /*
good */ .foo.bar { color: green; } .foo { color: red; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* bad */
.bar {
  color: green !important;
}
.foo {
  color: red;
}
 
/* good */
.foo.bar {
  color: green;
}
.foo {
  color: red;
}

(7)
innerText textContent outerHTML
IE:支持innerText,
outerHTML
FF:支持textContent

(7)
innerText textContent outerHTML
IE:支持innerText,
outerHTML
FF:支持textContent

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
“;
<html xmlns=”;
 <head>
  <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
  <title>images</title>
 <script type=”text/javascript”>
  var curIndex = 0;
  var timeInterval = 1000;
  var arr = new Array();
  arr[0] = “1.jpg”;
  arr[1] = “2.jpg”;
  arr[2] = “3.jpg”;
  arr[3] = “4.jpg”;
  arr[4] = “5.jpg”;
  arr[5] = “6.jpg”;
  arr[6] = “7.jpg”;
  setInterval(changeImg,timeInterval);
  function changeImg() {
   var obj = document.getElementById(“obj”);
   if (curIndex == arr.length-1) {
    curIndex = 0;
   } else {
    curIndex += 1;
     }
   obj.src = arr[curIndex];
  }
 </script>

覆盖

蒙面样式让选拔器和调节变得科学使用。尽只怕防止它。

CSS

/* bad */ li { visibility: hidden; } li:first-child { visibility:
visible; } /* good */ li + li { visibility: hidden; }

1
2
3
4
5
6
7
8
9
10
11
12
/* bad */
li {
  visibility: hidden;
}
li:first-child {
  visibility: visible;
}
 
/* good */
li + li {
  visibility: hidden;
}

(8)
是还是不是可用id代替HTML成分
IE:可以用id来代替HTML元素
FF:不可以

(8)
是不是可用id代替HTML成分
IE:可以用id来代替HTML元素
FF:不可以

 <!– <script language=”javascript”>
  setInterval(test,1000);
  var array = new Array();
  var index = 0;
  var array = new
Array(“image/1.jpg”,”image/2.jpg”,”image/3.jpg”,”image/4.jpg”,”image/5.jpg”,”image/6.jpg”,”image/7.jpg”,”image/8.jpg”,”image/9.jpg”,”image/10.jpg”);
  function test() {
   var myimg=document.getElementById(“imgs”);
   if(index==array.length-1)
   { index=0; }else{ index++; }
   myimg.src=array[index];
  }
 </script> –>
 </head>
 <body>
  <img id = “obj” src = “1.jpg” border = 0 />
 </body>
</html>

继承

在能够持续的图景下,不要再一次样式申明,。

CSS

/* bad */ div h1, div p { text-shadow: 0 1px 0 #fff; } /* good */
div { text-shadow: 0 1px 0 #fff; }

1
2
3
4
5
6
7
8
9
/* bad */
div h1, div p {
  text-shadow: 0 1px 0 #fff;
}
 
/* good */
div {
  text-shadow: 0 1px 0 #fff;
}

5.
规避javascript五人支付函数重名难题
(1)
可以付出前确定命名规范,按照差异开发人士开发的听从在函数前加前缀
(2)
将各个开发人士的函数包装到类中,调用的时候就调用类的函数,就算函数重名只要类名不重复就ok

5.
规避javascript多个人付出函数重名难点
(1)
可以付出前确定命名规范,依据不相同开发人士开发的职能在函数前加前缀
(2)
将各个开发人士的函数打包到类中,调用的时候就调用类的函数,固然函数重名只要类名不重复就ok

你可能感兴趣的小说:

  • 采用html+js+css
    完毕页面轮播图效果(实例讲解)
  • 原生js和css落成图片轮播效果
  • 据悉cssSlidy.js插件完结响应式手机图片轮播效果
  • js 图片轮播(5张图片)
  • 原生js和jquery完成图片轮播特效
  • 最简便易行的JavaScript图片轮播代码(二种艺术)
  • JS达成简易图片轮播效果的章程
  • 带左右箭头图片轮播的JS代码
  • js图片轮播效果完成代码
  • JS+HTML+CSS已毕轮播效果

简洁

保障代码简洁。使用简写属性,幸免在不必要时利用七个个性。

CSS

/* bad */ div { transition: all 1s; top: 50%; margin-top: -10px;
padding-top: 5px; padding-right: 10px; padding-bottom: 20px;
padding-left: 10px; } /* good */ div { transition: 1s; top: calc(50% –
10px); padding: 5px 10px 20px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* bad */
div {
  transition: all 1s;
  top: 50%;
  margin-top: -10px;
  padding-top: 5px;
  padding-right: 10px;
  padding-bottom: 20px;
  padding-left: 10px;
}
 
/* good */
div {
  transition: 1s;
  top: calc(50% – 10px);
  padding: 5px 10px 20px;
}

6.
javascript面向对象中持续达成
javascript面向对象中的继承已毕一般都利用到了构造函数和Prototype原型链,简单的代码如下:

6.
javascript面向对象中持续完成
javascript面向对象中的继承达成一般都应用到了构造函数和Prototype原型链,简单的代码如下:

语言

优先利用英文而不是数学公式

JavaScript

/* bad */ :nth-child(2n + 1) { transform: rotate(360deg); } /* good
*/ :nth-child(odd) { transform: rotate(1turn); }

1
2
3
4
5
6
7
8
9
/* bad */
:nth-child(2n + 1) {
  transform: rotate(360deg);
}
 
/* good */
:nth-child(odd) {
  transform: rotate(1turn);
}
  1. function Animal(name) {
  2.    this.name = name;
  3. }
  4.  
  5. Animal.prototype.getName = function() {alert(this.name)}
  6. function Dog() {};
  7. Dog.prototype = new Animal(“Buddy”);
  8. Dog.prototype.constructor = Dog;
  9. var dog = new Dog();

    7.
    FF下边达成outerHTML
    FF不援助outerHTML,要落到实处outerHTML还亟需特殊处理
    思路如下:

  1. function Animal(name) {
  2.    this.name = name;
  3. }
  4.  
  5. Animal.prototype.getName = function() {alert(this.name)}
  6. function Dog() {};
  7. Dog.prototype = new Animal(“Buddy”);
  8. Dog.prototype.constructor = Dog;
  9. var dog = new Dog();

    7.
    FF上面落成outerHTML
    FF不帮忙outerHTML,要兑现outerHTML还索要独特处理
    思路如下:

浏览器引擎前缀

当仁不让删除过时的浏览器引擎前缀。借使你必要动用它们,请在正规属性前插入。

CSS

/* bad */ div { transform: scale(2); -webkit-transform: scale(2);
-moz-transform: scale(2); -ms-transform: scale(2); transition: 1s;
-webkit-transition: 1s; -moz-transition: 1s; -ms-transition: 1s; } /*
good */ div { -webkit-transform: scale(2); transform: scale(2);
transition: 1s; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* bad */
div {
  transform: scale(2);
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -ms-transform: scale(2);
  transition: 1s;
  -webkit-transition: 1s;
  -moz-transition: 1s;
  -ms-transition: 1s;
}
 
/* good */
div {
  -webkit-transform: scale(2);
  transform: scale(2);
  transition: 1s;
}

在页面中添加一个新的元素A,克隆一份须求取得outerHTML的因素,将以此元素append到新的A中,然后拿走A的innerHTML就可以了。

在页面中添加一个新的成分A,克隆一份须要取得outerHTML的因素,将以此成分append到新的A中,然后拿走A的innerHTML就可以了。

动画

事先利用过渡,而不是动画片。防止对 opacity 和 transform
以外的品质使用动画片。

CSS

/* bad */ div:hover { animation: move 1s forwards; } @keyframes move {
100% { margin-left: 100px; } } /* good */ div:hover { transition: 1s;
transform: translateX(100px); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* bad */
div:hover {
  animation: move 1s forwards;
}
@keyframes move {
  100% {
    margin-left: 100px;
  }
}
 
/* good */
div:hover {
  transition: 1s;
  transform: translateX(100px);
}
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “;
  2. <html xmlns=”;
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html;
    charset=gb2312″ />
  5. <title>获取outerHMTL</title>
  6. <style>
  7. div{ background:#0000FF;width:100px;height:100px;}
  8. span{ background:#00FF00;width:100px;height:100px;}
  9. p{ background:#FF0000;width:100px;height:100px;}
  10. </style>
  11. </head>
  12. <body>
  13. <div id=”a”><span>SPAN</span>DIV</div>
  14. <span>SPAN</span>
  15. <p>P</p>
  16. <script type=”text/javascript”>
  17. function getOuterHTML(id){
  18. var el = document.getElementById(id);
  19. var newNode = document.createElement(“div”);
  20. document.appendChild(newNode);
  21. var clone = el.cloneNode(true);
  22. newNode.appendChild(clone);
  23. alert(newNode.innerHTML);
  24. document.removeChild(newNode);
  25. }
  26. getOuterHTML(“a”);
  27. </script>
  28. </body>
  29. </html>
  30.  
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “;
  2. <html xmlns=”;
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html;
    charset=gb2312″ />
  5. <title>获取outerHMTL</title>
  6. <style>
  7. div{ background:#0000FF;width:100px;height:100px;}
  8. span{ background:#00FF00;width:100px;height:100px;}
  9. p{ background:#FF0000;width:100px;height:100px;}
  10. </style>
  11. </head>
  12. <body>
  13. <div id=”a”><span>SPAN</span>DIV</div>
  14. <span>SPAN</span>
  15. <p>P</p>
  16. <script type=”text/javascript”>
  17. function getOuterHTML(id){
  18. var el = document.getElementById(id);
  19. var newNode = document.createElement(“div”);
  20. document.appendChild(newNode);
  21. var clone = el.cloneNode(true);
  22. newNode.appendChild(clone);
  23. alert(newNode.innerHTML);
  24. document.removeChild(newNode);
  25. }
  26. getOuterHTML(“a”);
  27. </script>
  28. </body>
  29. </html>
  30.  

单位

在可以的气象下,使用没有单位的值。在你利用相对单位时优先 rem
。优先利用秒而不是飞秒。

CSS

/* bad */ div { margin: 0px; font-size: .9em; line-height: 22px;
transition: 500ms; } /* good */ div { margin: 0; font-size: .9rem;
line-height: 1.5; transition: .5s; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* bad */
div {
  margin: 0px;
  font-size: .9em;
  line-height: 22px;
  transition: 500ms;
}
 
/* good */
div {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  transition: .5s;
}

8.
编纂一个艺术 求一个字符串的字节长度
要是:一个英文字符占用一个字节,一个中文字符占用三个字节

8.
编辑一个措施 求一个字符串的字节长度
只要:一个英文字符占用一个字节,一个华语字符占用五个字节

颜色

即便您需求透明效果,请使用rgba。否则,总是选取十六进制格式。

CSS

/* bad */ div { color: hsl(103, 54%, 43%); } /* good */ div { color:
#5a3; }

1
2
3
4
5
6
7
8
9
/* bad */
div {
  color: hsl(103, 54%, 43%);
}
 
/* good */
div {
  color: #5a3;
}
  1. function GetBytes(str){
  2.          var len = str.length;
  3.          var bytes = len;
  4.       for(var i=0; i<len; i++){
  5.                     if (str.charCodeAt(i) > 255) bytes++;
  6.       }
  7.          return bytes;
  8. }
  9. alert(GetBytes(“你好,as”));
  1. function GetBytes(str){
  2.          var len = str.length;
  3.          var bytes = len;
  4.       for(var i=0; i<len; i++){
  5.                     if (str.charCodeAt(i) > 255) bytes++;
  6.       }
  7.          return bytes;
  8. }
  9. alert(GetBytes(“你好,as”));

绘图

当资源得以随心所欲地经过CSS落成时,幸免HTTP请求。

CSS

/* bad */ div::before { content: url(white-circle.svg); } /* good */
div::before { content: “”; display: block; width: 20px; height: 20px;
border-radius: 50%; background: #fff; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* bad */
div::before {
  content: url(white-circle.svg);
}
 
/* good */
div::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
}

9.
编纂一个艺术
去掉一个数组的再一次成分

9.
编纂一个办法
去掉一个数组的重复成分

Hacks

绝不使用它们。

CSS

/* bad */ div { // position: relative; transform: translateZ(0); } /*
good */ div { /* position: relative; */ will-change: transform; }

1
2
3
4
5
6
7
8
9
10
11
/* bad */
div {
  // position: relative;
  transform: translateZ(0);
}
 
/* good */
div {
  /* position: relative; */
  will-change: transform;
}
  1. var arr = [1 ,1 ,2, 3, 3, 2, 1];
  2. Array.prototype.unique = function(){
  3.          var ret = [];
  4.          var o = {};
  5.          var len = this.length;
  6.          for (var i=0; i<len; i++){
  7.                    var v = this[i];
  8.                    if (!o[v]){
  9.                                 o[v] = 1;
  10.                                 ret.push(v);
  11.                   }
  12.        }
  13.         return ret;
  14. };
  15. alert(arr.unique());
  1. var arr = [1 ,1 ,2, 3, 3, 2, 1];
  2. Array.prototype.unique = function(){
  3.          var ret = [];
  4.          var o = {};
  5.          var len = this.length;
  6.          for (var i=0; i<len; i++){
  7.                    var v = this[i];
  8.                    if (!o[v]){
  9.                                 o[v] = 1;
  10.                                 ret.push(v);
  11.                   }
  12.        }
  13.         return ret;
  14. };
  15. alert(arr.unique());

JavaScript

10.
写出3个利用this的典型应用
(1)在html元素事件性质中运用,如:

10.
写出3个应用this的优异应用
(1)在html成分事件性质中应用,如:

性能

可读性,正确性和可表达性优先于品质。JavaScript基本上永远不会化为您的性质瓶颈。优化图像压缩、互连网访问和DOM渲染。如若您仅记得本文的一条规则,记住那条。

JavaScript

// bad (albeit way faster) const arr = [1, 2, 3, 4]; const len =
arr.length; var i = -1; var result = []; while (++i < len) { var n
= arr[i]; if (n % 2 > 0) continue; result.push(n * n); } // good
const arr = [1, 2, 3, 4]; const isEven = n => n % 2 == 0; const
square = n => n * n; const result = arr.filter(isEven).map(square);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// bad (albeit way faster)
const arr = [1, 2, 3, 4];
const len = arr.length;
var i = -1;
var result = [];
while (++i < len) {
  var n = arr[i];
  if (n % 2 > 0) continue;
  result.push(n * n);
}
 
// good
const arr = [1, 2, 3, 4];
const isEven = n => n % 2 == 0;
const square = n => n * n;
 
const result = arr.filter(isEven).map(square);
  1. <input type=”button” onclick=”showInfo(this);”
    value=”点击一下”/>
  1. <input type=”button” onclick=”showInfo(this);”
    value=”点击一下”/>

无污染

尽量保持你的函数干净。所有函数最好无副作用,不应用外部数据,重回新对象而不是改变现有的靶子。

JavaScript

// bad const merge = (target, …sources) => Object.assign(target,
…sources); merge({ foo: “foo” }, { bar: “bar” }); // => { foo:
“foo”, bar: “bar” } // good const merge = (…sources) =>
Object.assign({}, …sources); merge({ foo: “foo” }, { bar: “bar” }); //
=> { foo: “foo”, bar: “bar” }

1
2
3
4
5
6
7
// bad
const merge = (target, …sources) => Object.assign(target, …sources);
merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }
 
// good
const merge = (…sources) => Object.assign({}, …sources);
merge({ foo: "foo" }, { bar: "bar" }); // => { foo: "foo", bar: "bar" }

(2)构造函数

(2)构造函数

原生

尽大概地着重原生方法。

JavaScript

// bad const toArray = obj => [].slice.call(obj); // good const
toArray = (() => Array.from ? Array.from : obj =>
[].slice.call(obj) )();

1
2
3
4
5
6
7
// bad
const toArray = obj => [].slice.call(obj);
 
// good
const toArray = (() =>
  Array.from ? Array.from : obj => [].slice.call(obj)
)();
  1. function Animal(name, color) {
  2.          this.name = name;
  3.          this.color = color;
  4. }
  1. function Animal(name, color) {
  2.          this.name = name;
  3.          this.color = color;
  4. }

强制转换

当有必不可少时,拥抱隐式强制转换。否则幸免它。不要盲目使用。

JavaScript

// bad if (x === undefined || x === null) { … } // good if (x ==
undefined) { … }

1
2
3
4
5
// bad
if (x === undefined || x === null) { … }
 
// good
if (x == undefined) { … }

(3)

(3)

循环

当强迫使用可变的对象时,不要使用循环。依靠 array.prototype 中的方法。

JavaScript

// bad const sum = arr => { var sum = 0; var i = -1; for
(;arr[++i];) { sum += arr[i]; } return sum; }; sum([1, 2, 3]); //
=> 6 // good const sum = arr => arr.reduce((x, y) => x + y);
sum([1, 2, 3]); // => 6

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// bad
const sum = arr => {
  var sum = 0;
  var i = -1;
  for (;arr[++i];) {
    sum += arr[i];
  }
  return sum;
};
 
sum([1, 2, 3]); // => 6
 
// good
const sum = arr =>
  arr.reduce((x, y) => x + y);
 
sum([1, 2, 3]); // => 6

假使你不可以,恐怕使用 array.prototype 方法很虐心。使用递归。

JavaScript

// bad const createDivs = howMany => { while (howMany–) {
document.body.insertAdjacentHTML(“beforeend”,
“<div></div>”); } }; createDivs(5); // bad const createDivs
= howMany => […Array(howMany)].forEach(() =>
document.body.insertAdjacentHTML(“beforeend”, “<div></div>”)
); createDivs(5); // good const createDivs = howMany => { if
(!howMany) return; document.body.insertAdjacentHTML(“beforeend”,
“<div></div>”); return createDivs(howMany – 1); };
createDivs(5);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// bad
const createDivs = howMany => {
  while (howMany–) {
    document.body.insertAdjacentHTML("beforeend", "<div></div>");
  }
};
createDivs(5);
 
// bad
const createDivs = howMany =>
  […Array(howMany)].forEach(() =>
    document.body.insertAdjacentHTML("beforeend", "<div></div>")
  );
createDivs(5);
 
// good
const createDivs = howMany => {
  if (!howMany) return;
  document.body.insertAdjacentHTML("beforeend", "<div></div>");
  return createDivs(howMany – 1);
};
createDivs(5);
  1. <input type=”button” id=”text” value=”点击一下” />
  2. <script type=”text/<a href=”)”
    class=”st_tag internal_tag” rel=”tag” title=”Posts tagged with
    Javascript”>javascript</a>”>
  3. var btn = document.getElementById(“text”);
  4. btn.onclick = function() {
  5. alert(this.value); //此处的this是按钮元素
  6. }
  7. </script>
  1. <input type=”button” id=”text” value=”点击一下” />
  2. <script type=”text/<a href=”)”
    class=”st_tag internal_tag” rel=”tag” title=”Posts tagged with
    Javascript”>javascript</a>”>
  3. var btn = document.getElementById(“text”);
  4. btn.onclick = function() {
  5. alert(this.value); //此处的this是按钮元素
  6. }
  7. </script>

Arguments

遗忘 arguments 对象。rest 参数向来是一个更好的选项,因为:

  1. 它是命名的,所以它给你一个函数期望arguments的更好的做法
  2. 它是一个着实的数组,那使得它更易于采用。

JavaScript

// bad const sortNumbers = () =>
Array.prototype.slice.call(arguments).sort(); // good const sortNumbers
= (…numbers) => numbers.sort();

1
2
3
4
5
6
// bad
const sortNumbers = () =>
  Array.prototype.slice.call(arguments).sort();
 
// good
const sortNumbers = (…numbers) => numbers.sort();

(4)CSS
expression表明式中动用this关键字

(4)CSS
expression说明式中使用this关键字

Apply

忘却 apply() 。使用 spread 操作符代替。

JavaScript

const greet = (first, last) => `Hi ${first} ${last}`; const person
= [“John”, “Doe”]; // bad greet.apply(null, person); // good
greet(…person);

1
2
3
4
5
6
7
8
const greet = (first, last) => `Hi ${first} ${last}`;
const person = ["John", "Doe"];
 
// bad
greet.apply(null, person);
 
// good
greet(…person);
  1. <table width=”100px” height=”100px”>
  2.      <tr>
  3.               <td>
  4.              <div
    style=”width:expression(this.parentNode.width);”>div
    element</div>
  5.              </td>
  6.      </tr>
  7. </table>
  1. <table width=”100px” height=”100px”>
  2.      <tr>
  3.               <td>
  4.              <div
    style=”width:expression(this.parentNode.width);”>div
    element</div>
  5.              </td>
  6.      </tr>
  7. </table>

Bind

当有惯用方法时,不要选择 bind() 。

JavaScript

// bad [“foo”, “bar”].forEach(func.bind(this)); // good [“foo”,
“bar”].forEach(func, this); // bad const person = { first: “John”,
last: “Doe”, greet() { const full = function() { return `${this.first}
${this.last}`; }.bind(this); return `Hello ${full()}`; } } // good
const person = { first: “John”, last: “Doe”, greet() { const full = ()
=> `${this.first} ${this.last}`; return `Hello ${full()}`; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// bad
["foo", "bar"].forEach(func.bind(this));
 
// good
["foo", "bar"].forEach(func, this);
// bad
const person = {
  first: "John",
  last: "Doe",
  greet() {
    const full = function() {
      return `${this.first} ${this.last}`;
    }.bind(this);
    return `Hello ${full()}`;
  }
}
 
// good
const person = {
  first: "John",
  last: "Doe",
  greet() {
    const full = () => `${this.first} ${this.last}`;
    return `Hello ${full()}`;
  }
}

12.
什么样体现/隐藏一个DOM成分?

12.
怎么浮现/隐藏一个DOM成分?

高阶函数

在不须求时,防止嵌套函数。

JavaScript

// bad [1, 2, 3].map(num => String(num)); // good [1, 2,
3].map(String);

1
2
3
4
5
// bad
[1, 2, 3].map(num => String(num));
 
// good
[1, 2, 3].map(String);
  1. el.style.display = “”;
  2. el.style.display
    = “none”;
  1. el.style.display = “”;
  2. el.style.display
    = “none”;

组合

防止多嵌套函数的调用。使用组合。

JavaScript

const plus1 = a => a + 1; const mult2 = a => a * 2; // bad
mult2(plus1(5)); // => 12 // good const pipeline = (…funcs) =>
val => funcs.reduce((a, b) => b(a), val); const addThenMult =
pipeline(plus1, mult2); addThenMult(5); // => 12

1
2
3
4
5
6
7
8
9
10
const plus1 = a => a + 1;
const mult2 = a => a * 2;
 
// bad
mult2(plus1(5)); // => 12
 
// good
const pipeline = (…funcs) => val => funcs.reduce((a, b) => b(a), val);
const addThenMult = pipeline(plus1, mult2);
addThenMult(5); // => 12

el是要操作的DOM成分

el是要操作的DOM成分

缓存

缓存成效测试、大数据结构和其他昂贵的操作。

JavaScript

// bad const contains = (arr, value) => Array.prototype.includes ?
arr.includes(value) : arr.some(el => el === value); contains([“foo”,
“bar”], “baz”); // => true // good const contains = (() =>
Array.prototype.includes ? (arr, value) => arr.includes(value) :
(arr, value) => arr.some(el => el === value) )();
contains([“foo”, “bar”], “baz”); // => true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// bad
const contains = (arr, value) =>
  Array.prototype.includes
    ? arr.includes(value)
    : arr.some(el => el === value);
contains(["foo", "bar"], "baz"); // => true
 
// good
const contains = (() =>
  Array.prototype.includes
    ? (arr, value) => arr.includes(value)
    : (arr, value) => arr.some(el => el === value)
)();
contains(["foo", "bar"], "baz"); // => true

13.
JavaScript中哪些检测一个变量是一个String类型?请写出函数实现

13.
JavaScript中什么检测一个变量是一个String类型?请写出函数实现

变量定义

优先const,再是let,然后是var。

JavaScript

// bad var obj = {}; obj[“foo” + “bar”] = “baz”; // good const obj = {
[“foo” + “bar”]: “baz” };

1
2
3
4
5
6
7
8
// bad
var obj = {};
obj["foo" + "bar"] = "baz";
 
// good
const obj = {
  ["foo" + "bar"]: "baz"
};

String类型有二种生成方式:
(1)Var
str = “hello world”;
(2)Var
str2 = new String(“hello
world”);

String类型有二种生成形式:
(1)Var
str = “hello world”;
(2)Var
str2 = new String(“hello
world”);

条件

先期选拔即时执行函数表明式(IIFE和重回语句,而不是 if,else if 和 switch
语句

JavaScript

// bad var grade; if (result < 50) grade = “bad”; else if (result
< 90) grade = “good”; else grade = “excellent”; // good const grade =
(() => { if (result < 50) return “bad”; if (result < 90) return
“good”; return “excellent”; })();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// bad
var grade;
if (result < 50)
  grade = "bad";
else if (result < 90)
  grade = "good";
else
  grade = "excellent";
 
// good
const grade = (() => {
  if (result < 50)
    return "bad";
  if (result < 90)
    return "good";
  return "excellent";
})();
  1. function IsString(str){
  2.            return (typeof str == “string” || str.constructor ==
    String);
  3. }
  4. var str = “”;
  5. alert(IsString(1));
  6. alert(IsString(str));
  7. alert(IsString(new String(str)));
  1. function IsString(str){
  2.            return (typeof str == “string” || str.constructor ==
    String);
  3. }
  4. var str = “”;
  5. alert(IsString(1));
  6. alert(IsString(str));
  7. alert(IsString(new String(str)));

目标迭代

在同意的处境下幸免选拔 for…in

JavaScript

const shared = { foo: “foo” }; const obj = Object.create(shared, { bar:
{ value: “bar”, enumerable: true } }); // bad for (var prop in obj) { if
(obj.hasOwnProperty(prop)) console.log(prop); } // good
Object.keys(obj).forEach(prop => console.log(prop));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const shared = { foo: "foo" };
const obj = Object.create(shared, {
  bar: {
    value: "bar",
    enumerable: true
  }
});
 
// bad
for (var prop in obj) {
  if (obj.hasOwnProperty(prop))
    console.log(prop);
}
 
// good
Object.keys(obj).forEach(prop => console.log(prop));

14.
网页中落到实处一个测算当年还剩多少时间的尾数计时程序,需求网页上实时动态显示“××年还剩××天××时××分××秒”

14.
网页中落到实处一个测算当年还剩多少时间的倒数计时程序,需要网页上实时动态展现“××年还剩××天××时××分××秒”

目的映射

当对象合法使用情状下,map
常常是一个更好的,更强有力的取舍。如果有疑问,请使用 map 。

JavaScript

// bad const me = { name: “Ben”, age: 30 }; var meSize =
Object.keys(me).length; meSize; // => 2 me.country = “Belgium”;
meSize++; meSize; // => 3 // good const me = new Map();
me.set(“name”, “Ben”); me.set(“age”, 30); me.size; // => 2
me.set(“country”, “Belgium”); me.size; // => 3

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// bad
const me = {
  name: "Ben",
  age: 30
};
var meSize = Object.keys(me).length;
meSize; // => 2
me.country = "Belgium";
meSize++;
meSize; // => 3
 
// good
const me = new Map();
me.set("name", "Ben");
me.set("age", 30);
me.size; // => 2
me.set("country", "Belgium");
me.size; // => 3
  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
    “;
  2. <html>
  3. <head>
  4.    <meta http-equiv=”Content-Type” content=”text/html;
    charset=UTF-8″>
  5.    <title>倒计时</title>
  6. </head>
  7. 美高梅开户网址,<body>
  8. <input type=”text” value=”” id=”input” size=”1000″/>
  9. <script type=”text/javascript”>
  10.    function counter() {
  11.       var date = new Date();
  12.       var year = date.getFullYear();
  13.       var date2 = new Date(year, 12, 31, 23, 59, 59);
  14.       var time = (date2 – date)/1000;
  15.       var day =Math.floor(time/(24*60*60))
  16.       var hour = Math.floor(time%(24*60*60)/(60*60))
  17.       var minute = Math.floor(time%(24*60*60)%(60*60)/60);
  18.       var second = Math.floor(time%(24*60*60)%(60*60)%60);
  19.       var str = year +
    “年还剩”+day+”天”+hour+”时”+minute+”分”+second+”秒”;
  20.       document.getElementById(“input”).value = str;
  21.    }
  22.    window.setInterval(“counter()”, 1000);
  23. </script>
  24. </body>
  25. </html>
  26.  
  1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
    “;
  2. <html>
  3. <head>
  4.    <meta http-equiv=”Content-Type” content=”text/html;
    charset=UTF-8″>
  5.    <title>倒计时</title>
  6. </head>
  7. <body>
  8. <input type=”text” value=”” id=”input” size=”1000″/>
  9. <script type=”text/javascript”>
  10.    function counter() {
  11.       var date = new Date();
  12.       var year = date.getFullYear();
  13.       var date2 = new Date(year, 12, 31, 23, 59, 59);
  14.       var time = (date2 – date)/1000;
  15.       var day =Math.floor(time/(24*60*60))
  16.       var hour = Math.floor(time%(24*60*60)/(60*60))
  17.       var minute = Math.floor(time%(24*60*60)%(60*60)/60);
  18.       var second = Math.floor(time%(24*60*60)%(60*60)%60);
  19.       var str = year +
    “年还剩”+day+”天”+hour+”时”+minute+”分”+second+”秒”;
  20.       document.getElementById(“input”).value = str;
  21.    }
  22.    window.setInterval(“counter()”, 1000);
  23. </script>
  24. </body>
  25. </html>
  26.  

Curry(柯里化)

柯里局可能在任何语言有它的地位,但防止在 JavaScript
使用。它经过引入外来范式,且有关的用例极不日常,使得您的代码更难阅读。

JavaScript

// bad const sum = a => b => a + b; sum(5)(3); // => 8 // good
const sum = (a, b) => a + b; sum(5, 3); // => 8

1
2
3
4
5
6
7
// bad
const sum = a => b => a + b;
sum(5)(3); // => 8
 
// good
const sum = (a, b) => a + b;
sum(5, 3); // => 8

15.
补偿代码,鼠标单击Button1后将Button1移动到Button2的后边

15.
补偿代码,鼠标单击Button1后将Button1移动到Button2的末端

可读性

无须通过类似聪明的技艺来混淆代码的来意。

JavaScript

// bad foo || doSomething(); // good if (!foo) doSomething(); // bad
void function() { /* IIFE */ }(); // good (function() { /* IIFE */
}()); // bad const n = ~~3.14; // good const n = Math.floor(3.14);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// bad
foo || doSomething();
 
// good
if (!foo) doSomething();
// bad
void function() { /* IIFE */ }();
 
// good
(function() { /* IIFE */ }());
// bad
const n = ~~3.14;
 
// good
const n = Math.floor(3.14);
  1. <div> <input type=”button” id =”button1″ value=”1″
    onclick=”???”>
  2. <input type=”button” id =”button2″ value=”2″ /”> </div>

  3. <div>

  4.           <input type=”button” id =”button1″ value=”1″
    onclick=”moveBtn(this);”>
  5.            <input type=”button” id =”button2″ value=”2″ />
  6. </div>
  7. <script type=”text/javascript”>
  8. function moveBtn(obj) {
  9.           var clone = obj.cloneNode(true);
  10.           var parent = obj.parentNode;
  11.           parent.appendChild(clone);
  12.           parent.removeChild(obj);
  13. }
  14. </script>
  1. <div> <input type=”button” id =”button1″ value=”1″
    onclick=”???”>
  2. <input type=”button” id =”button2″ value=”2″ /”> </div>

  3. <div>

  4.           <input type=”button” id =”button1″ value=”1″
    onclick=”moveBtn(this);”>
  5.            <input type=”button” id =”button2″ value=”2″ />
  6. </div>
  7. <script type=”text/javascript”>
  8. function moveBtn(obj) {
  9.           var clone = obj.cloneNode(true);
  10.           var parent = obj.parentNode;
  11.           parent.appendChild(clone);
  12.           parent.removeChild(obj);
  13. }
  14. </script>

代码重用

决不惧怕创设多量小,中度可整合、可采纳的函数。

JavaScript

// bad arr[arr.length – 1]; // good const first = arr => arr[0];
const last = arr => first(arr.slice(-1)); last(arr); // bad const
product = (a, b) => a * b; const triple = n => n * 3; // good
const product = (a, b) => a * b; const triple = product.bind(null,
3);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// bad
arr[arr.length – 1];
 
// good
const first = arr => arr[0];
const last = arr => first(arr.slice(-1));
last(arr);
// bad
const product = (a, b) => a * b;
const triple = n => n * 3;
 
// good
const product = (a, b) => a * b;
const triple = product.bind(null, 3);

16.
JavaScript有哪两种数据类型
简单:Number,Boolean,String,Null,Undefined
复合:Object,Array,Function

16.
JavaScript有哪两种数据类型
简单:Number,Boolean,String,Null,Undefined
复合:Object,Array,Function

依赖

减去看重。第三方代码你不熟悉。不要独自为了采用一些很简单复制的措施而加载整个库:

JavaScript

// bad var _ = require(“underscore”); _.compact([“foo”, 0]));
_.unique([“foo”, “foo”]); _.union([“foo”], [“bar”], [“foo”]);
// good const compact = arr => arr.filter(el => el); const unique
= arr => […Set(arr)]; const union = (…arr) =>
unique([].concat(…arr)); compact([“foo”, 0]); unique([“foo”,
“foo”]); union([“foo”], [“bar”], [“foo”]);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// bad
var _ = require("underscore");
_.compact(["foo", 0]));
_.unique(["foo", "foo"]);
_.union(["foo"], ["bar"], ["foo"]);
 
// good
const compact = arr => arr.filter(el => el);
const unique = arr => […Set(arr)];
const union = (…arr) => unique([].concat(…arr));
 
compact(["foo", 0]);
unique(["foo", "foo"]);
union(["foo"], ["bar"], ["foo"]);

赞 6 收藏
评论

17.
下面css标签在JavaScript中调用应怎么样拼写,border-left-color,-moz-viewport
borderLeftColor
mozViewport

17.
下面css标签在JavaScript中调用应怎么样拼写,border-left-color,-moz-viewport
borderLeftColor
mozViewport

有关作者:cucr

美高梅开户网址 1

天涯论坛新浪:@hop_ping
个人主页 ·
小编的稿子 ·
17

美高梅开户网址 2

18.
JavaScript中如何对一个目的开展深度clone

18.
JavaScript中哪些对一个对象举办深度clone

  1. function cloneObject(o) {
  2.         if(!o || ‘object’ !== typeof o) {
  3.             return o;
  4.        }
  5.        var c = ‘function’ === typeof o.pop ? [] : {};
  6.        var p, v;
  7.        for(p in o) {
  8.                      if(o.hasOwnProperty(p)) {
  9.                          v = o[p];
  10.                                      if(v && ‘object’ === typeof v)
    {
  11.                                          c[p] = Ext.ux.clone(v);
  12.                                     }
  13.                                     else {
  14.                                        c[p] = v;
  15.                          }
  16.         }
  17.     }
  18.     return c;
  19. };
  1. function cloneObject(o) {
  2.         if(!o || ‘object’ !== typeof o) {
  3.             return o;
  4.        }
  5.        var c = ‘function’ === typeof o.pop ? [] : {};
  6.        var p, v;
  7.        for(p in o) {
  8.                      if(o.hasOwnProperty(p)) {
  9.                          v = o[p];
  10.                                      if(v && ‘object’ === typeof v)
    {
  11.                                          c[p] = Ext.ux.clone(v);
  12.                                     }
  13.                                     else {
  14.                                        c[p] = v;
  15.                          }
  16.         }
  17.     }
  18.     return c;
  19. };

19.
如何控制alert中的换行

19.
怎么控制alert中的换行

  1. \n alert(“p\np”);
  1. \n alert(“p\np”);

20.
请完成,鼠标点击页面中的任意标签,alert该标签的名称.(注意包容性)

20.
请完成,鼠标点击页面中的任意标签,alert该标签的名称.(注意包容性)

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “;
  2. <html xmlns=”;
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html;
    charset=gb2312″ />
  5. <title>鼠标点击页面中的任意标签,alert该标签的称谓</title>
  6. <style>
  7. div{ background:#0000FF;width:100px;height:100px;}
  8. span{ background:#00FF00;width:100px;height:100px;}
  9. p{ background:#FF0000;width:100px;height:100px;}
  10. </style>
  11. <script type=”text/javascript”>
  12. document.onclick = function(evt){
  13. var e = window.event || evt;
  14. var tag = e[“target”]
    || e[“srcElement”];
  15. alert(tag.tagName);
  16. };
  17. </script>
  18. </head>
  19. <body>
  20. <div id=”div”><span>SPAN</span>DIV</div>
  21. <span>SPAN</span>
  22. <p>P</p>
  23. </body>
  24. </html>
  25.  
  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
    “;
  2. <html xmlns=”;
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html;
    charset=gb2312″ />
  5. <title>鼠标点击页面中的任意标签,alert该标签的名号</title>
  6. <style>
  7. div{ background:#0000FF;width:100px;height:100px;}
  8. span{ background:#00FF00;width:100px;height:100px;}
  9. p{ background:#FF0000;width:100px;height:100px;}
  10. </style>
  11. <script type=”text/javascript”>
  12. document.onclick = function(evt){
  13. var e = window.event || evt;
  14. var tag = e[“target”]
    || e[“srcElement”];
  15. alert(tag.tagName);
  16. };
  17. </script>
  18. </head>
  19. <body>
  20. <div id=”div”><span>SPAN</span>DIV</div>
  21. <span>SPAN</span>
  22. <p>P</p>
  23. </body>
  24. </html>
  25.  

21.
请编写一个JavaScript函数
parseQueryString,它的用处是把U途胜L参数解析为一个对象,如:
var
url = “″;

21.
请编写一个JavaScript函数
parseQueryString,它的用处是把USportageL参数解析为一个对象,如:
var
url = “″;

  1. function parseQueryString(url){
  2.            var params = {};
  3.            var arr = url.split(“?”);
  4.            if (arr.length <= 1)
  5.                            return params;
  6.            arr = arr[1].split(“&”);
  7.            for(var i=0, l=arr.length; i<l; i++){
  8.                            var a = arr[i].split(“=”);
  9.                            params[a[0]] = a[1];
  10.            }
  11.            return params;
  12. }
  13.  
  14. var url = “”;
  15. var ps = parseQueryString(url);
  16. alert(ps[“key1”]);
  1. function parseQueryString(url){
  2.            var params = {};
  3.            var arr = url.split(“?”);
  4.            if (arr.length <= 1)
  5.                            return params;
  6.            arr = arr[1].split(“&”);
  7.            for(var i=0, l=arr.length; i<l; i++){
  8.                            var a = arr[i].split(“=”);
  9.                            params[a[0]] = a[1];
  10.            }
  11.            return params;
  12. }
  13.  
  14. var url = “”;
  15. var ps = parseQueryString(url);
  16. alert(ps[“key1”]);

22.
ajax是何许? ajax的互动模型? 同步和异步的区分? 如何缓解跨域难题?
Ajax是种种技术构成起来的一种浏览器和服务器交互技术,基本考虑是允许一个互连网浏览器向一个长距离页面/服务做异步的http调用,并且用收到的数据来更新一个当下web页面而毋庸刷新整个页面。该技能可以改良客户端的体会。包蕴的技巧:
XHTML:对应W3C的XHTML规范,目前是XHTML1.0。

22.
ajax是如何? ajax的竞相模型? 同步和异步的分别? 怎么着缓解跨域难题?
Ajax是多种技艺结合起来的一种浏览器和服务器交互技术,基本思想是允许一个互连网浏览器向一个中距离页面/服务做异步的http调用,并且用收到的数据来更新一个脚下web页面而毋庸刷新整个页面。该技术可以改进客户端的体验。包蕴的技能:
XHTML:对应W3C的XHTML规范,目前是XHTML1.0。

CSS:对应W3C的CSS规范,目前是CSS2.0
DOM:那里的DOM重假若指HTML
DOM,XML DOM包含在上边的XML中
JavaScript:对应于ECMA的ECMAScript规范
XML:对应W3C的XML
DOM、XSLT、XPath等等规范
XMLHttpRequest:对应WhatWG的Web
Applications1.0规范()

CSS:对应W3C的CSS规范,目前是CSS2.0
DOM:那里的DOM重假若指HTML
DOM,XML DOM包含在底下的XML中
JavaScript:对应于ECMA的ECMAScript规范
XML:对应W3C的XML
DOM、XSLT、XPath等等规范
XMLHttpRequest:对应WhatWG的Web
Applications1.0规范()

联机:脚本会停留并等待服务器发送回复然后再持续
异步:脚本允许页面继续其经过并处理只怕的复原

一齐:脚本会停留并等候服务器发送回复然后再持续
异步:脚本允许页面继续其经过并处理只怕的东山再起

跨域难点概括的领会就是因为JS同源策略的限定,a.com域名下的JS不可以操作b.com或c.a.com下的目的,具体意况如下:

跨域难点大约的知情就是因为JS同源策略的限定,a.com域名下的JS不只怕操作b.com或c.a.com下的对象,具体境况如下:

PS:(1)即使是端口或然协议造成的跨域难题前端是无能为力的

PS:(1)尽管是端口大概协议造成的跨域难点前端是力不从心的

(2)
在跨域难题上,域仅仅通过UKugaL的首部来鉴别而不会尝试判断一致的IP地址对应的域只怕三个域是不是相应一个IP
前端对于跨域的消除办法:
(1)
document.domain+iframe
(2)
动态创立script标签

(2)
在跨域难题上,域仅仅通过U中华VL的首部来鉴别而不会尝试判断一致的IP地址对应的域只怕多少个域是不是相应一个IP
前端对于跨域的化解办法:
(1)
document.domain+iframe
(2)
动态创立script标签

23.
怎么样是闭包?上面那些ul,如何点击每一列的时候alert其index?

23.
怎么是闭包?上面这些ul,怎么样点击每一列的时候alert其index?

  1. <ul id=”test”>
  2.     <li>那是首先条</li>
  3.     <li>那是第二条</li>
  4.     <li>那是第三条</li>
  5. </ul>
  1. <ul id=”test”>
  2.     <li>那是第一条</li>
  3.     <li>那是第二条</li>
  4.     <li>那是第三条</li>
  5. </ul>

二种方案,一是给各种li加一个自定义属性,然后在点击事件中alert出就行,

二种方案,一是给各类li加一个自定义属性,然后在点击事件中alert出就行,

二是应用闭包。那二种艺术各有利弊,前者简单,但净增了自定义属性,改变了页面HTML代码,后者代码简洁但净增了内存消耗。代码如下:

二是使用闭包。那三种办法各有利弊,前者简单,但净增了自定义属性,改变了页面HTML代码,后者代码简洁但净增了内存消耗。代码如下:

第一种方法
    var lis=document.getElementById("test").children;
    for(var i=0;i<lis.length;i++){
        lis[i].setAttribute("index",i);
        lis[i].onclick=function(){
            alert(this.getAttribute("index"));
        }
    }

 第二种方法
    var lis=document.getElementById("test").children;
    for(var i=0;i<lis.length;i++){
        lis[i].onclick=function(x){
            return function(){
                alert(x);
            }
        }(i);
    }
第一种方法
    var lis=document.getElementById("test").children;
    for(var i=0;i<lis.length;i++){
        lis[i].setAttribute("index",i);
        lis[i].onclick=function(){
            alert(this.getAttribute("index"));
        }
    }

 第二种方法
    var lis=document.getElementById("test").children;
    for(var i=0;i<lis.length;i++){
        lis[i].onclick=function(x){
            return function(){
                alert(x);
            }
        }(i);
    }

 

 

24.
请给出异步加载js方案,不少于三种
私自认同景况javascript是一路加载的,也等于javascript的加载时打断的,后边的成分要等待javascript加载达成后才能展开再加载,对于有些意思不是很大的javascript,假诺身处页头会导致加载很慢的话,是会严重影响用户体验的。

24.
请给出异步加载js方案,不少于两种
暗中认同情况javascript是联合加载的,相当于javascript的加载时打断的,前边的要素要等待javascript加载落成后才能进行再加载,对于部分意义不是很大的javascript,若是身处页头会促成加载很慢的话,是会严重影响用户体验的。

异步加载方式:
(1)
defer,只支持IE
(2)
async:
(3)
创制script,插入到DOM中,加载已毕后callBack,见代码:

异步加载情势:
(1)
defer,只支持IE
(2)
async:
(3)
创制script,插入到DOM中,加载达成后callBack,见代码:

  1. function loadScript(url, callback){
  2.              var script = document.createElement(“script”)
  3.              script.type = “text/javascript”;
  4.                             if (script.readyState){ //IE
  5.                                          script.onreadystatechange =
    function(){
  6.                                             if (script.readyState ==
    “loaded” ||
  7.                                                     
       script.readyState == “complete”){
  8.                                                     
       script.onreadystatechange = null;
  9.                                                         callback();
  10.                                                      }
  11.                                           };
  12.                            } else { //Others: Firefox, Safari,
    Chrome, and Opera
  13.                                    script.onload = function(){
  14.                                      callback();
  15.                               };
  16.      }
  17.     script.src = url;
  18.     document.body.appendChild(script);
  19. }
  1. function loadScript(url, callback){
  2.              var script = document.createElement(“script”)
  3.              script.type = “text/javascript”;
  4.                             if (script.readyState){ //IE
  5.                                          script.onreadystatechange =
    function(){
  6.                                             if (script.readyState ==
    “loaded” ||
  7.                                                     
       script.readyState == “complete”){
  8.                                                     
       script.onreadystatechange = null;
  9.                                                         callback();
  10.                                                      }
  11.                                           };
  12.                            } else { //Others: Firefox, Safari,
    Chrome, and Opera
  13.                                    script.onload = function(){
  14.                                      callback();
  15.                               };
  16.      }
  17.     script.src = url;
  18.     document.body.appendChild(script);
  19. }

25.
请设计一套方案,用于确保页面中JS加载完全。

25.
请设计一套方案,用于确保页面中JS加载完全。

  1. var n = document.createElement(“script”);
  2. n.type = “text/javascript”;
  3. //以上省略有些代码
  4. //ie支持script的readystatechange属性
  5. if(ua.ie){
  6.    n.onreadystatechange = function(){
  7.        var rs = this.readyState;
  8.        if(‘loaded’ === rs || ‘complete’===rs){
  9.            n.onreadystatechange = null;
  10.            f(id,url); //回调函数
  11.        }
  12. };
  13. //省略有些代码
  14. //safari 3.x supports the load event for script nodes(DOM2)
  15.    n.addEventListener(‘load’,function(){
  16.        f(id,url);
  17.    });
  18. //firefox and opera support onload(but not dom2
    in ff) handlers for
  19. //script nodes. opera, but no ff, support the onload event for link
  20. //nodes.
  21. }else{
  22.    n.onload = function(){
  23.        f(id,url);
  24.    };
  25. }
  1. var n = document.createElement(“script”);
  2. n.type = “text/javascript”;
  3. //以上省略有些代码
  4. //ie支持script的readystatechange属性
  5. if(ua.ie){
  6.    n.onreadystatechange = function(){
  7.        var rs = this.readyState;
  8.        if(‘loaded’ === rs || ‘complete’===rs){
  9.            n.onreadystatechange = null;
  10.            f(id,url); //回调函数
  11.        }
  12. };
  13. //省略有些代码
  14. //safari 3.x supports the load event for script nodes(DOM2)
  15.    n.addEventListener(‘load’,function(){
  16.        f(id,url);
  17.    });
  18. //firefox and opera support onload(but not dom2
    in ff) handlers for
  19. //script nodes. opera, but no ff, support the onload event for link
  20. //nodes.
  21. }else{
  22.    n.onload = function(){
  23.        f(id,url);
  24.    };
  25. }

26.
js中什么定义class,怎么着增加prototype?
Ele.className
= “***”; //***在css中定义,情势如下:.***
{…}
A.prototype.B
= C;
A是某个构造函数的名字
B是其一社团函数的属性
C是想要定义的性质的值

26.
js中什么定义class,怎么着扩充prototype?
Ele.className
= “***”; //***在css中定义,格局如下:.***
{…}
A.prototype.B
= C;
A是某个构造函数的名字
B是其一协会函数的属性
C是想要定义的质量的值

27.
什么样添加html成分的轩然大波,有二种方法.
(1)
为HTML成分的风云性质赋值
(2)
在JS中使用ele.on*** = function() {…}
(3)
使用DOM2的丰硕事件的措施 add伊夫ntListener或attach伊芙nt

27.
什么样添加html元素的事件,有几种方法.
(1)
为HTML成分的轩然大波性质赋值
(2)
在JS中使用ele.on*** = function() {…}
(3)
使用DOM2的增加事件的点子 add伊夫ntListener或attach伊夫nt

28.
documen.write和 innerHTML的区别
document.write只好重绘整个页面
innerHTML可以重绘页面的一有的

28.
documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一有些

29.
多浏览器检测通过哪些?
(1)
navigator.userAgent
(2)
不一样浏览器的特色,如add伊夫ntListener

29.
多浏览器检测通过怎样?
(1)
navigator.userAgent
(2)
分裂浏览器的本性,如add伊夫ntListener

30.
js的底子对象有那多少个, window和document的常用的点子和属性列出来
String,Number,Boolean

30.
js的基础对象有那多少个, window和document的常用的章程和属性列出来
String,Number,Boolean

Window:
方法:setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open
属性:name,parent,screenLeft,screenTop,self,top,status

Window:
方法:setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open
属性:name,parent,screenLeft,screenTop,self,top,status

Document
方法:createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln
属性:cookie,doctype,domain,documentElement,readyState,URL,

Document
方法:createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln
属性:cookie,doctype,domain,documentElement,readyState,URL,

31. 前端开发的优化难点
(1)
减弱http请求次数:css spirit,data uri
(2)
JS,CSS源码压缩
(3) 前端模板
JS+数据,裁减是因为HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每回操作本地变量,不用请求,减弱请求次数
(4)
用innerHTML代替DOM操作,减弱DOM操作次数,优化javascript性能
(5)
用set提姆eout来幸免页面失去响应
(6)
用hash-table来优化查找
(7)
当须求设置的体裁很多时设置className而不是直接操作style
(8)
少用全局变量
(9)
缓存DOM节点查找的结果
(10)
幸免选取CSS Expression
(11)
图片预载
(12)
幸免在页面的主心骨布局中应用table,table要等中间的情节完全下载之后才会体现出来,突显比div+css布局慢

31. 前端开发的优化难点
(1)
缩小http请求次数:css spirit,data uri
(2)
JS,CSS源码压缩
(3) 前端模板
JS+数据,收缩是因为HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每便操作本地变量,不用请求,收缩请求次数
(4)
用innerHTML代替DOM操作,收缩DOM操作次数,优化javascript性能
(5)
用setTimeout来幸免页面失去响应
(6)
用hash-table来优化查找
(7)
当需求安装的样式很多时设置className而不是平昔操作style
(8)
少用全局变量
(9)
缓存DOM节点查找的结果
(10)
幸免选取CSS Expression
(11)
图片预载
(12)
幸免在页面的大旨布局中动用table,table要等中间的始末完全下载之后才会展现出来,显示比div+css布局慢

32.
怎么控制网页在互连网传输进度中的数据量
启用GZIP压缩
保持杰出的编程习惯,防止重新的CSS,JavaScript代码,多余的HTML标签和质量

32.
怎么样控制网页在互连网传输过程中的数据量
启用GZIP压缩
保持卓绝的编程习惯,防止双重的CSS,JavaScript代码,多余的HTML标签和性质

33.
Flash、Ajax各自的得失,在动用中什么挑选?
Ajax的优势
(1)
可搜索性
(2)
开放性
(3)
费用
(4)
易用性
(5)
易于付出

33.
Flash、Ajax各自的利弊,在运用中哪些挑选?
Ajax的优势
(1)
可搜索性
(2)
开放性
(3)
费用
(4)
易用性
(5)
易于付出

Flash的优势
(1)
多媒体处理
(2)
兼容性
(3)
矢量图形 比SVG,Canvas优势大过多
(4)
客户端资源调度,比如Mike风,摄像头

Flash的优势
(1)
多媒体处理
(2)
兼容性
(3)
矢量图形 比SVG,Canvas优势大过多
(4)
客户端资源调度,比如迈克风,视频头

 

 

 

 

正文转发自

正文转载自

发表评论

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

网站地图xml地图