前端面试题
3.编写JavaScript脚本生成0~7之间的随机整数(包括0与7)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 id="randomNum"></h1>
<h2>3.编写JavaScript脚本生成0~7之间的随机整数(包括0与7)</h2>
<p>Math.random()产生的伪随机数介于 0 和 1 之间(含 0,不含 1),也就是返回值可能为0,但总是小于1</p>
<script>
var oRandomNum = document.getElementById('randomNum');
oRandomNum.innerHTML = Math.floor(Math.random()*8);
</script>
</body>
</html>
4.var i = 2.1; alert(i>>>0); 弹出来的是什么?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>4.var i = 2.1; alert(i>>>0); 弹出来的是什么?</h2>
<script>
var i = 2.1;
alert(i>>>0);
</script>
</body>
</html>
弹出来的是2
5这段代码输出的结果是？
function MyObj(){
this.p.pid++;
}
MyObj.prototype.p = {"pid": 0};
MyObj.prototype.getNum = function(){
return this.p.pid + num;
}
var _obj1 = new MyObj(); //1
var _obj2 = new MyObj(); //2
console.log(_obj1.getNum(1) + _obj2.getNum(2));
2 + 1 2 + 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre>
function MyObj(){
this.p.pid++;
}
MyObj.prototype.p = {"pid": 0};
MyObj.prototype.getNum = function(){
return this.p.pid + num;
}
var _obj1 = new MyObj(); //1
var _obj2 = new MyObj(); //2
console.log(_obj1.getNum(1) + _obj2.getNum(2));
2 + 1 2 + 2
</pre>
<script>
function MyObj(){
this.p.pid++;
}
MyObj.prototype.p = {"pid": 0};
MyObj.prototype.getNum = function(num){
return this.p.pid + num;
}
var _obj1 = new MyObj();
var _obj2 = new MyObj();
console.log(_obj1.getNum(1) + _obj2.getNum(2));
</script>
</body>
</html>
7. var a = document.getElementsByTagName('a');
for(var i = 0; i < a.length; i++){
a[i].onclick = function(){
alert(i);
}
}
本程序要完成的功能是: 点击页面的超链接时,弹出该链接的编号.
请问该程序执行后,点击页面中的超链接时,会弹出什么值?
然后修改这段代码(至少提供3种方式)来达到预期效果.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
text-decoration: none;
border: 1px solid #f0f;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
background: #f0f0f0;
margin-right: 20px;
display: inline-block;
}
</style>
</head>
<body>
<pre>
var a = document.getElementsByTagName('a');
for(var i = 0; i < a.length; i++){
a[i].onclick = function(){
alert(i);
}
}
本程序要完成的功能是: 点击页面的超链接时,弹出该链接的编号.
请问该程序执行后,点击页面中的超链接时,会弹出什么值?
然后修改这段代码(至少提供3种方式)来达到预期效果.
</pre>
<a href="">0</a>
<a href="">1</a>
<a href="">2</a>
<script>
// 法一:
var a = document.getElementsByTagName('a');
for(var i = 0; i < a.length; i++){
(function(i){
a[i].onclick = function(){
alert(i);
}
})(i)
}
// 法二:
/*var a = document.getElementsByTagName('a');
for(var i = 0; i < a.length; i++){
a[i].onclick = (function(i){
return function(){
alert(i);
}
})(i);
}*/
// 法三:
/*var a = document.getElementsByTagName('a');
for(var i = 0; i < a.length; i++){
a[i].index = i;
a[i].onclick = function(){
alert(this.index);
};
}*/
</script>
</body>
</html>
8.编写一个类,类中定义如下属性和方法:
共有属性和共有方法,共有静态属性和共有静态方法,私有属性和私有方法,
特权属性和特权方法,静态属性和静态方法.
然后,在代码中通过注释的形式注明上述每个属性和方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h2{padding: 50px;}
</style>
</head>
<body>
<h2>8.编写一个类,类中定义如下属性和方法:
共有属性和共有方法,共有静态属性和共有静态方法,私有属性和私有方法,
特权属性和特权方法,静态属性和静态方法.
然后,在代码中通过注释的形式注明上述每个属性和方法.</h2>
<a href="http://jingyan.baidu.com/article/d5c4b52bc2f71dda570dc575.html">详解</a>
<script>
//公有属性和公有方法
function User(name, age){
this.name = name; //公有属性
}
User.prototype.getName = function(){ //公有方法
return this.name;
}
var user = new User("李小龙", "32");
console.log(user.getName()); //李小龙
//私有属性和方法
function User(name, age){
var name = name; //私有属性
var age = age;
function alertAge(){ //私有方法
alert(age);
}
alertAge();
}
var user = new User("林青霞", "52");
//静态属性和方法
/*在php中，无需实例化就可以调用的方法就叫静态方法，js也一样，
*无需实例化，即用new操作符实化对象，就可调用对象的方法和属性。
*/
function User(){}
User.age = 18; //静态属性
User.myname = '小芳';
User.getName = function(){
return this.myname; //如果这里使用this.name,返回的将是User,所以改用了myname
}
console.log(User.getName()); //林青霞
//特权方法
function User(name, age){
var name = name; //私有属性
var age = age;
this.getName = function(){ //特权方法
return name; //私有属性个方法不能使用this调用
}
}
var user = new User('奶茶妹',22);
console.log(user.getName()); //奶茶妹
</script>
</body>
</html>
9.编写一个方法,求2个字符串的最长公共子串的长度.比如 "sohu.com" 和 "blog.souhu"的最长公共子串是"sohu", 长度为4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="sweetalert/sweetalert.css">
</head>
<body style="margin: 0">
<h2 style="width:830px; font-size:30px; text-shadow: 1px 1px 2px #000; color: #fff; margin: 20px auto; word-break: break-all;">9.编写一个方法,求2个字符串的最长公共子串的长度.比如 "sohu.com" 和 "blog.souhu"的最长公共子串是"sohu", 长度为4</h2>
<script src="sweetalert/jquery-1.11.3.js"></script>
<script src="sweetalert/sweetalert.min.js"></script>
<script>
function getMaxComStr(str1, str2){
var shorter = (str1.length >= str2.length) ? str2 : str1;
var longer = (shorter == str1) ? str2 : str1;
var len = shorter.length;
var comStr = '';
var comStrLen = 0;
for(var i = len; i>0; i--){
for(var j = 0; j<len+1; j++){
var str = shorter.substring(i, j);
if(longer.indexOf(str) != -1 && str.length > comStrLen){
comStr = str;
comStrLen = str.length;
}
}
}
return '最长公共子串是:' + comStr + ';长度为:' + comStrLen;
}
swal({
title: '来自某公司offer请求',
text: getMaxComStr('www.baidu.com/index.html','music.baidu.com/index.php'),
html: true,
imageUrl: '1.gif',
//timer: 3000,
confirmButtonText: '接受',
confirmButtonColor: '#6435c9',
closeOnConfirm: false,
showCancelButton: true,
cancelButtonText: '拒绝',
closeOnCancel: false,
}, function(isConfirm){
if(isConfirm){
swal('聘请成功', 'Work hard to overcome the rich second generation', 'success');
}
else{
swal('未录用', 'Sorry, you need to increase the front-end development skills', 'error');
}
});
</script>
</body>
</html>
