男儿当自强1-CSDN博客

原创 async await 小练习

<!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>asy

2022-05-14 15:05:32 184

原创 async await 小练习

<!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>asy

2022-04-23 22:50:42 262

原创 vuex用法

<template> <div> <button>删除事件</button> <button @click="clickVuexEvent()">点击触发vuex事件</button> <button @click="oddJia()">奇数时候再加</button> <button @click="waitAdd()">延迟时候再加</button>

2022-04-18 14:56:29 374

原创事件委托加排他思想完成（仿B站右侧视频鼠标悬停播放，鼠标离开继续播放，鼠标悬停下一个则播放下一个，上一个暂停）

鼠标悬停播放，鼠标离开暂停

2022-04-02 19:35:59 286

const fs = require('fs') // 引入fsconst p = new Promise((res) => { fs.readFile('./ma1.md', (err, data) => { // 读取文件，将文件传过去 res(data) })}).then(value => { // console.log(res.toString()); return new Promise(res =&

2022-03-30 21:05:20 275

原创模糊查询 vue 监听器/侦听器实现版本

<template> <div>  <input type="text" v-model="keyWord" />  <li v-for="(item, id) in newStarList" :key="id"> {{ item.id }} {{ item.name }} - {{ item.age }} </li&g

2022-03-14 10:58:15 769

原创 vue模糊查询计算属性实现版本

<template> <div>  <input type="text" v-model="keyWord" />  <li v-for="(item, id) in newStarList" :key="id"> {{ item.id }} {{ item.name }} - {{ item.age }} </li&g

2022-03-14 10:47:15 1032

原创 vue实现简易购物车

<template> <div>  <div style="display: flex"> <div style="margin: auto"> <el-radio-group v-model="radio1" @change="getConfigPrice()"> <el-radio-but

2022-03-07 09:00:57 235

原创原生js实现表单单向绑定

<html><head> <meta charset=utf-8></head><body> <input id="input" type="text" /> // input输入框 <span id="span"></span> // span 标签显示input内容 <script type="text/javascript"> // 补全代码

2022-02-10 14:12:02 810

原创 this指向

var obj = { name :'乔丹', fn(){ console.log(this.name); }}var obj2 = { name: '哈登'}// obj.fn() //打印乔丹，this指向当前对象obj//obj.fn.call(obj2) // 打印哈登，call改变了this指向，指向了obj2// obj.fn.bind(obj2) //没有反应，因为bind返回一个函数// var isBind = obj.fn.bind(

2022-01-27 17:23:47 517

原创 vue-slot插槽图解，具名插槽，匿名插槽，作用域插槽

上面是匿名插槽。上面是具名插槽，通过name属性绑定上面是作用域插槽，通过name属性绑定名字，通过slot-scope标签绑定数据名字。作用域插槽可以传递数据

2022-01-27 09:11:08 981

原创 js声明式函数和函数表达式的区别

// 声明式函数fn() //成功调用function fn(){ console.log('这是声明式函数)}fn() //成功调用// 声明式函数可以在他创建前调用成功，也可以在他创建后调用成功。// 声明式函数只在他可见的代码块起作用，在代码块以外无法成功调用// 函数表达式fn() //在创建之前调用会报错var fn = function(){ console.log('这是函数表达式')}fn() // 成功调用。只能在创建之后才能调用// 函数表达式在

2022-01-18 14:17:26 456

原创 vue-ref使用

<div ref="isRef"></div><script> //获取这个ref console.log(this.$refs.isRef) // 得到这个div的dom元素。可以修改它的style</script>

2021-12-30 23:51:03 383

原创分页分页分页分页

<template> <div> <div id="max_background"> <div id="main_content">  <div id="renderheader"> <img class="top_icon" @click="$router.openPage('/hom

2021-12-23 22:04:53 691

原创用户勾选记住用户名（结合本地存储完成）

<!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>Doc

2021-12-21 16:21:35 230

原创父元素设置display:flex，子元素设置margin:auto。可以实现水平垂直居中

<!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>Doc

2021-12-19 22:09:49 1058 1

原创缓动动画来回移动

<!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>Doc

2021-12-18 16:02:00 110

原创仿京东放大镜

<!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>Document&lt

2021-12-16 17:35:03 115

原创两个盒子，拖动内部盒子才能移动

<!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>Document&lt

2021-12-16 11:27:05 186

原创鼠标按下盒子跟随鼠标移动，鼠标松开，盒子停止移动

<!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>Document&l

2021-12-13 20:20:32 581

原创获取鼠标在盒子内的坐标

<!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>Document&lt

2021-12-11 09:40:41 97

原创原生js实现url传参，以及获取url参数

A页面<!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>Documen

2021-12-10 12:30:45 609

原创京东倒计时

