前端开发_使用JS实现文件下载代码

使用Vue3开发的图片上传和裁剪作为用户头像背景功能

上传背景图片并拖拽调整图片，找到适合部分然后裁剪作为个人用户头像背景图。

    // 拖拽图片
    function onmousedown(ev: any) {
      ev.preventDefault()
      let oevent = ev || event
      let distanceX = oevent.clientX //鼠标点击位置
      let distanceY = oevent.clientY //鼠标点击位置
      //dX和dY是鼠标在pic内的相对位置
      //在移动后，设置图片的外边距，利用负外边距移动图片
      ...

东江哥 2023-06-25 分类： 0 7

不请求后端前端实现分页功能

标签：分页前端分页

1、声明页数和页码

let page=1 let size=10 let dataList []

2、通过数组slice方法截取

dataList.slict((page-1)*size, (page-1)*size size)

起始位置：(page-1)*size

终止位置： (page-1)*size size)

根据数组索引位置截取来实现翻页效果

当page=1截取的位置是0到9

当page=2截取的位置是10到19

当page=3截取的位置是20到29

手机摄影教学分享 2023-06-26 分类： 0 1

CSS优先级算法

标签：CSS优先级算法

CSS优先级：是由四个级别和各级别的出现次数决定的。四个级别分别为：行内选择符、ID选择符、类别选择符、元素选择符。

优先级的算法：

每个规则对应一个初始"四位数"：0、0、0、0

若是行内选择符，则加1、0、0、0

若是 ID选择符，则加0、1、0、0

若是类选择符/属性选择符/伪类选择符，则分别加0、0、1、0

若是元素选择符/伪元素选择符，则分别加0、0、0、1

...

东江哥 2023-06-26 分类： 0 0

前端常用正则校验规则

标签：正则表达式

1、校验手机号码

// 正则
const regex = /^1[3456789]d{9}$/;

2、校验邮箱地址

// 正则
const regex = /^w ([- .]w )*@w ([-.]w )*.w ([-.]w )*$/;

3、校验身份证号码

// 身份证号码为15位或18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
const regex =
  /^[1-9]d{5}(19|20)d{2}(0[1-9]|1[012])(0[1-9]|[12]d|3[01])d{3}[0-9Xx]$/;

4、校验密码强度

// 正则
const regex = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,20})$/;

5、校验 URL 地址

// 正则
const regex = /^(http|https)://([w-] .) [w-] (:d )?(/S*)?$/;

6、校验 IP 地址

const regex =
  /^([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5])$/;

7、校验中文名

// 正则
const regex = /^[u4e00-u9fa5]{2,4}$/;

8、校验首位不为零的数字

// 正则
const regex = /^[1-9]d*$/;

9、校验只允许字母和数字

// 正则
const regex = /^[A-Za-z0-9] $/;

东江哥 2023-06-26 分类： 0 1

css样式表的三种方式

标签：CSS样式行内样式

1、行内样式表

<div style="width: 100px; height: 100px">style属性的设置</div>

2、内部样式表

<div class="box">类标签设置</div>

3、外部样式表

<!-- CSS链接样式 -->
<link type="text/css" rel="styleSheet"  href="/css.css" />

<!--CSS导入式 -->
<link type="text/css" rel="styleSheet"  href="/css.css" />
<style type="text/css">
    @import url("/css.css");
</style>

东江哥 2023-06-26 分类： 0 1

网页图片不存在时的以下两种处理方法

标签：图片不存在图片隐藏

图片不存在会触发onerror事件，我们通过触发该事件后进行以下方式处理。

1、把图片元素隐藏

<img src="图片地址" onerror="this.style.display='none'" />

2、替换成默认图片

<img src="图片地址" onerror="this.src='默认图片的地址'" />

手机摄影教学分享 2023-06-29 分类： 0 0

JavaScript复制文本到剪切板中

标签：复制剪切板

判断navigator.clipboard是否为undefined，因为navigator.clipboard对象只能在安全网络环境中才能使用，比如在localhost或者https中才能正常使用，直接用ip地址和http访问出现undefined，所以需要表单元素来实现。

HTML部分

<body>
    <button id="copy">复制</button>
    <div id="text">你好啊</div>
</body>

JavaScript部分

<script>
      var copy = document.getElementById('copy')
      copy.onclick = function copy(e) {
        var text = document.getElementById('text')
        if (navigator.clipboard && window.isSecureContext) {
          return navigator.clipboard.writeText(text.innerHTML)
        } else {
          let input = document.createElement('input')
          document.body.appendChild(input)
          input.value = text.innerHTML
          input.focus()
          input.select()
          if (document.execCommand('copy')) {
            document.execCommand('copy')
          }
          input.blur()
          document.body.removeChild(input)
        }
      }
    </script>

手机摄影教学分享 2023-06-29 分类： 0 0

JavaScript常用的日期时间方法大全

标签：日期时间

let date = new Date(); // 获取中国标准时间

date.getFullYear(); / /获取完整的年份(4位)

date.getMonth(); // 获取当前月份(0-11,0代表1月)

date.getDate(); // 获取当前日(1-31)

date.getDay(); // 获取当前星期(0-6,0代表星期天)

date.getTime(); // 获取当前时间的时间戳

date.getHours(); // 获取当前小时数(0-23)

date.getMinutes(); // 获取当前分钟数(0-59)

date.getSeconds(); // 获取当前秒数(0-59)

date.getMilliseconds(); //获取当前毫秒数(0-999)

date.toLocaleDateString(); // 获取当前日期

date.toLocaleTimeString(); // 获取当前时间

date.toLocaleString(); // 获取当前日期与时间

date.setFullYear(); // 设置年份信息获取该年份当前月日时分秒的时间戳

date.setMonth(); // 设置月份信息获取该月份当前年日时分秒的时间戳 (0-11,0代表1月)

date.setDate(); // 设置日信息获取该日当前年月时分秒的时间戳

date.setHours(); // 设置小时信息获取该小时当前年月日分秒的时间戳

date. setMinutes(); // 设置分信息获取该分当前年月日时秒的时间戳

date.setSeconds(); // 设置秒信息获取该秒当前年月日时分的时间戳

东江哥 2023-06-29 分类： 0 0

原生JavaScript绑定事件的3种方法

标签：事件绑定原生JS

1.行内绑定：在标签上写οnclick=“事件名”

<button onclick="handleClick">Click Me</button>

2.在script中绑定

document.getElementById("标签").onclick=function(){
    /*   函数体   */    
}

3.绑定事件监听函数

绑定事件的第三种方法是用addEventListener()或者attachEvent()来绑定事件监听函数

元素选择器.addEventListener(事件名（click,keydown...）, 回调函数, true捕获/false冒泡);

移除事件监听

document.getElementById("选择的标签").removeEventListenner('click')

胡学长 2023-07-01 分类： 0 0

dom创建与dom操作

标签：dom dom元素

创建：新的标签(元素节点) = document.createElement("标签名")

删除：父节点.removeChild(子节点);

插入：insertBefore(新插入的节点，参照物节点) 往某个节点的前面插入一个新的节点

追加：appendChild(新的节点的名) 当前对象追加一个子节点

胡学长 2023-07-01 分类： 0 1

博客网