一、填空题
1、JS中的数据类型有哪些 Number,Null,undefined,String,boolean,Array,Function,Object；(8种)
2、JS中强制类型转换为 number 类型的方法有：Number() parseInt() parseFloat()
3、创建一个子节点 createElement ，插入一个子节点 appendChild ，在已有元素之前插入节点 insertBefore ，删除子节点 removeChild 。
4、获取元素的第一个子节点 firstChild ，获取元素的最后一个子节点 lastChild ，上一个兄弟节点 previousSibling ，下一个兄弟节点 nextSibling 。
5、获取所有子节点 childNodes ，获取父级节点 parentNode 。
6、常用运算符有哪五大类 逻辑运算符，条件运算符，赋值运算符，比较运算符，算术运算符 。
7、下面代码执行结果依次为： undefined，1 。
var a = 1;
function fn1(a){alert(a); a = 2;}
fn1();
alert(a);
8、css常见布局单位有 px,% ,rem,em (3种）
9、把字符串按照指定字符分割并返回数组的方法为： splice()；大写字母转小写字母的方法为： toLowerCase() ；小写字母转大写字母的方法为： toUpperCase() ；查询字符在字符串中位置的方法 indexOf() ；返回指定位置字符串的方法 chatAt() 。
10、在数组最前面插入一项的方法为： unshift() ；删除数组最后一项的方法为： pop() ；在数组最后面插入一项的方法为： push()；删除数组最前面一项的方法为： shift() ；删除、添加、替换数组项的方法为： splice() ；颠倒数组顺序的方法为： reverse() ；合并多个数组并返回新数组的方法 concat() 。
11、有x=15，y=64，写出生成x到之间的随机数的方法: Math.random()*49+15 。
12、JS中的多次执行的定时器为： setInterval() ,只执行一次的定时器为： setTimeout() ,清除定时器的方法： clearInterval(), clearTimeout()
13、通过id名获取元素的方法： document.getElementById() 。
14、获取滚动条滚动高度的方法： 对象.onscroll = function(){console.log(this.scrollTop);} 。
15、JS中绑定事件的方法： 对象.on+事件名 = 事件处理函数 ；解除事件绑定的方法： 对象.on+事件名 = null 。
16、JS获取焦点事件为： onfocus() ；失去焦点事件为： onblur() 。
17、对数字向上取整的方法： Math.ceil() ；向下取整的方法： Math.floor() ；四舍五入的方法： Math.round() 。
18、表格元素中tbody、tr、td的含义分别为： 表格内容 、 表格的行 、 表格的单元格 。
19、var arr=[{name:’张三’,age:25}]，怎么读取数组中的“张三” : arr["0"].name 。
20、鼠标右键菜单事件： 对象.oncontextmenu(e){e.preventDefault()} 。
21、字符串转换成数组的方法是 split() 。
22、浮动可以使元素 是 （是或否）脱离文档流。
23、html5中新增标签有 <canvas><section><frame><footer><header> （5种）
24、html5中input新增属性有 url,range,date,color,email,search （5种）
25、css3中3D转换属性有 rotate(),matrix(),scale(),skew(),translate() （5种）
26、css选择器中+是 相邻兄弟选择器 ,>是 子代选择器 ,~是 通用兄弟选择器 , ,是 群组选择器 ,空格是 后代选择器
27、jq中显示隐藏的方法是 show(),hide()
28、jq中添加样式方法是 attr()
29、jq中删除样式方法是 removeAttr()
30、jq中设置单个样式语法结构 $().css(‘属性名’,’属性值’) 多个样式语法结构 $().css({‘属性名’:’属性值’, ‘属性名’:’属性值’})
二、根据要求写出对应代码
1、封装通过id获取元素的方法：（js方法）
function getId(id){
return document.getElementById(id);
}
2、获取当前日期（输出格式：年-月-日 星期 时：分：秒）；（js方法）
function getTimes(date){
var year = date.getFullYear();
var month = date.getMonth()+1;
var day = date.getDate();
var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
month = month < 10 ? "0" + month : month;
day = day < 10 ? "0" + day : day;
hour = hour < 10 ? "0" + hour : hour;
minute = minute < 10 ? "0" + minute : minute;
second = second < 10 ? "0" + second : second;
return year+"-"+month+"-"+day+" "+week[date.getDay()]+" "+hour+":"+minute+":"+second;
}
console.log(getTimes(new Date()));
3、把数组 arr=[1,23,12,7,3,28,2,14]按正序的方式排序；
// sort
var arr = [12,4,52,2,14,28,7];
function func(a,b){
return a-b;
}
console.log(arr.sort(func));
// 选择排序
function select(arr){
for (var i = 0;i<arr.length-1;i++) {
for (var j = j + 1;j < arr.length;j++) {
if(arr[i] > arr[j]){
var temp = arr[i];
arr[i] = arr[j];
arr[j] = temp;
}
}
}
return arr;
}
console.log(select(arr));
// 冒泡排序
function third(arr){
for (var i = 0;i<arr.length-1;i++) {
for (var j = 0;j<arr.length-1-i;j++) {
if(arr[j] > arr[j+1]){
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
}
return arr;
}
console.log(third(arr));
4、写出清除浮动的影响四种方法
1、 给父级元素加高
2、 在浮动末尾加一个div，设置clear:both
3、 给父级设置伪类after,zoom：
.clearfloat: after{ clear: both; overflow: hidden; display: block; current:””;height:0}
.clearfloat:{zoom:1}
4、给父级元素设置overflow:hidden
5、Css3中有几种渐变，分别是？
线性渐变：background-image: linear-gradient(red,green);
径向渐变：background-image: radial-gradient(red,pink);
6、实现点击按钮淡入淡出显示一个div盒子（jq方法）
<style>
.box {
width: 200px;
height: 200px;
background-image: radial-gradient(red, pink);
}
</style>
<script src="js/jquery-1.12.3.min.js"></script>
</head>
<body>
<button class="btn">点击切换</button>
<div class="box"></div>
</body>
<script>
$(document).ready(function() {
$('.btn').click(function() {
$('.box').fadeToggle(3000)
})
})
</script>
7、实现让一个200*200的div垂直水平居中
<style>
.box {
width: 200px;
height: 200px;
background-color: skyblue;
position: absolute;
left:50%;
top:50%;
margin:-100px 0 0 -100px;
}
</style>
<body>
<div class="box"></div>
</body>
8、实现一个距离10月1日以秒倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>距离2021年10月01日还有<span class="span"></span>秒</p>
</body>
<script>
var span = document.getElementsByClassName("span")[0];
var date = new Date();
var date1 = new Date(2021,10,01,00,00,00);
var second = (date1 - date) / 1000;
function time(){
second--;
span.innerHTML = second;
}
time();
setInterval(time,1000);
</script>
</html>
9、使用css3中动画画一个W
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
width: 40px;
height: 300px;
margin: 300px auto 100px 150px;
transform: rotate(-45deg);
position: relative;
}
.box2{
width: 40px;
height: 300px;
transform: rotate(90deg);
position: absolute;
left: 128px;
top: 128px;
}
.box3{
width: 40px;
height: 300px;
transform: rotate(0deg);
position: absolute;
left: 259px;
top: 259px;
}
.box4{
width: 40px;
height: 300px;
transform: rotate(90deg);
position: absolute;
left: 389px;
top: 389px;
}
.circle{
width: 25px;
height: 25px;
background-color: transparent;
border-radius: 50%;
border: green dotted 2px;
position: absolute;
left: 198px;
top: 330px;
animation: tranW 3s linear infinite;
}
@keyframes tranW{
0%{
margin-top: 0px;
margin-left: 0px;
}
25%{
margin-top: 200px;
margin-left:200px;
}
50%{
margin-top: 0px;
margin-left:400px;
}
75%{
margin-top: 200px;
margin-left:570px;
}
100%{
margin-top: -120px;
margin-left:900px;
}
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
<div class="circle"></div>
</body>
</html>
10、使用jq制作简易版计算器（+ - * / 清除）
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器</title>
<style type="text/css">
.div {
border: green 1px;
border-style: solid;
width: 300px;
text-align: center;
}
</style>
</head>
<body>
<form>
<div class="div">
<div>第一个数:<input type="text" id="num1"></div>
<div>第二个数:<input type="text" id="num2"></div>
<div>
<input type="button" value=" + " id="jia">
<input type="button" value=" - " id="jian">
<input type="button" value=" * " id="cheng">
<input type="button" value=" / " id="chu"></div>
<div>结果:<input type="text" id="reset" /></div>
</div>
</form>
</body>
<script src="js/jquery-1.12.3.min.js" type="text/JavaScript"></script>
<script>
$(document).ready(function() {
$("#jia").click(function() {
var num1=parseFloat($("#num1").val());
var num2=parseFloat($("#num2").val());
$("#reset").val(num1+num2);
});
$("#jian").click(function() {
var num1=parseFloat($("#num1").val());
var num2=parseFloat($("#num2").val());
$("#reset").val(num1-num2);
});
$("#cheng").click(function() {
var num1=parseFloat($("#num1").val());
var num2=parseFloat($("#num2").val());
$("#reset").val(num1*num2);
});
$("#chu").click(function() {
var num1=parseFloat($("#num1").val());
var num2=parseFloat($("#num2").val());
$("#reset").val(num1/num2);
});
});
</script>
</html>