- 博客(53)
- 资源 (1)
- 问答 (4)
- 收藏
- 关注
RSS订阅
原创 怎么创建vue项目
首先先打开cmd输入命令 vue ui此时，Chrome浏览器会弹出，1.4.进入功能面板，必须安装的(1.Babel，2.Router，3.Linter/Formatter，4.使用配置文件)注释：Linter/Formatter是代码规范，如果不喜欢那就自行去掉。6.希望保存，就填写，不保存就点击创建项目7.此时，项目已经创建完成。接下来就是安装一些要使用的插件和依赖。安装完成之后就要对其进行配置。9.配置axios库10.到这里，项目已
2021-10-27 15:43:47
125
原创 多张图片轮播
```html<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Bootstrap 实例 - 轮播（Carousel）插件的标题</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"> <s..
2022-05-12 17:17:10
280
原创 vue的表单验证规则
<template><div> <el-input v-verify="data.name"></el-input> <el-input v-verify="data.idCard"></el-input></div></template><script> export default { data() { return { data:{
2022-04-27 16:17:01
1989
原创 vue切换菜单
示例图：代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <style type="text/css"> htm
2022-04-21 15:37:55
1920
原创 vue实现拖拽效果
效果图<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>vue实现拖拽</title> <script src="https://cdn.suoluomei.com/common/js/jquery-2.1.4.min.js"></script> <script src="https://cdn.suoluomei
2022-04-20 13:48:56
549
原创 双击全屏事件
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</ti
2022-03-31 18:16:39
148
原创 防抖和节流
函数防抖(debounce)：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。//防抖debounce代码：function debounce(fn) { let timeout = null; // 创建一个标记用来存放定时器的返回值 return function () { // 每当用户输入的时候把前一个 setTimeout clear 掉 clearTimeout(timeout); //.
2022-03-09 16:29:33
97
原创 vue的dialog点击屏幕空白处不关闭
代码如下：<el-dialog :close-on-click-modal="false" ></el-dialog>在dialog里面写 **:close-on-click-modal=“false”**即可。
2022-02-21 17:52:34
1573
原创 Vue自动点击功能
页面加载的时候，怎么实现自动点击功能<button @click="test" v-trigger></button>method(){},// directives是自定义指令directives:{ trigger:{ inserted(el,binging){ el.click() } }}// 页面加载的时候，button按钮会自动触发点击事件...
2022-02-17 13:58:11
1684
原创 HTMl图片旋转
效果图：代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>图片旋转</title><style type="text/css">.a1{ animation: aa1 4s linear infinite;}@keyframes aa1{ from {transform: rotate(0deg);} to {transform:
2021-12-23 11:26:53
1331
原创 JavaScript常用正则表达式
一、校验数字的表达式数字：^[0-9]*$n位的数字：^\d{n}$至少n位的数字：^\d{n,}$m-n位的数字：^\d{m,n}$零和非零开头的数字：^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(\.[0-9]{1,2})?$带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})$正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$有两位小数的正实数：^[0-9]+(\.[0-9]{2})?$
2021-12-21 19:26:25
111
原创 js毛利率计算
效果如图：<!DOCTYPE html><html><head><meta charset="utf-8"><title>毛利率计算器</title><style type="text/css"></style></head><body> 成本 : <input type="number" name="cost" id="cost" value="" />
2021-12-20 17:27:56
1210
原创 css流星雨
<!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>css
2021-12-09 14:49:55
962
原创 JS获取天气
第一种方法：效果如图：代码：<!DOCTYPE html><html><head></head><title></title><body><iframe name="weather_inc" src="http://i.tianqi.com/index.php?c=code&id=7" style="border:solid 1px #7ec8ea" width="250" hei
2021-11-23 14:43:33
6947
8
原创 圆形导航收缩菜单
<!DOCTYPE html><html><head><meta charset="utf-8"><title>圆形导航-径向收缩菜单</title><style type="text/css">*{ margin: 0; padding: 0; box-sizing: border-box;}body{ display: flex; justify-content: center; align-
2021-11-22 10:27:30
274
原创 图片点击放大
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"></head><style>.img_content { display: none; position: absolute; margin: 5% 0 0 40%; background-color: white; z-index:1002;
2021-11-22 09:37:03
398
原创 js粒子漩涡
<!doctype html><html> <head> <meta charset="utf-8"> <title>漩涡粒子</title> <style> html, body { margin: 0px; width: 100%; height: 100%; overflow: hidden; background: #000; } #ca
2021-11-22 09:34:57
215
原创 JavaScript正则表达式
1 用户名正则//3到15位（字母，数字，下划线，减号）/^[a-zA-Z0-9_-]{3,15}$/2 密码强度正则//密码强度正则，最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符/^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/3 Email正则/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/4 手机
2021-11-19 11:33:29
350
原创 JavaScript表单验证
效果如下图所示：代码：<!DOCTYPE html><html> <head> <title>表单校验</title> <meta charset="UTF-8"/> <style type="text/css"> .success{color: green;} .error{color: red;} #sub{width: 100px;font-size: 20px;} <
2021-11-17 13:48:54
686
原创 JS事件大全
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>js鼠标事件</title> </head> <body> <input type="button" name="" id="" value="单机" onclick="danji()"/> <input type="button" name="" id=
2021-11-16 14:29:13
914
原创 JavaScript经典笔试题
1. js 实现一个函数，完成超过范围的两个大整数相加功能主要思路是通过将数字转换为字符串，然后每个字符串在按位相加。function bigNumberAdd(number1, number2) { let result = "", // 保存最后结果 carry = false; // 保留进位结果 // 将字符串转换为数组 number1 = number1.split(""); number2 = number2.split(""); // 当数组的长度都变为0，并且
2021-11-12 11:01:58
4174
原创 JavaScript打点计时器
<!DOCTYPE html><html><head><meta charset="utf-8"><title>打点计时器</title></head><body><script type="text/javascript">//每隔 100 毫秒 打印 一个数字，每次数字增幅 1.// setTimeout()方法function count(start, end) {
2021-11-10 14:13:02
749
原创 HTML的单位
1、px：相对长度单位。像素px是相对于显示器屏幕分辨率。2、em：相对长度单位。相对于当前对象内文本的字体尺寸。3、rem：相对长度单位。相对于根元素html的字体大小。4、vh ：相对于视窗口的高度。1vh 等于1/100的视窗口高度。5、vm ：相对于视窗口的高度。1vm 等于1/100的视窗口宽度。...
2021-11-09 11:38:13
2211
原创 vue开发笔记
1. 项目开发准备项目描述技术选型API接口你能从此项目中学到什么?2. 开启项目开发使用脚手架创建项目安装所有依赖/指定依赖开发环境运行生产环境打包与发布3. 搭建项目整体界面结构stylus的理解和使用 结构化, 变量, 函数/minxin(混合)vue-router的理解和使用 router-view/router-link/keep-alive $router: 路由器对象, 包含一些操作路由的功能函数, 来实现编程式导航(跳转路由) $r
2021-10-29 17:08:38
124
原创 vue路由笔记
1.路由的概念路由的本质就是一种对应关系，比如说我们在url地址中输入我们要访问的url地址之后，浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系，就是路由。路由分为前端路由和后端路由1).后端路由是由服务器端进行实现，并完成资源的分发2).前端路由是依靠hash值(锚链接)的变化进行实现后端路由性能相对前端路由来说较低，所以，我们接下来主要学习的是前端路由前端路由的基本概念：根据不同的事件来显示不同的页面内容，即事件与事件处理函数之间的对应关系前端路
2021-10-29 17:04:50
114
原创 JavaScript添加数据
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>添加</title> </head> <body> <form> 姓名：<input type="name" name="姓名" id="name" /><br /> 成绩：<input type="number" name
2021-10-22 17:40:14
630
原创 Vue路由跳转
1、跳转外部链接并覆盖当前页<el-button type="primary" @click="cimsInputClick">应用入口</el-button>cimsInputClick () { window.location.href = 'https:\\www.mscims.com' }2、跳转不覆盖当前页面，在新窗口打开<el-button type="primary" @click="cimsInputClick">应用入口<
2021-10-20 14:49:48
724
原创 Vueclass与style绑定
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .aClass{ color: #FF0000; } .bClass{ color: #0000ff; } </style></head><body> <d
2021-10-19 16:25:13
64
原创 Vue计算和监视属性
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!-- 1.计算属性： 在computed属性对象中定义计算属性的方法 在页面中使用{{方法名}}来显示计算的结果 2.监视属性： 通过vm对象的￥watch（）或watch配置来监视
2021-10-19 16:21:15
76
原创 Vue的轮播图和显示日期
<template> <div id="slider"> <!-- 显示当前时间日期 --> <h2>{{nowTime}}</h2> <div class="window" @mouseover="stop" @mouseleave="play"> <ul class="container" :style="containerStyle"><!-- 这是图片列表，排成一排 --
2021-10-12 15:51:13
425
原创 input密码输入框的显示与隐藏
<!DOCTYPE html><html> <head> <title></title> <style type="text/css"> img { vertical-align:top; width: 25px; } </style> </head><body> <input type="text" placeholder="账号" />
2021-09-30 17:40:21
2760
原创 HTML中设置属性时写px和不写的区别
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>样式区别</title> <style type="text/css"> #box{ width: 400px; height: 400px; border: 2px red solid; } #box1{ width: 100px;
2021-09-29 14:56:43
1165
原创 vue怎么升级最新的elementUI
第一步，卸载当前旧版本的elementUI打开终端，运行以下命令：npm uninstall element-ui等卸载完成之后，再运行以下命令：npm i element-ui -S这样，就可以了。
2021-09-27 14:38:04
986
原创 JavaScript贪吃蛇小游戏
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>贪吃蛇</title> <style> * { margin: 0; padding: 0; } .btn { width: 80px; height: 30px; border: 1px solid #000000
2021-09-26 15:17:10
97
原创 JavaScript验证码
<!Doctype html><html> <head> <title>js验证码</title> <style type="text/css"> .code { font-family: Arial; font-style: italic;/*字体倾斜*/ color: blue; font-size: 30px; border: 0; padding: 2px 3px
2021-09-26 15:09:30
119
原创 JavaScript剪刀石头布
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } body { background: gray; text-align: center; color: aqua
2021-09-26 14:59:28
432
原创 怎么添加数据
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>添加</title> </head> <body> <form> 姓名：<input type="name" name="姓名" id="name" /><br /> 成绩：<input type="number" name
2021-09-26 14:55:40
182
原创 HTML十二生肖
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> ????????????????<br> ????????????????<br> ???????????????? </body></html>效果如图..
2021-09-26 14:14:48
500
原创 JavaScript屏蔽敏感词
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>屏蔽敏感词</title> <style type="text/css"> input,textarea { width: 200px; height: 50px; font-size: 20px; } </style></head&
2021-09-26 11:51:06
689
1
后端传过来一个中文字段名，前端怎么做国际化
2022-04-11
video-player播放视频，选择两倍速，切换到下一个视频或上一个视频
2022-04-06
一个vue页面写两个style标签
2022-03-31
vue 子页面怎么向父页面传一个methods方法
2022-03-04
TA创建的收藏夹 TA关注的收藏夹
TA关注的人