翻转字符串
let reverse=(str)=>{
//先将整个字符串打散成一堆字符数组,如何将整个字符数组翻转过来,再重新拼接起来
return str.split('').reverse().join();
}
1.7 数组
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="module">
import {
main
} from "/static/js/index.js";
main();
</script>
</body>
</html>
index.js
let a = [5, 1, 3, 2, 4];
let b = [
1, //变量
"xxx", //变量
['a', 'b', 'c'], //数组
function () { //函数
console.log("Hello World");
return 0;
},
{ name: "xxxx", age: 18 } //对象
];
let main = function () {
console.log(b[3]); //访问一个函数
console.log(b[3]()); //执行函数
//访问对象
console.log(b[4].name);
console.log(b[4]["age"]);
//赋值
b[0] = function () {
console.log("哈哈哈哈");
}
b[0]();
a.sort();
console.log(a);
// 自定义比函数
/*
负数:a<b a放在b的前面
相等:a===b
正数:a>b a放在b的后面
(前 后)
if a>b
b-a<0 a放在b的前面
if a<b
b-a>0 a要放在b的后面
可以理解成,返回正值表示两个参数(a,b)需要交换位置。
*/
a.sort(function (a, b) {
return b - a; //降序
});
console.log(a);
}
export {
main
}
1.8 函数
index.js
let add = (a, b) => {
//返回一个对象
// return {
// name: "xxx",
// age: 18,
// };
//返回一个函数
return () => {
console.log("Hello World");
}
}
let main = function () {
//返回函数定义
console.log(add(1, 2));
//执行返回的函数
console.log(add(3, 4)());
}
export {
main
}
1.9 类
index.js
class MenuSingleQuickGame {
constructor() {
}
}
class MenuSingleSurvival {
constructor() {
}
}
class MenuSingleGoback {
constructor() {
}
}
class MenuSingle {
constructor() {
this.quick_game = new MenuSingleQuickGame();
this.survival = new MenuSingleSurvival();
this.go_back = new MenuSingleGoback();
}
}
1.10 事件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/static/css/index.css">
</head>
<body>
<script type="module">
import {
main
} from "/static/js/index.js";
main();
</script>
<!-- 让元素聚焦的属性:tabindex -->
<div tabindex="0"></div>
<input type="text">
</body>
</html>
index.css
div {
width: 300px;
height: 300px;
background-color: lightblue;
}
index.js
//取出第一个div
let div = document.querySelector('div');
let input = document.querySelector('input');
let main = function () {
//鼠标
//给元素绑定事件addEventListener有两个参数
// 第一个参数表示事件类型用字符串来表示
// 第二个参数是函数参数,用来定义事件触发的时候需要执行什么函数
//绑定的函数会默认传一个参数event,even.type可以返回触发的事件类型
// event.buttom可以返回按的是哪个键
div.addEventListener('click', function (event) {
console.log(event.type, event.button);
});
//键盘
//获取按的是什么健event.code
//eveevent.shiftKey,event.ctrlKey、event.altKey表示当前是不是正在按shift、ctrl、alt键,如果是就是true,不是就是false
input.addEventListener('keydown', function (event) {
console.log(event.type, event.code, event.shiftKey, event.ctrlKey, event.altKey);
});
//窗口
window.addEventListener('resize', function (e) {
console.log(e.type);
});
}
export {
main
}