初始文档
This commit is contained in:
62
开发文档/javascript/html+css+js教程.md
Normal file
62
开发文档/javascript/html+css+js教程.md
Normal file
@@ -0,0 +1,62 @@
|
||||
text-decoration:none 去下划线
|
||||
cursor:pointer 鼠标变手型
|
||||
target="_blank" 在新页面打开连接
|
||||
rel="nofollow" 禁止爬虫爬该链接
|
||||
float 元素偏移
|
||||
rgba(0,0,0,0-1) 设置透明色
|
||||
# html用法
|
||||
|
||||
### 表单上传多文件
|
||||
```html
|
||||
<form action="url" method="POST" enctype="multipart/form-data">
|
||||
<input type="file" name="imagevideo" accept="image/jpeg,image/png,image/jpg,video/mp4,video/mpeg" multiple="multiple" disabled="disabled">
|
||||
<input type="radio" value="5" name="evaluate3" required>
|
||||
<input typed="text" placeholder="这里是提示的文字">
|
||||
<input type="text" value="默认显示值" readonly>
|
||||
</form>
|
||||
“input禁止复制粘贴 禁止复制: οncοpy="return false" 禁止粘贴: οnpaste="return false" 禁止剪切: oncut="return false" 禁止右键弹出: οncοntextmenu="return false" 关闭自动完成功能(缓存): autocomplete="off" 自动获得焦点: autofocus="autofocus" 禁用自动更正: autocorrect="off" 来关闭键盘默认首字母大写...
|
||||
```
|
||||
> + type指定类型
|
||||
> + 上传多文件必须的属性
|
||||
method="post" 请求方式
|
||||
enctype="multipart/form-data" 表单上传多文件
|
||||
multiple="multiple" 多选文件
|
||||
> + accept指定上传文件类型
|
||||
> + disabled指定元素不可选
|
||||
> + required指定字段不能为空
|
||||
> + placeholder在文本框显示提示语
|
||||
> + value在文本框显示默认值
|
||||
> + readonly文本框只读
|
||||
> + οncοpy="return false"禁止复制
|
||||
> + οnpaste="return false"禁止粘贴
|
||||
> + oncut="return false"禁止剪切
|
||||
> + onselectstart="return false"禁止被选中
|
||||
> + οncοntextmenu="return false"禁止右键弹出
|
||||
> + autocomplete="off"关闭自动完成功能(缓存)
|
||||
> + autofocus="autofocus"自动获得焦点
|
||||
> + autocorrect="off"禁用自动更正
|
||||
> + autocapitalize="off"移动端关闭键盘首字母大写
|
||||
> + spellcheck="false"不对元素的文本进行拼写检查
|
||||
|
||||
##### accept支持上传文件类型
|
||||
# JavaScript
|
||||
### 类型转换
|
||||
+ 将JavaScript任意类型转换为string类型
|
||||
> 可以用 data.toString()或String(data)方式
|
||||
|
||||
### 计算文件hash
|
||||
```javascript
|
||||
const md5 = CryptoJS.algo.MD5.create()
|
||||
// 以二进制的方式读取文件,每次读取一定字节块
|
||||
md5.update(a)
|
||||
|
||||
md5.finalize().toString(CryptoJS.enc.MD5)
|
||||
|
||||
```
|
||||
|
||||
### 生成随机数
|
||||
```JavaScript
|
||||
Math.random() //返回0-1之间的小数
|
||||
Math.round(num) //将num四舍五入
|
||||
Math.floor(Math.random()*10) //生成0-10之间的随机数
|
||||
```
|
||||
125
开发文档/javascript/javascript工具集.md
Normal file
125
开发文档/javascript/javascript工具集.md
Normal file
@@ -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元素
|
||||
}
|
||||
```
|
||||
47
开发文档/javascript/nodejs.md
Normal file
47
开发文档/javascript/nodejs.md
Normal file
@@ -0,0 +1,47 @@
|
||||
|
||||
# nvm版本管理器常用命令
|
||||
|
||||
```shell
|
||||
nvm arch #显示node是以32位还是64位运行
|
||||
nvm check #检查nvm4w进程是否存在问题
|
||||
nvm current #显示活动版本
|
||||
nvm install <version> [arch] # 安装指定版本的node,也可以指定32位或64位
|
||||
nvm list [available] # 列出node安装的版本,末尾加available可以显示可安装的版本
|
||||
nvm on #启用node版本管理
|
||||
nvm off #禁用node版本管理
|
||||
nvm proxy [url] # 设置下载代理,留空查看当前代理,设置none删除代理
|
||||
nvm uninstall <version> #删除特定版本
|
||||
nvm use <version> [arch] # 切换到指定版本
|
||||
nvm root <path> # 设置nvm存放不通版本node的目录
|
||||
nvm version # 显示当前运行的nvm的版本
|
||||
nvm node_mirror <node_mirror_url> # 设置节点镜像https://npmmirror.com/mirrors/node/
|
||||
nvm npm_mirror <npm_mirror_url> # 设置npm镜像,https://npmmirror.com/mirrors/npm/
|
||||
```
|
||||
# npm安装模块
|
||||
```js
|
||||
npm install -g --save-dev --verbose crypto
|
||||
//-g参数:全局安装
|
||||
//--save-dev:保存到当前项目模块目录
|
||||
//--verbose:安装时显示进度条
|
||||
```
|
||||
# npm安装加速
|
||||
```shell
|
||||
# 设置华为镜像加速
|
||||
npm config set registry https://repo.huaweicloud.com/repository/npm/
|
||||
npm cache clean -f
|
||||
# 设置nodejs工具的镜像地址
|
||||
npm config set disturl https://repo.huaweicloud.com/nodejs
|
||||
# 设置Node-Sass的镜像地址
|
||||
npm config set sass_binary_site https://repo.huaweicloud.com/node-sass
|
||||
# 设置浏览器引擎驱动镜像地址，
|
||||
npm config set phantomjs_cdnurl https://repo.huaweicloud.com/phantomjs
|
||||
npm config set chromedriver_cdnurl https://repo.huaweicloud.com/chromedriver
|
||||
npm config set operadriver_cdnurl https://repo.huaweicloud.com/operadriver
|
||||
# 设置Electron和Python的镜像地址
|
||||
npm config set electron_mirror https://repo.huaweicloud.com/electron/
|
||||
npm config set python_mirror https://repo.huaweicloud.com/python
|
||||
```
|
||||
# yarn安装加速
|
||||
```shell
|
||||
yarn config set registry https://repo.huaweicloud.com/repository/npm/
|
||||
```
|
||||
Reference in New Issue
Block a user