- 博客(23)
- 收藏
- 关注
RSS订阅原创 设计模式 --观察者模式
一、什么是观察者模式由图可知，观察者模式分为两个角色，一个观察者一个被观察者，他们之间存在着某种联系，被观察者和观察者都可以是任意事物，观察者模式只要观察者和被观察者满足一定的条件，就可以被称为观察者模式，观察者模式是站在被观察者的角度，每个符合观察者模式的被观察者是唯一的，但任意事物都可以充当被观察者，具体什么意思我们继续往下看：二、观察者模式的作用观察者模式主要解决一对多信息通信问题，那什么叫一对多，又什么是通信问题，由于是站在被观察者的角度，所以出现了一对多的情况，每个观察者模式下，被观察者是.
2021-11-24 14:58:52
444
原创 小功能--扫描二维码自动连接WiFi
一、 功能介绍点击选择WiFi生成二维码，使用手机相机扫描二维码，连接WiFi，（当然事先是把密码写进了代码里，只是这样更方便的可以使用WiFi连接，不需要输入密码，避免老被人问WiFi密码，哈哈哈）二、 安装依赖2.1 需要引入jquery在线引入 <script type='text/javascript' src='http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js'></script>也可以下载安装包到本.
2021-11-15 10:37:07
4386
原创 CSS进阶---SASS用法
「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」。一、了解SASSsass是css的另一种写法，是对css添加了规则，封装了方法，让css代码变得更有复用性，结构更加清晰，也更便于维护二、安装SASS2.1首先前提是安装了npm，可以直接在项目中终端输入npm i sass安装sass就可以了 $ npm i sass2.2 或者使用window+R，打开cmd，在里面输入也是可以三、 如何使用SASSSASS的使用过程3.1 创建首先创建一个.sa.
2021-11-08 17:28:09
1646
原创 CSS基础 ---flex弹性布局
CSS基础—flex弹性布局一、了解flex布局1.1 什么是flex布局flex布局又叫弹性布局，顾名思义弹性布局可以使盒子变得有弹性可以伸缩，这样说不容易理解，直接进入实例来了解flex布局1.2 弹性布局的使用场景简单来说，弹性布局可以使盒子变得有弹性，可以让盒子可以进行伸缩，想让一个盒子内的元素水平排列，并且均匀分布就可以使用flex布局flex布局也可以使元素竖直排列，分布方式可以自己随意选择，来看看flex布局的属性，来更清楚他的作用1.3 flex布局怎么使用flex是di.
2021-11-05 15:11:52
2112
原创 关于TypeScript
这是一篇关于TypeScript的记载：typescript是js的超集，js主要功能是让页面动起来，运行在客户端，而ts呢，在js增加了类型注释等功能，相当于是一个升级，代码形式差不多1、首先先安装TypeScriptnpm i -g typescript2、然后安装nodejs链接：https://nodejs.org/zh-cn/download/3、安装完之后软件（这里默认vscode）就可以运行ts代码了初始运行ts代码的方式 先使用tsc xxx.ts将xxx.ts转化为
2021-10-18 22:16:56
71
原创 Vue框架鼠标经过添加类
在使用vue框架时，写js代码会习惯性用原生html里面的写法，获取dom元素，然后循环绑定事件，今天来说说vue框架的事件（dom元素的操作）文章简介：在vue中使用v-on来进行事件绑定，简写@，循环使用v-for，并且一起把事件绑定了，不用像原生js里，获取元素，再循环绑定事件，方便了很多的同时，也会伴随许多未知的用法，今天来讲讲怎么给鼠标经过的元素加上一个类，（加上红色边框）主体内容：先看代码 <ul> <li v-fo
2021-09-02 23:59:00
701
原创 express获取url参数传来的值
点击一个链接打开一个新的页面时，传递一个id给新的页面，在新的页面接受id，并且获取和此id相关联的json文件渲染页面1.先写一个方法打开新的页面并传递id //跳转页面函数 function toInfo(num, id) { const content = document.querySelectorAll('.item-content') for (var i = 0; i < content.length; i++) { c
2021-08-16 00:29:39
335
原创 使用express框架请求本地数据
使用express请求本地数据时会遇到的问题1.想获取本地文件夹中json文件的数量使fs.readdir的方法来获取文件夹中文件，先创建js文件写入代码const express = require('express')var fs = require('fs');const app = express()var num = 0fs.readdir("public/data", function(err, files) { if (err) { return con
2021-08-14 22:39:11
619
原创 SuperSlide插件的用法
SuperSlide是基于JQuery的一个轮播图插件，使用它可以便捷使用各种样式的轮播图1.首先使用SuperSlide需要下载js文件可以通过网址下载：http://www.superslide2.com/index.html2.下载完成后解压，会有一个文件夹3.将里面的js文件导入项目， 代码：<script src="js/SuperSlide2.1-demo-00/jquery1.42.min.js"></script><script src="
2021-08-10 09:50:43
2924
原创 如何将编辑器（vscode）添加到鼠标右键运行
1.将编辑器添加到鼠标右键，方便使用，如下图：2.在桌面创建一个.reg的文件，例如add.reg*3.然后打开记事本编辑，将下面代码输入并保存Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\*\shell\VSCode]@="Open with Code""Icon"="D:\\Microsoft Visual Studio Code\\Microsoft Visual Studio Code\\Code.exe"[HKE
2021-08-08 15:17:35
425
原创 better-scroll插件遇到的问题总结
问题1：使用了组件但是页面无法滚动，也没有报错解决办法：给content加上一个height 比wrapper高的高度就解决了，也能解决刷新无法拖动问题<div class="wrapper"> <ul class="content"> <li>...</li> <li>...</li> ... </ul> </div>问题2：使用了bet
2021-07-19 15:57:26
281
原创 betterscroll遇到的各种坑
1.首先安装better-scroll npm install better-scroll --sava2在需要使用的页面，导入 import BScroll from '@better-scroll/core'3.然后在script代码中，加入<script> import BScroll from '@better-scroll/core' export default { data() { return { scroll: null
2021-07-19 14:17:42
435
1
原创 Vue关于swiper轮播图组件的小细节
在写项目过程中遇到swiper组件小圆点怎么都不显示，解决方法：1.首先先下载swiper组件 npm install vue-awesome-swiper@2.6.7 --save@后面版本号可以删掉，默认最新版2.在main.js中引入import VueAwesomeSwiper from 'vue-awesome-swiper'import 'vue-awesome-swiper/node_modules/swiper/dist/css/swiper.css'//这个好像会不太一
2021-07-15 19:16:34
185
原创 记录vue需要安装的loader和plugin
1.全局安装webpack 打包工具npm install webpack webpack-cli -g2.解析css 和 展示样式的loader --save-dev开发时需求npm install css-loader style-loader --save-dev 3.解析url 背景图片或者需要地址的时候npm install url-loader --save-dev4.解析.vue文件 模块化 组件npm install vue-loader vue-te
2021-06-25 21:25:50
999
原创 创建vue项目/安装webpack
本篇来讲讲怎么创建一个vue项目和webpack（结合我上篇博客nodejs的安装和配置一起来看，前面全部完成了才可以进行接下来的操作）地址：https://blog.csdn.net/m0_52173534/article/details/118193022?spm=1001.2014.3001.55011、安装webpack 先需要安装vue-cli 一样的使用全局安装 npm i vue-cli -g输入vue init webpack vue012.打开cmd切换到你想要创建vue项
2021-06-24 17:59:41
650
原创 关于npm的各种安装
1、windows安装npm教程 – nodejs1.首先先到官网下载nodejsnodejs下载网址：https://nodejs.org/en/2.然后进行安装一路next就可以选择你自己想安装的路径3.然后完成安装打开目录创建两个文件夹node_cache / node_global4.然后可以打开cmd查看node的版本和npm的版本5.然后运行以下2条命令npm config set prefix “D:\nodejs\node_global”npm con
2021-06-24 17:49:14
230
原创 Vue父子组件传递/子传父
1.子传父的意思就是，，子组件内容传给父组件，，使父组件可以随时使用子组件传来的数据，使用方法为：自定义函数1、首先我们来做一个仿淘宝侧边栏商品，点击或者鼠标移动到上面出现内容商品案例2、以上面这个图片为例，我们来讲一下组件传递的子传父2.1我们将子组件和父组件分开先，挨个讲 先来看看子组件代码<!-- 子组件 --><template id="cpn"> <div> <h1>{{ctitle}}</h1>
2021-06-23 14:30:52
738
原创 Vue父子组件传递/父传子
Vue父传子，意思就是子组件可以从父组件里拿数据使用1.先看代码，讲解在下面<body>//父组件<div id="app"> <cpn3 :ctitle="title"></cpn3></div>//子组件<template id="cpn3"> <div> <h1>{{ctitle}}</h1> <p>orange</
2021-06-23 00:17:27
222
原创 React npm i react react-dom 安装不成功，报错
1、首先安装node.js 1.可以打开window+R 输入cmd 打开命令提示符 2.输入node -v 查看版本或者是否安装成功2、安装React脚手架在cmd命令行中输入： npm install -g create-react-app 1.npm是伴随NodeJS一起安装的包管理工具2.install是下载的意思3、新建项目执行新建项目命令：create-react-app my-new-app1.create-react-app 这是创建指令2.my-new-app这
2021-06-13 19:41:02
2680
原创 js---点击li输出当前li的索引号
js点击事件，当你想知道哪一个被点击时可以参考<body><ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li></ul></body><script>var lis = document.querySelecto
2021-06-06 18:01:44
319
原创 html5 秒杀倒计时案例 数组返回多个值如何接收
今天分享秒杀倒计时案例今天在写秒杀倒计时案例时，函数返回 ‘时分秒’ 三个值 当时我一下子没想到该怎么将这三个值分别赋值给li，后来想了一会想到可以将值先存入数组，再返回数组，再用索引的方式赋值给想赋值的地方。给大家看看我自己想的做法： <script> //算出时分秒 function getTime(time) { var timenow = +new Date(); var time = +new Date(time);
2021-06-01 00:45:56
177
原创 HTML5搜索框灰色提示字、关键词
关于搜索框灰色字体聚焦是消失，失去焦点是出现，不影响搜索案例搜索框灰色提示字，如图所示：代码如下：html代码<body><div class="box"> <input type="text" value="手机"></div><script> //获取元素 var input = document.querySelector('input'); //聚焦时 搜索框中内容自动消失,字体颜色加深
2021-05-31 20:39:47
2558
原创 html5 button 黑色边框怎么去除
**html5 button 黑色边框怎么去除**按钮有黑色边框很丑， 有时候会忘记怎么去除边框{margin: 0;padding: 0;box-sizing: border-box;} label { margin: 0 5px; } input { height: 22px; outline: none; } button { width: 40px; height: 22px;
2021-05-31 15:25:09
5407
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人