WEB笔试题

1.分别写出10个行内标签和5个块级标签(h系列算一个标签)

1. 行内标签：
   <a>标签可定义锚</a>，
   <b>字体加粗</b>，
   <em>定义为强调的内容</em>，
   <i>斜体文本效果</i>，
   <sup>上标/sup>
<sub>下标</sub>，
   <u>下划线</u><ins></ins>，
   <del>删除线/del><s></s>,
   <strong>加粗</strong><b></b>,
   <lable></lable>

2. 块级标签
   h1~h6标签，
   <p>段落</p>，
   <ul>无序列表</ul>，
   <ol>有序列表</ol>，
   <li>有序列表</li>，
   <div><div>
<form>表单</form>,
   <table>表格</table>

2.请写出CSS中几种浏览器的前缀写法

-moz- 火狐等使用Mozilla浏览器引擎的浏览器 ;
-webkit- Safari, 谷歌浏览器等使用Webkit引擎的浏览器;
-o- Opera浏览器(早期);
-ms- Internet Explorer (IE);

3.请写出5个CSS中有兼容问题的属性名称

background-size: 调整背景图片的大小，最低兼容至IE9;
word-wrap；text-overflow；text-shadow；
transition：过渡；
transform：转换；
Animation：动画；
border-radius：圆角；
box-shadow：阴影；
border-image：边框图片；
column-count: 规定元素应该被分隔的列数。
column-gap: 规定列之间的间隔。
column-rule: 设置列之间的宽度、样式和颜色规则

4.请写出JS创建对象的四种方式

一，字面量创建

 var obj={
	键1:值1,
	键2:值2,
	方法名1:function(){},
	方法名2:function(){}
}

二，new 对象创建
new Object();O大写

var obj=new Object(); //创建一个空白对象
//         console.log(obj);
obj.name="小白";
obj.age=12;
obj.show=function () {
	console.log("秀儿同学");
}
obj.walk=function () {
	console.log("走猫步");            
}

三，工厂函数造对象

//工厂函数造对象
function createNewObj(name,age){
	var obj=new Object();
	obj.name=name;
	obj.age=age;
	obj.show=function () {
		console.log("请不要秀");
	}
	obj.walk=function () {
		console.log("朕要巡视了...");
	}
	return obj;
}
var newObj=createNewObj("小白",12);
console.log(newObj);
var newObj1=createNewObj("(●—●)",16);
console.log(newObj1);

//        批量造对象
for(var i=0;i<10;i++){
	var per=createNewObj("哈哈"+i,i+10)
	console.log(per);
}

四，构造函数创建对象

//创建一个构造函数
function Person(name,age){
	this.name=name;
	this.age=age;
	this.show=function () {
		console.log("构造函数对象的show");
	}
	this.walk=function () {
		console.log("构造函数的走路方法");
	}
}

//    根据构造函数创建对象
var per=new Person("小白",12);
console.log(per);
var per1=new Person("小红",18);
console.log(per1);

5.写出五种JS中的兼容问题,以及解决方式(节点访问里面那些算一种)

1.事件对象的获取兼容

onclick=function(event){
    event = event || window.event;
}

2.阻止默认事件的兼容

function prevent(event){
    event = event || window.event;
    if(event.preventDefault){
        event.preventDefault();
    }else {
        event.returnValue = false;
    }
}

3.鼠标到body的距离

function getpageXY（event）{
	return{
		x：scroll().left+event.clientX,
		y: scroll().top+event.clientY
	}
}

4.事件冒泡阻止

function stopBubble(event){
	if(event.stopPropagation){
		event.stopPropagation();
	}else{
		event.cancelBubble=true;
	}
}

5.页面被卷去头部和左侧的距离兼容性封装

function scroll() {
    if (window.pageXOffset!=undefined){
        return{
            left:window.pageXOffset,
            top:window.pageYOffset
        }
    } else{
        return{
        	left:document.documentElement.scrollLeft,
            top:document.documentElement.scrollTop
        }
    }
}

6.写出冒泡排序(要求:四次优化不能少)

var arr=[8,1,5,3,7];
console.log("操作前原数组：",arr);
for(var j=0;j<arr.length-1;j++){
	var boo=true;
	for(var i=0;i<arr.length-1-j;i++){
		if(arr[i+1]){
			boo=false;
			var temp=arr[i];
			arr[i]=arr[i+1];
			arr[i+1]=temp;
		}
		console.log("第"+j+"轮"+"第"+i+"次");
	}
	console.log("本次交换完数组：",arr);
	if(boo){
	//如果本轮完事，没有执行if语句，表示前面没有比后面小的，也就是前面比后面大，那么就是有顺序的了，可停止循环。
		break;
	}
}
console.log("操作后的原数组",arr);

冒泡排序法四次优化
1内层for循环：变量<.length-1;
原因：最后一个数，不能和后面比较，所以最大索引是倒数第二个索引。
2外层for循环：变量<.length-1;
原因：n个数，冒泡（n-1）次就会出现顺序。
3内层for循环：变量<.length-1-外层for循环变量；
原因：每轮冒泡结束后，就会诞生一个最下值，下一轮可少比较一次。
4开闭原则：排出顺序立即停止。

7.请写出将当前日期以YYYY-MM-DD HH:mm:ss打印的代码

例如:今天是2019年1月15日 15点18分25秒 则最后在控制台输出:2019-01-15 15:18:25

var h1=document.getElementsByTagName("h1")[0];
var date;
setDate();
function setDate() {
	date=new Date();
	var year=date.getFullYear();
	var month=date.getMonth();
	var day=date.getDate();
	var week=date.getDay();
	var hour=date.getHours();
	var minute=date.getMinutes();
	var second=date.getSeconds();
	var arr=["日","一","二","三","四","五","六"];
	var str=year+"年"+month+"月"+day+"日 星期"+arr[week]+" "+hour+"小时"+minute+"分钟"+second+"秒";
	h1.innerHTML=str;
}

8.手写数组去重的方法

 //编写一个方法 去掉一个数组的重复元素
var arr= ["c","a","c","z","d","a","x","a","x","a"];
var newArr=[];
arr.forEach(function (item,index,arr) {
//利用indexOf方法 该方法就是找到元素第一次出现的位置
//如果跟当前元素的位置不一样 那么就证明当前元素不是第一次出现了
	if(arr.indexOf(item)==index){
		newArr.push(item);
	}
})
// console.log(arr.indexOf("c"));
 console.log(newArr);```