神族九帝

Appearance

用 js 写一个函数计算出字符串的长度 ​

<!--more-->

GBK 字符集实际长度计算

js
function getStrLeng(str) {
  var realLength = 0;
  var len = str.length;
  var charCode = -1;
  for (var i = 0; i < len; i++) {
    charCode = str.charCodeAt(i);
    if (charCode >= 0 && charCode <= 128) {
      realLength += 1;
    } else {
      //如果是中文则长度加2；
      realLength += 2;
    }
  }
  return realLength;
}
console.log(getStrLeng("ahaak522中文")); //12

utf8 字符集实际长度计算

js
//utf8 字符集实际长度计算
function getStrLeng(str) {
  var realLength = 0;
  var len = str.length;
  var charCode = -1;
  for (var i = 0; i < len; i++) {
    charCode = str.charCodeAt(i);
    if (charCode >= 0 && charCode <= 128) {
      realLength += 1;
    } else {
      // 如果是中文则长度加3
      realLength += 3;
    }
  }
  return realLength;
}

在 JS 中字符串的长度不分中英文字符， 每一个字符都算一个长度，这跟 PHP 里的 strlen()函数就不太一样。PHP 里的 strlen()函数根据字符集把 GBK 的中文每个 2 累加，把 UTF-8 的中文字符每个按 3 累加。主要是为了匹配数据库的长度范围内，比如 GBK 的数据库某字段是 varchar(10)，那么就相当于 5 个汉字长度，一个汉字等于两个字母长度。如果是 UTF8 的数据库则是每个汉字长度为 3

html5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？ ​

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加。

绘画 canvas

用于媒介回放的 video 和 audio 元素

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失； sessionStorage 的数据在浏览器关闭后自动删除

语意化更好的内容元素，比如 article、footer、header、nav、section

表单控件，calendar、date、time、email、url、search

新的技术 webworker, websockt, Geolocation

移除的元素

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

支持 HTML5 新标签：

IE8/IE7/IE6 支持通过 document.createElement 方法产生的标签， 可以利用这一特性让这些浏览器支持 HTML5 新标签， 浏览器支持新标签后，还需要添加标签默认的样式

请描述一下 cookies，sessionStorage 和 localStorage 的区别？ ​

cookies 在浏览器之间来回传递，sessionStorage 和 localStorage 不会，
sessionStorage 和 localStorage 储存空间更大，有更多丰富易用的接口，有各自独立存储的空间，

如何实现浏览器内多个标签页之间的通信? ​

调用 localstorge、cookies 等本地存储方式

添加 删除 替换 插入到某个接点的方法 ​

js
obj.appendChidl();

obj.innersetBefore;

obj.replaceChild;

obj.removeChild;

说一下什么是 javascript 的同源策略？ ​

一段脚本只能读取来自于同一来源的窗口和文档的属性，这里的同一来源指的是主机名、协议和端口号的组合

编写一个 b 继承 a 的方法; ​

js
    function A(name){
        this.name = name;
        this.sayHello = function(){alert(this.name+” say Hello!”);};
    }
    function B(name,id){
        this.temp = A;
        this.temp(name);        //相当于new A();
        delete this.temp;
         this.id = id;
        this.checkId = function(ID){alert(this.id==ID)};
    }

面试常见题目

js
// 小球从一百米落下，每次弹起的高度是上一次的一半，求第十次
var s = 100;
var hight = 100;
for (var i = 2; i < 11; i++) {
  hight /= 2;
  s = s + hight;
}
console.log(hight + " + " + s);

call 和 apply 的区别

js
// 	// call的定义
// 	function add(a,b){
// 		console.log(a+b);
// 	}
// 	function reduce(a,b) {
// 		console.log(a-b);
// 	}
// 	add.call(reduce,3,4);//将add方法运用到reduce,结果为4
// 	// call可以改变this的指向
// 	function b() {
// 		console.log(this);
// 	}
// 	b();//window
// 	b.call();//window
// 	b.call('a',2,3);//a
// 	// 下面看一个复杂点的例子
// 	function Animal() {
// 		this.name = 'animal';
// 		this.showName = function () {
// 			console.log(this.name);
// 		}
// 	}
// 	function Cat() {
// 		this.name = 'cat';
// 	}
// 	var animal = new Animal();
// 	var cat = new Cat();
// 	animal.showName();//结果为animal
// 	animal.showName.call(cat);//原本cat没有showName方法，但是通过call方法将animal的showName方法应用到cat上,因此结果为cat

// 实现继承:
function Animal(name) {
  this.name = name;
  this.showName = function() {
    console.log(this.name);
  };
}
function Cat(name) {
  Animal.call(this, name); //将Animal应用到Cat上，因此Cat拥有了Animal的所有属性和方法
}
var cat = new Cat("Black Cat");
cat.showName(); //浏览器弹出Black Cat
// 区别在于 call 的第二个参数可以是任意类型，而apply的第二个参数必须是数组，也可以是arguments

修改 input 里面的颜色

js

    <input type="text" class="color" placeholder="你好，我会变颜色">
    <input type="text" placeholder="nihao ,hahah ">


    <p class="weilei">我是p</p>

css：

css
input::-webkit-input-placeholder {
  color: red;
}

input::-moz-placeholder {
  color: red;
}
input:-ms-input-placeholder {
  color: red;
}
input::placeholder {
  color: red;
}
input.color::-webkit-input-placeholder {
  color: yellow;
}
/*.weilei:before {
	content: '我是p前面的东西';
	color: blue;
}
.weilei:after {
	content: ' http://www.baidu.com';
}
.weilei {
	color: red;
}*/
/*p:before{
	content:'网站名:';
}
p:after{
	content:'\21E0';
}*/

© 2015-present 神族九帝