初始文档

开发文档/javascript/javascript工具集.md

@@ -0,0 +1,125 @@
+
+### 计算文件md5
+
+```javascript
+const md5 = CryptoJS.algo.MD5.create()
+// 以二进制的方式读取文件,每次读取一定字节块
+md5.update(a)
+md5.finalize().toString(CryptoJS.enc.MD5)
+```
+# 原生js发起http请求
+```js
+//客服端发起请求,接受服务器返回的json数据
+ fetch('http://example.com/request')
+        .then(response => {
+            if (!response.ok) {
+                throw new Error('Network response was not ok');
+            }
+            return response.json();
+        })
+        .then(data => {
+            console.log(data); // 这里处理返回的JSON数组  
+            }
+        })
+        .catch(error => {
+            console.error('There has been a problem with your fetch operation:', error);
+        });
+```
+# 重新加载网页
+```js
+//重新加载名为example_frame的框架页面
+window.frames['example_frame'].location.reload(true);
+//重新加载当前页面
+location.reload();
+//重新加载页面的客户端部分（不包括服务器端脚本）
+location.assign(location.href);|
+```
+# 修改元素的属性
+```js
+//修改id_name的边框为2px
+document.getElementById('id_name').style.border='2px'
+```
+# 修改网页内容
+```js
+//innerHTML可以添加html元素
+document.getElementById('id_name').innerHTML=''
+//textContent只能添加纯文本
+document.getElementById('id_name').textContent
+```
+# 生成随机数
+```js
+//生成10以内的随机数
+Math.floor(Math.random() * 10) + 1
+//Math.random()生成一个随机浮点数
+//Mate.floor()将浮点数向下取整,变成一个整数
+```
+# 分钟倒计时
+
+```html
+<h3 id="countdown">02:00</h3>
+<button type="button" class="btn btn-primary" id="startCountdown">开始计时</button>
+```
+```js
+// 抽奖二维码倒计时功能
+    let countdownElement = document.getElementById('countdown');
+    let minutes = '02'; // 将分钟初始化为字符串形式  
+    let seconds = '00'; // 将秒初始化为字符串形式  
+    let intervalIds;
+    let timer;
+    let isPause = false;
+    const toggleButton = document.getElementById('startCountdown')
+    //开始计时
+    function startCountdown() {
+        intervalIds = setInterval(updateCountdown, 1000);
+    }
+    //更新计时器
+    function updateCountdown() {
+        if (minutes === '00' && seconds === '00') {
+            clearInterval(intervalIds); // 停止计时器  
+            countdownElement.textContent = '00:00';
+            return;
+        }
+        seconds = parseInt(seconds) - 1; // 将秒转换为整数进行减法运算  
+        if (seconds < 0) {
+            minutes = parseInt(minutes) - 1; // 将分钟转换为整数进行减法运算  
+            seconds = 59;
+        }
+        // 只对个位数分钟进行补零操作，并且只在倒计时进行到个位数分钟时才补零  
+        if (minutes < 10 && minutes > -1 && seconds === '00') {
+            minutes = "0" + minutes;
+        } else {
+            minutes = minutes.toString().padStart(2, '0'); // 其他情况下保证分钟为两位数  
+        }
+        if (seconds < 10) {
+            seconds = "0" + seconds; // 秒小于10时在前面补零  
+        }
+        countdownElement.textContent = `${minutes}:${seconds}`;
+    }
+
+    // document.getElementById('startCountdown').addEventListener('click', startCountdown);
+    toggleButton.addEventListener('click', () => {
+        if (isPause) {
+            isPause = false;
+            clearInterval(intervalIds);
+            toggleButton.textContent = '继续计时'; // 修改按钮文本为"Pause"  
+        } else {
+            isPause = true;
+            toggleButton.textContent = '结束计时'; // 修改按钮文本为"Resume"  
+            startCountdown()
+        }
+    });
+```
+# 显示或隐藏元素
+```html
+<div id="qrImage" style="display: none;">
+    <image src="https://example.com/example.png"></image>
+</div>
+```
+```js
+var divElement = document.getElementById("qrImage");
+if (divElement.style.display === "none") {
+    divElement.style.display = "block"; // 显示div元素  
+} else {
+    divElement.style.display = "none"; // 隐藏div元素  
+}
+```