page: 📄 jS语法相关：数据类型、日期类型、文件读取

public/verify.json

@@ -1 +1 @@
-{"version":1721883990967}
+{"version":1722474202768}

src/views/test/data-type/index.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+
+const testTypeOf = () => {
+	// 测试类型
+	const message = 'Hello world';
+	console.log(typeof message);
+
+	const num1 = 25;
+	const num2 = 20;
+	const num3 = 36;
+
+	// 按位非
+	console.log(~num1, ~num2, ~num3); // -26 -21 -37
+
+	// 按位与
+	console.log(25 & 3, 36 & 6, 20 & 1, 30 & 6); // 1 4 0 6
+
+	// 按位或
+	console.log(25 | 3, 20 | 1, 30 | 1, 30 | 2); // 27 21 31 30
+
+	// 按位异或
+	console.log(25 ^ 3, 26 ^ 3, 30 ^ 1, 32 ^ 2); // 26 25 31 34
+
+	// 左移
+	console.log(2 << 5, 6 << 2, 2 << 3); // 64 3072 16
+
+	// 右移
+	console.log(2 >> 1, 4 >> 0, 12 >> 2, 26 >> 1); // 1 4 3 13
+
+	// 无符号右移
+	console.log(2 >> 2, 24 >> 1, 20 >> 1); // 0 12 10
+
+	// 指数操作符
+	console.log(2 ** 2, 3 ** 2, 6 ** 2, 3 ** 3); // 4 9 36 27
+};
+
+onMounted(() => {
+	testTypeOf();
+});
+</script>
+
+<template></template>
+
+<style lang="scss" scoped></style>

src/views/test/date-type/index.vue

@@ -0,0 +1,51 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+
+const dateTest = async () => {
+	// 当前时间
+	const date = new Date();
+	console.log(`当前时间：${date}`); // Thu Aug 01 2024 09:33:47 GMT+0800 (中国标准时间)
+
+	// 当前时间戳
+	const now = Date.now();
+	console.log(`当前时间戳：${now}`); // 1722476248241
+
+	// 时间转换
+	const parseDate = new Date(Date.parse('Mon Jan 01 2024'));
+	console.log(parseDate); // Mon Jan 01 2024 00:00:00 GMT+0800 (中国标准时间)
+
+	// 上面时间转换等同于这个
+	const parseDate2 = new Date('Jan 01 2024');
+	console.log(parseDate2); // Mon Jan 01 2024 00:00:00 GMT+0800 (中国标准时间)
+
+	// 转成UTC时间，接受多个参数 年月日时分秒毫秒
+	const utcDate = new Date(Date.UTC(2024, 6));
+	console.log(utcDate); // Mon Jul 01 2024 08:00:00 GMT+0800 (中国标准时间)
+
+	// 日期时间大小比较
+	console.log(utcDate > parseDate); // true
+
+	date.toUTCString();
+	date.toTimeString();
+	date.toDateString();
+	date.toLocaleDateString();
+	date.toJSON();
+	date.toISOString();
+	date.toLocaleString();
+	date.toLocaleTimeString();
+};
+
+onMounted(() => {
+	dateTest();
+});
+</script>
+
+<template>
+	<img
+		alt=""
+		draggable="false"
+		src="http://192.168.3.98:9000/test/64ee875c-7005-491c-be82-413aacd94b3aimage-20240604142630699.png"
+	/>
+</template>
+
+<style lang="scss" scoped></style>

src/views/test/file/index.vue

@@ -0,0 +1,76 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const imageSrc = ref();
+const textValue = ref();
+const binaryString = ref();
+const buffer = ref();
+
+const onFileChange = (event: Event) => {
+	// 读取为buffer内容
+	const fileReaderBuffer = new FileReader();
+	// base64读取
+	const fileReaderBase64 = new FileReader();
+	// 文本读取
+	const fileReaderText = new FileReader();
+	// 读取为二进制字符串
+	const fileReaderBinaryString = new FileReader();
+	// 获取文件
+	const files = (event.target as HTMLInputElement).files;
+
+	if (files && files.length > 0) {
+		// 读取为Base64编码
+		fileReaderBase64.readAsDataURL(files[0]);
+		fileReaderBase64.onload = () => {
+			imageSrc.value = fileReaderBase64.result;
+			console.log(fileReaderBase64.result);
+		};
+
+		// 读取文本内容
+		fileReaderText.abort();
+		fileReaderText.readAsText(files[0]);
+		fileReaderText.onload = () => {
+			textValue.value = fileReaderText.result;
+		};
+
+		// 读取为二进制字符串
+		fileReaderBinaryString.readAsBinaryString(files[0]);
+		fileReaderBinaryString.onload = () => {
+			binaryString.value = fileReaderBinaryString.result;
+		};
+
+		// 读取为buffer
+		fileReaderBuffer.readAsArrayBuffer(files[0]);
+		fileReaderBuffer.onloadend = () => {
+			buffer.value = fileReaderBuffer.result;
+		};
+
+		// 读取进度条
+		fileReaderBinaryString.onprogress = (ev: ProgressEvent) => {
+			console.log(`${ev.loaded}/${ev.total}`);
+		};
+
+		// 读取错误时错误码
+		fileReaderBinaryString.onerror = (ev: any) => {
+			console.log(ev.code);
+			console.log(fileReaderBinaryString.error?.code);
+		};
+	}
+};
+</script>
+
+<template>
+	<input type="file" @change="onFileChange" />
+	<br />
+	<!-- buffer 图片-->
+	<img v-if="buffer" :src="imageSrc" alt="" class="card-img w-[200px] h-[200px]" />
+	<br />
+	<!-- base64图片 -->
+	<img v-if="imageSrc" :src="imageSrc" alt="" class="card-img w-[200px] h-[200px]" />
+	<br />
+	<!-- 字符串内容 -->
+	<textarea :value="textValue" class="w-[600px]" rows="6" />
+	<br />
+	<!-- 二进制文本内容 -->
+	<textarea :value="binaryString" class="w-[600px]" rows="6" />
+</template>

src/views/test/notification/index.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import { onMounted } from 'vue';
+
+const notificationsTest = async () => {
+	const permissionPromise = await Notification.requestPermission();
+	console.log(permissionPromise);
+	new Notification('通知标题内容');
+	const notification = new Notification('测试标题', {
+		body: '你好啊啊啊',
+		image: 'http://192.168.3.98:9000/test/64ee875c-7005-491c-be82-413aacd94b3aimage-20240604142630699.png',
+		vibrate: true,
+	});
+	setTimeout(() => notification, 3000);
+};
+
+onMounted(() => {
+	notificationsTest();
+});
+</script>
+
+<template></template>
+
+<style lang="scss" scoped></style>