var h1 = document.querySelector('.hours') var m1 = document.querySelector('.minute') var s1 = document.querySelector('.second') var time = '2021-12-10 2:00:00' function timeS(){ var nowTime = +new Date() //获取此刻的时间 ...

2021-12-09 15:37:53 1030

原创放大输入框的内容

var text = document.querySelector('.text') var input = document.querySelector('input') input.addEventListener('keyup', function(){ text.innerText = this.value input.value !== '' ? text.style.display = 'block' : text.style.display = 'none'.

2021-12-09 09:31:30 350

原创用户按下s键输入框获取光标

var input = document.querySelector('input') console.log(input); document.addEventListener('keyup',e =>{ // console.log(e.keyCode); if(e.keyCode === 83){ input.focus() } }) <input type="text">..

2021-12-09 09:04:28 224

原创天使&图标跟随鼠标移动

var img1 = document.querySelector('img') console.log(img1); document.addEventListener('mousemove',e =>{ img1.style.left = e.pageX + 'px' img1.style.top = e.pageY + 'px' }) <div class="box"> <img class="img1" src

2021-12-09 08:52:29 404

原创 js禁止选中文字&禁止右键打开选项

//禁止右键打开选项 document.addEventListener('contextmenu',e =>{ e.preventDefault() }) //禁止选中文字 document.addEventListener('selectstart',e =>{ e.preventDefault() })

2021-12-08 16:43:22 599

原创 setAttribute给元素设置属性

var top1 = document.getElementById('top').getElementsByTagName('li') var bot1 = document.getElementById('bottom').getElementsByTagName('div') for(var i= 0;i<top1.length;i++){ top1[i].setAttribute('index',i+1) var index = top1[i].getAttribute

2021-12-08 09:48:44 486

原创原生js实现tab栏选项卡

var top1 = document.getElementById('top').getElementsByTagName('li') var bot1 = document.getElementById('bottom').getElementsByTagName('div') console.log(bot1); for(var i= 0;i<top1.length;i++){ top1[i].setAttribute('index',i) top1[i].onc..

2021-12-07 15:21:45 190

原创 input框全选&反选

var c_all = document.getElementById('c_all') var box = document.getElementById('cbox').getElementsByTagName('input') c_all.onclick = function () { for (var i = 0; i < box.length; i++) { box[i].checked = this.checked } } for(v..

2021-12-07 10:17:41 367

原创排他思想点击切换背景图片

点击切换背景图片js var imgs = document.querySelector('.box1').querySelectorAll('img') console.log(imgs); for( var i = 0;i<imgs.length;i++){ imgs[i].onclick = function(){ // console.log(this.src); document.body.style.backgroundIma

2021-12-06 15:30:44 430

原创 JavaScript排他思想，先让其他的全部为无，再给该元素单独添加颜色

JavaScript排他思想，先让其他的全部为无，再给该元素单独添加颜色 var lis = document.getElementsByTagName('li') for( var i = 0; i<lis.length; i++){ lis[i].onclick = function(){ for(var i = 0;i<lis.length;i++){ lis[i].style.background = ''

2021-12-06 13:53:13 68

原创简易的获取今天的时间

// 简易的获取今天的时间 var time = new Date() y = time.getFullYear() m = time.getMonth() + 1 d = time.getDate() w = time.getDay() h = time.getHours() arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'] console.log("今天是 " + y + " 年 "+ m + " 月 "+ d + " .

2021-12-03 11:08:54 312

原创简易的数组反转

// 简易的数组反转 const arr = [999,1,2,3,4,5,6,7,0] var newArr = [] for( var i=arr.length-1;i>=0;i--){ newArr[newArr.length] = arr[i] } console.log(newArr);

2021-12-03 11:00:55 408

原创简易的数组排序

// 简易的数组反转 const arr = [1,2,3,4,5,6,7] for(var i= 0;i<arr.length;i++){ for(var j = i+1;j<arr.length;j++){ if(arr[i] <arr[j]){ temp = arr[i] arr[i] = arr[j] arr[j] = temp } } } console.log(arr);

2021-12-03 10:57:24 212

原创简易的数组去重

// 简易的数组去重 const arr = [1,1,1,1,2,2,2,3,3,3,4,4,0,1,0,1,0,1,0] for(var i= 0 ;i<arr.length;i++){ for(var j = i+1;j<arr.length;j++){ if(arr[i] === arr[j]){ arr.splice(j,1) j-- } } } console.log(ar

2021-12-03 10:54:33 82

原创简易的倒计时

倒计时 function countTime(time){ inputTime = +new Date(time) //输入的时间 nowTime = +new Date() //此刻的时间 times = parseInt(inputTime - nowTime) / 1000 //间隔的秒 h = parseInt(times /60 / 60) // 小时 m = parseInt( times / 60 %60) //

2021-12-03 10:45:43 214

原创 git命令操作

四.补充功能1.git多人的操作1.基本介绍工作区 -->暂存区–> 版本库 --> 远程版本库工作区：文件的增加，修改，删除操作都在工作区执行暂存区：文件修改后且add后，到暂存区版本库：文件commit后，到版本库远程仓库：本地版本库的文件push到远程仓库，从远程仓库pull/fetch文件到本地HEAD保存的是最后一次提交点（当前），指向当前工作的分支HEAD^上一个版本HEAD^^上上个版本HEAD~10上10个版本2.配置用户名及邮箱git confi

2021-10-11 13:12:05 152

原创 Vuex状态管理使用方式

//先在sotre下面index.js文件写入状态import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({ state: { name : '亚索', age : '30岁' }, mutations: { }, actions: { fun(){ } }, modules: { }})//再到需

2021-09-11 11:29:13 78

原创配置抽离路由文件

配置抽离路由文件//这是home.js文件//第一步导入要跳转到的页面import Home from '../views/home'//第二步配置路由信息const homeRouter ={ path : '/home', name: 'Home', component:Home}//第三步抛出路由export default homeRouter//再到index.js导入import homeRouter from './home'//再注册const routes

2021-09-09 22:16:18 70

空空如也

空空如也