第二阶段—JavaScript基础编程题
第二阶段—JavaScript基础
概念
1.事件监听的好处
1.可以决定事件流传递是冒泡还是捕获
2.可以为相同的元素，多次绑定相同的事件
2.取消事件的绑定
a.取消JS的事件绑定
document.onclick = function(){
console.log("heihei");
}
document.onclick = null;
b.事件监听取消绑定
document.addEventListener("click",fun);
document.removeEventListener("click",fun);
3.事件委托
如果要为所有子元素绑定相同的事件，可以利用事件冒泡的原理，将事件绑定在父元素身上，子元素触发事件，通过冒泡冒泡到父元素身上，从而实现控制子元素的行为
事件委托的好处
- 若要批量绑定子元素，可以只绑定在父元素上，提高程序效率
- 可以为未来添加的子元素绑定事件
注意：
事件委托是不可以直接使用this的，this指向父元素
- 必须获取真实的操作源
var e = evt || event;
- 或者真实的事件源
var target = e.srcElement || e.target;
4.json对象和字符串的相互转换
json字符串转对象
var stuStr = '{"name":"小明","age":18}';
var stuJson = JSON.parse(stuStr);
//转换时需要将JSON对象的属性用双引号引起来
json对象转换字符串
var stuJson = {"name":"小明","age":18};
var stuStr = JSON.stringify(stuJson);
思考题
1.冒泡排序
var t = 0;
for(var i=0; i<arr.length-1; i++){
for(var j=0; j<arr.length-i-1; j++){
if(arr[j]<arr[j+1]){
t = arr[j];
arr[j] = arr[j+1];
arr[j+1] = t;
}
}
}
console.log(arr);
2.选择排序
// 4.选择排序
function xuanZe(arr) {
var t;
for(var i = 0; i < arr.length - 1; i++) {
for(var j = i + 1; j < arr.length; j++) {
if (arr[i] > arr[j]) {
t = arr[i];
arr[i] = arr[j];
arr[j] = t;
}
}
}
return arr;
}
arr3 = [23,25,10,4,8,9];
console.log(xuanZe(arr3));
3.数组去重
第一种
var a = [1,1,2,2,3,3,4,4,5,5,1];
var b = [];
for(var i=0; i<a.length; i++){
if(b.indexOf(a[i]) == -1){
b.push(a[i]);
}
}
console.log(a);
第二种
let arr = [1,2,3,1,2,5,5,3,4];
let set = new Set(arr);
//Array.from将容器转换为数组
arr = Array.from(set);
console.log(arr);
4.数组逆序
var arr = [5,6,7,4,8,3,9,2,0,1];
var t;
var len = arr.length;
for(var i=0; i<len/2; i++){
t = arr[i];
arr[i] = arr[len-i-1];
arr[len-i-1] = t;
}
console.log(arr);
5.字符串逆序
// 1.将字符串按照单词进行逆序，空格作为划分单词的唯一条件
//传入:”Welome to Beijing”改为 “Beijing to Welcome”
function reverse(arr) {
var a = arr.split(' ').reverse().join(' ');
return a;
}
console.log(reverse('Welome to Beijing'));
6.敏感词过滤
//例：“今天有个傻子在旁边大喊大叫，影响了我的操作。”，
//过滤后“今天有个*在旁边大喊大叫，影响了我的*作。”。
//思路：把敏感词汇放在数组里：var arr=["傻子","tmd","nnd"];
function filter(str) {
var a = ["傻子","tmd","nnd","操"];
for(var j = 0; j < a.length; j++) {
str = str.replace(a[j],'*');
}
return str;
}
console.log(filter("今天有个傻子在旁边大喊大叫，影响了我的操作。tmd"));
7.对称数组
// 传入一个数组，起始元素类型与个数皆未知，返回新数组，由原数组的元素正序反序拼接而成
// 传入[“One”, “Two”,”Three”] 返回[“One”, “Two”, “Three”,”Three”,”Two”, “One”]
function concat(arr) {
var str1 = arr.join();
var str2 = arr.reverse().join();
var str = str1 + ',' + str2;
return str.split();
}
console.log(concat(["one","two","three"]));
8.数字字母混合验证码。（例：6yF3）
function validate() {
var a="";
var c="";
var b="";
var d = "";
for(var i=0;i<4;i++){
a += String.fromCharCode(getRandomIntInclusive(97,122));
b += String.fromCharCode(getRandomIntInclusive(65,90));
c += getRandomIntInclusive(0,9);
}
d = a+b+c;
var e = "";
for(var j=0;j<4;j++){
e += d.charAt(getRandomIntInclusive(0,11))
}
console.log(e)
}
validate();
9.统计字符串中每个字符的个数
// 6.统计字符串中每个字符的个数。(难题)
//（原始字符串是：“aabccdeefff”,结果是：a2 b1 c2 d1 e2 f3）
var str = "aabccdeefff";
function count(str) {
var obj = {};
for(var i = 0; i < str.length; i++){
var attr = str[i];
if(obj[attr]){
obj[attr]++;
}else{
obj[attr] = 1
}
}
console.log(obj)
}
count(str);
10.按序从数组插入元素
/*
提高1：有一个从小到大排序好的数组，现输入一个数字，
要求按照原来的规律插入数组中。1 2 6 9 11
*/
var arr = [1, 2, 6, 9, 11]
var num = 5;
for (var i = 0; i < arr.length; i++) {
if (num < arr[i]) {
arr.splice(i, 0, num);
break;
}
}
console.log(arr);
11.日期格式化
<script>
function dateToString(date){
var _y = date.getFullYear();
var _m = toTwo(date.getMonth()+1);
var _d = toTwo(date.getDate());
var _h = toTwo(date.getHours());
var _mm = toTwo(date.getMinutes());
var _s = toTwo(date.getSeconds());
var _w = date.getDay();
var week = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]
var str = _y+"年"+_m+"月"+_d+"日 "+_h+":"+_mm+":"+_s+" "+week[_w];
return str;
}
function toTwo(v){
return v>10?v:"0"+v;
}
var date = new Date();
console.log(dateToString(date));
//toLocaleString():按照本地日期格式打印
console.log(date.toLocaleString());
</script>
12.动态创建表格
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
table {
width: 300px;
height: 300px;
margin: 50px auto 0;
background-color: pink;
border-collapse: collapse;
}
tr,td {
border: 5px solid salmon;
}
</style>
</head>
<body>
</body>
</html>
<script type="text/javascript">
var Table = document.createElement('table');
document.body.appendChild(Table);
for (var i = 0; i < 3; i++) {
var tr = document.createElement('tr');
Table.appendChild(tr);
for (var j = 0; j < 3; j++) {
var td = document.createElement('td');
tr.appendChild(td);
}
}
</script>
13.Tab栏切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
li {
list-style-type: none;
}
.tab {
width: 800px;
margin: 10px auto;
}
ul {
display: flex;
}
li {
width: 25%;
height: 39px;
line-height: 39px;
text-align: center;
border: 1px solid #ccc;
background-color: #f1f1f1;
}
.current {
background-color: orangered;
color: white;
}
.content {
display: flex;
width: 800px;
height: 300px;
overflow: hidden;
margin: auto;
}
.content .item {
flex-shrink: 0;
font-size: 30px;
width: 100%;
height: 100%;
display: none;
text-align: center;
line-height: 300px;
background-color: powderblue;
}
</style>
</head>
<body>
<div class="tab">
<ul>
<li class="current">电影</li>
<li>电视剧</li>
<li>综艺</li>
<li>娱乐</li>
</ul>
<div class="content">
<div class="item" style="display: block;">
这是电影专栏
</div>
<div class="item">
这是电视剧专栏
</div>
<div class="item">
这是综艺专栏
</div>
<div class="item">
这是娱乐专栏
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
// 1.选项卡
var lis = document.querySelectorAll('li');
var items = document.querySelectorAll('.item');
// console.log(lis);
// console.log(items);
for (var i = 0; i < lis.length; i++) {
lis[i].index = i;
lis[i].onclick = function() {
for (var j = 0; j < lis.length; j++) {
lis[j].className = '';
}
this.className = 'current';
for (var j = 0; j < items.length; j++) {
items[j].style.display = 'none';
}
items[this.index].style.display = 'block';
}
}
</script>
14.鼠标拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 300px;
background-color: #eee;
position: absolute;
top: 0;
left: 0;
}
h2 {
width: 100%;
height: 10%;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box">
<h2></h2>
</div>
</body>
</html>
<script type="text/javascript">
var Box = document.querySelector('.box');
var H = document.querySelector('h2');
var flag = true;
var Left;
var Top;
const Width = Box.offsetWidth;
const Height = Box.offsetHeight;
Box.onmousedown = function(evt) {
var e = evt || event;
var X = e.offsetX;
var Y = e.offsetY;
// console.log(offsetX)
// console.log(offsetY)
document.onmousemove = function(evt) {
var e = evt || event;
Left = e.pageX - X;
Top = e.pageY - Y;
// console.log(e.pageX)
// console.log(e.pageY)
if (Left < 0) {
Left = 0;
}
if (Left > window.innerWidth - Box.offsetWidth) {
Left = window.innerWidth - Box.offsetWidth;
}
if (Top < 0) {
Top = 0;
}
if (Top > window.innerHeight - Box.offsetHeight) {
Top = window.innerHeight - Box.offsetHeight;
}
Box.style.left = Left + 'px';
Box.style.top = Top + 'px';
}
document.onmouseup = function() {
document.onmousemove = null;
}
H.ondblclick = function() {
if (flag) {
flag = !flag;
Box.style.left = '0';
Box.style.top = '0';
Box.style.width = window.innerWidth + 'px';
Box.style.height = window.innerHeight + 'px';
}else {
flag = !flag;
Box.style.left = Left + 'px';
Box.style.top = Top + 'px';
Box.style.width = 300 + 'px';
Box.style.height = 300 + 'px';
}
}
}
</script>
15.封装拖拽效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.box {
width: 300px;
height: 300px;
background-color: #eee;
position: absolute;
top: 0;
left: 0;
}
h2 {
width: 100%;
height: 10%;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box">
<h2></h2>
</div>
</body>
</html>
<script type="text/javascript">
// 1. 封装拖拽效果
var Box = document.querySelector('.box');
var H = document.querySelector('h2');
function boxMove(Box,H,Box_offsetWidth,Box_offsetHeight) {
var flag = true;
var Left;
var Top;
// 鼠标按下事件
Box.onmousedown = function(evt) {
var e = evt || event;
// 鼠标按下获取鼠标在盒子的位置，因为鼠标在盒子的位置是不变的
var X = e.offsetX;
var Y = e.offsetY;
// 鼠标移动事件
document.onmousemove = function(evt) {
if (!flag) {
return false;
}
var e = evt || event;
Left = e.pageX - X;
Top = e.pageY - Y;
if (Left < 0) {
Left = 0;
}
if (Left > window.innerWidth - Box_offsetWidth) {
Left = window.innerWidth - Box_offsetWidth;
}
if (Top < 0) {
Top = 0;
}
if (Top > window.innerHeight - Box_offsetHeight) {
Top = window.innerHeight - Box_offsetHeight;
}
Box.style.left = Left + 'px';
Box.style.top = Top + 'px';
}
// 鼠标抬起事件
document.onmouseup = function() {
// 鼠标抬起，取消绑定的鼠标移动事件
document.onmousemove = null;
}
H.ondblclick = function() {
if (flag) {
flag = !flag;
Box.style.left = '0';
Box.style.top = '0';
Box.style.width = window.innerWidth + 'px';
Box.style.height = window.innerHeight + 'px';
}else {
flag = !flag;
Box.style.left = Left + 'px';
Box.style.top = Top + 'px';
Box.style.width = Box_offsetHeight + 'px';
Box.style.height = Box_offsetHeight + 'px';
}
}
}
}
boxMove(Box,H,Box.offsetWidth,Box.offsetHeight);
</script>
16.全选全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span>请选择你的爱好：</span><br>
<div>
<input type="checkbox" name="" id="" value="" />全选/全不选<br>
</div>
<div class="hobby">
<input type="checkbox" name="" id="" value="" />打篮球
<input type="checkbox" name="" id="" value="" />踢足球
<input type="checkbox" name="" id="" value="" />上网
<input type="checkbox" name="" id="" value="" />写代码
<input type="checkbox" name="" id="" value="" />听音乐
</div>
<div class="btn">
<input type="button" name="" id="" value="全选" />
<input type="button" name="" id="" value="全不选" />
<input type="button" name="" id="" value="反选" />
</div>
</body>
</html>
<script type="text/javascript">
var flag = false;
var num = 0;
var Div = document.querySelector('div');
var selectAll = Div.firstElementChild;
var Hobbys = document.querySelector('.hobby').children;
// console.log(Hobbys);
var btnAll = document.querySelector('.btn').firstElementChild;
var btnNo = document.querySelector('.btn').children[1];
var btnDiff = document.querySelector('.btn').lastElementChild;
// 全选/全不选功能
function selectHobby(flag) {
for(var i = 0; i < Hobbys.length; i++){
Hobbys[i].checked = !flag;
}
}
// 判断是否需要勾选全选复选框
function isSelectAll() {
num = 0;
for(var i = 0; i < Hobbys.length; i++){
if (Hobbys[i].checked == true) {
num++;
}
}
console.log(num)
if (num == Hobbys.length) {
selectAll.checked = true;
}else {
selectAll.checked = false;
}
}
// 判断全选复选框是否选中
selectAll.onclick = function() {
selectHobby(flag);
isSelectAll();
flag = !flag;
}
// 点击全选按钮
btnAll.onclick = function() {
selectAll.checked = true;
selectHobby(false);
}
// 点击全不选按钮
btnNo.onclick = function() {
selectAll.checked = false;
selectHobby(true);
}
//点击反选按钮
btnDiff.onclick = function() {
for (let i = 0; i < Hobbys.length; i++) {
Hobbys[i].checked = !Hobbys[i].checked;
console.log(Hobbys[i].checked,i);
}
isSelectAll();
}
// 点击单个按钮，判断是否需要改变全选复选框
for (let i = 0; i < Hobbys.length; i++) {
Hobbys[i].onclick = function() {
isSelectAll();
}
}
</script>
17.全选/全不选改进
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<span>请选择你的爱好</span><br>
<input type="checkbox" name="" class="selectAll" value="" />全选/全不选<br>
<input type="checkbox" name="" class="sel" value="" />打篮球<br>
<input type="checkbox" name="" class="sel" value="" />踢足球<br>
<input type="checkbox" name="" class="sel" value="" />上网<br>
<input type="checkbox" name="" class="sel" value="" />写代码<br>
<input type="checkbox" name="" class="sel" value="" />听音乐<br>
<input type="button" name="" class="btn" value="全选" />
<input type="button" name="" class="btn" value="全不选" />
<input type="button" name="" class="btn" value="反选" />
</body>
</html>
<script type="text/javascript">
var selectAll = document.querySelector('.selectAll');
var Sels = document.querySelectorAll('.sel');
var Btns = document.querySelectorAll('.btn');
var flag = false;
var num;
// 实现全选/全不选功能
function isSelectAll() {
for (let i = 0; i < Sels.length; i++) {
Sels[i].checked = !flag;
}
}
// 判断全选/全不选按钮是否选中
function isChecked() {
num = 0;
for(var i = 0; i < Sels.length; i++){
if (Sels[i].checked == true) {
num++;
}
}
// console.log(num)
if (num == Sels.length) {
selectAll.checked = true;
flag = true;
}else {
selectAll.checked = false;
flag = false;
}
}
// 全选/全不选复选框
selectAll.onclick = function() {
isSelectAll();
flag = !flag;
}
// 全选按钮
Btns[0].onclick = function() {
for (let i = 0; i < Sels.length; i++) {
Sels[i].checked = true;
flag = true;
selectAll.checked = flag;
}
}
// 全不选按钮
Btns[1].onclick = function() {
for (let i = 0; i < Sels.length; i++) {
Sels[i].checked = false;
flag = false;
selectAll.checked = flag;
}
}
// 反选按钮
Btns[2].onclick = function() {
for (let i = 0; i < Sels.length; i++) {
Sels[i].checked = !Sels[i].checked;
}
isChecked();
}
// 单个按钮点击事件
for (let i = 0; i < Sels.length; i++) {
Sels[i].onclick = function() {
isChecked();
}
}
</script>
18.兼容性
function fun1(evt) {
var e=evt||event;
}
function fun2(evt) {
var e=evt||event;
e.stopPropagation?e.stopPropagation():e.cancelBubble=true;
}
function fun3(evt) {
var e=evt||event;
e.preventDefault? e.preventDefault():e.returnValue=false;
}
function fun4(evt) {
var e=evt||event;
var key = e.keycode||e.which||e.charcode;
}
function fun5() {
var _top=document.body.scrollTop||document.documentElement.ScrollTop;
}
function fun6(evt) {
var e=evt||event;
var target = e.srcElement || e.target;
}
19.敏感词过滤
var keywords=["阿扁","呵呵","bcc"];
$("input[type=text]").on("blur",function(){
_filter_method($(this));
});
$("textarea").on("blur",function(){
_filter_method($(this));
});
function _filter_method(obj){
//获取文本输入框中的内容
var value = $(obj).val();
//遍历敏感词数组
for(var i=0;i<keywords.length;i++){
//全局替换
var reg = new RegExp(keywords[i],"g");
//判断内容中是否包括敏感词
if(value.indexOf(keywords[i])!=-1){
var result = value.replace(reg,"**");
value = result;
$(obj).val(result);
}
}
}
20.深浅拷贝
对象深拷贝：
function copyObj(obj){
let newObj={};
for(let key in obj){
if(typeof obj[key] =='object'){//如:key是wife,引用类型,那就递归
newObj[key] = copyObj(obj[key])
}else{//基本类型,直接赋值
newObj[key] = obj[key];
}
}
return newObj;
}
数组深拷贝：
核心思想就是：循环遍历，将旧数组里的值添加到新数组里面
浙公网安备 33010602011771号