前端
关注
分享
扫一扫
前端学习笔记
YANGGEOL
这个作者很懒，什么都没留下…
展开
-
HTML+CSS+JS+JQuery实现轮播图
用前端原生框架加JQuery实现轮播图虽然现在已经有很多UI框架有轮播图组件去直接使用了，但是还是要自己会写才可以。效果图HTML代码html代码分三个部分，第一个是展示的图片区域，第二个是两边的切换箭头，第三个是中下放的显示第几个图片的切换点。总的结构相对简单。 <div class="swiperbox"> <!-- 图片框 放置轮播图片--> <div class="swiper"> <d原创 2022-05-24 00:09:14 · 777 阅读 · 0 评论 -
响应式布局-flex弹性盒子
Flex相关参数display: flex; 决定flex布局flex-direction：子元素在父盒子中的排列方式1. row：默认值。按从左到右的顺序显示 2. row-reverse：与row相同，但是顺序相反3. column：锤子显示，从上到下 4. column-reverse: 与column相同，但是顺序相反flex-wrap：子元素在父元素盒子中是否换行(列)1. nowrap：默认值。不换行或不换列 2. wrap：换行或换列3. w原创 2021-07-30 18:11:28 · 1011 阅读 · 0 评论 -
响应式布局-媒体查询
媒体查询实例代码<!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"> <原创 2021-07-30 18:10:12 · 516 阅读 · 0 评论 -
网页内嵌markdown编辑器
网页内嵌MarkDown下载MarkDown编辑器文件下载地址下载解压文件目录创建文件夹 将上方框起来的文件拖入一个文件夹创建网页引入文件(editormd.min.css,editormd.min.js)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-原创 2021-07-28 14:39:31 · 1248 阅读 · 0 评论 -
Electron打包
打包安装electron-packagercnpm i electron-packager -D添加打包任务"build": "electron-packager ./包名 --platform=系统 --arch=linux系统 --out 输出路径 --overwrite --icon=图标""build": "electron-packager ./ HelloWorld --platform=win32 --arch=x64 --out ./outApp --overwrit原创 2021-07-10 16:46:54 · 353 阅读 · 0 评论 -
Electron进程间通信
进程间通信html<button style="-webkit-app-region: no-drag;" onclick="maxWindow()">最大</button>主进程const { app, BrowserWindow, ipcMain} = require('electron')// 监听初始化完成的生命周期app.on('ready', () => { const mainWindow = new BrowserWindow({原创 2021-07-10 16:37:25 · 185 阅读 · 0 评论 -
ELectron自定义快捷键
快捷键注册主进程中定义const { app, BrowserWindow, globalShortcut} = require('electron')// 监听初始化完成的生命周期app.on('ready', () => { const mainWindow = new BrowserWindow({ width: 700, height: 500, }) // 注册快捷键 窗口最大 最小 关闭 globalS原创 2021-07-10 16:16:51 · 844 阅读 · 0 评论 -
Electron文件读取与保存
文件读取和保存html<button onclick="openFile()">打开文件</button><textarea name="" id="" cols="30" rows="10"></textarea><button onclick="saveFile()">保存文件</button>index.jsconst {remote: {dialog}} = require('electron')con原创 2021-07-10 16:04:06 · 4328 阅读 · 0 评论 -
Electron自定义顶部菜单
自定义顶部菜单main.jsconst { app, BrowserWindow} = require('electron')// 热加载const reloader = require('electron-reloader')reloader(module)// 监听初始化完成的生命周期app.on('ready', () => { const mainWindow = new BrowserWindow({ width: 700, he原创 2021-07-10 15:37:23 · 2610 阅读 · 0 评论 -
Electron自定义原生菜单
自定义原生菜单引入Menuconst { BrowserWindow, Menu } = require('electron')编写代码// 定义菜单模板const template = [ { label: '设置', submenu: [ { label: '新建窗口', click() { // 点击事件原创 2021-07-10 15:32:27 · 617 阅读 · 0 评论 -
Electron热更新插件
页面自动刷新插件安装cnpm install --save-dev electron-reloadernpm install --save-dev electron-reloader使用添加在main.js里// 热加载const reloader = require('electron-reloader')reloader(module)原创 2021-07-10 15:29:36 · 396 阅读 · 0 评论 -
Electron简单上手
安装Electron初始化项目 生成package.jsonnpm init{ "name": "electron-test", "version": "1.0.0", "description": "A Test", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "electron": "electron ."原创 2021-07-10 14:24:16 · 116 阅读 · 0 评论 -
HTML+JavaScript+CSS+JQuery实现音乐播放器
音乐播放器效果如下包含的功能重新开始播放上一曲下一曲暂停、继续播放静音调节音量可调节播放进度条自动播放下一曲代码HTML代码HTML就是一个基本的网页结果，什么地方有什么样的标签，其中也引用了iconfont字体图标，还有引入JS和CSS文件以及设置网站图标<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>MusciPlayer&原创 2021-05-21 23:41:27 · 4904 阅读 · 7 评论 -
VueCli项目配置文件
配置文件package.json{ "name": "vuecli-demo", "version": "0.1.0", "private": true, "scripts": { // 项目启动方式 "serve": "vue-cli-service serve", "build": "vue-cli-service build" }, "dependencies": { // 项目中的依赖 "core-js": "^2.6.5",原创 2021-04-15 11:52:55 · 145 阅读 · 0 评论 -
VueCLi命令行搭建Vue项目
VueCli安装npm install -g @vue/cli升级npm update -g @vue/cli查看版本vue --version创建项目vue create my-project# ORvue ui步骤vue create vuecli-demo// 手动去选择一些功能Manually select features*表示已经选中了 使用空格选择 a全选>(*) Babel ( ) TypeScript ( ) Progress原创 2021-04-14 23:16:00 · 283 阅读 · 0 评论 -
Vue学习Demo-1
效果图点击Punch蓝条减小 点Restart回满<!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原创 2021-04-14 21:35:11 · 95 阅读 · 0 评论 -
HTMl5和CSS3基础使用
HTML5语义化标签<header></header><nav></nav><article></article><section></section><aside></aside><footer></footer>视频标签<video src="" controls=""></video><!-- 属性auto原创 2021-04-10 15:01:08 · 255 阅读 · 0 评论 -
VueCli脚手架图形界面创建项目
准备工作安装vue-clinpm install -g @vue/cli# ORyarn global add @vue/cli开始创建vue create my-project# ORvue ui提示：以上均在命令行中操作创建项目1.选择创建点击创建然后选择项目文件夹，再点击创建2.选择项目名称和初始化Git仓库点击下一步3.预设选择手动4.选择功能5.选择是否保存之前的预设保不保存都可以6。项目创建中7.创建成功项目配置1.安装插件创建好原创 2020-09-22 10:05:00 · 261 阅读 · 0 评论 -
Vue中axios简单发送请求
axios的安装//npm方法npm install axios//cdn方法<script src="https://unpkg.com/axios/dist/axios.min.js"></script>get请求let url = 'https://v1.alapi.cn/api/fanyi'//第一种方式axios.get(url,{ params:{ q: q, to: 'spa'原创 2020-06-26 18:10:26 · 372 阅读 · 0 评论 -
微信小程序之简易音乐播放器的实现
第一个是效果图需要的东西微信的InnerAudioContext类的属性和方法页面和图标代码index.wxml<view class="player"> <view class="musicImg"> //歌曲封面 <image class="songImg {{rotated}}" src='{{songImg}}' bin...原创 2020-04-29 21:56:47 · 5402 阅读 · 7 评论 -
网页JavaScript基础笔记
JavaScript 是一种脚本语言。JavaScript，通常缩写为 JS，是一种高级的，解释执行的编程语言。JavaScript 是一门基于原型、函数先行的语言，是一门多范式的语言，它支持面向对象编程，命令式编程，以及函数式编程。它提供语法来操控文本、数组、日期以及正则表达式等，不支持 I/O，比如网络、存储和图形等，但这些都可以由它的宿主环境提供支持。它已经由 ECMA（欧洲计算机制造商协...原创 2020-03-17 18:11:13 · 598 阅读 · 0 评论 -
网页CSS基础笔记
CSS层叠样式表（英语：Cascading Style Sheets，简写 CSS），又称串样式列表、级联样式表、串接样式表、阶层式样式表，一种用来为结构化文档（如 HTML 文档或 XML 应用）添加样式（字体、间距和颜色等）的计算机语言，由 W3C 定义和维护。目前最新版本是 CSS2.1，为 W3C 的推荐标准。CSS语法CSS 语法结构为：选择器{属性：值;属性：值;…}选择器：通...原创 2020-03-12 22:59:27 · 337 阅读 · 0 评论 -
Vue框架（JavaScript框架）基础笔记
Vue框架的引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> {{ message }} </div> <script> var app = new Vue({ el:"#app...原创 2020-03-10 00:01:38 · 160 阅读 · 0 评论 -
网页Html基础笔记
加粗<strong></strong><b></b>换行<br/>段落<p></p>标题六级标题 大小 加粗不同<h1></h> <h2></h> <h3></h> <h4></h> <h...原创 2020-03-09 20:35:39 · 866 阅读 · 1 评论 -
微信小程序(1)-用户头像-昵称的获取及其UI设计
要做出来的样式如下1-用户-User设计user.js（该处代码为小程序的逻辑页面，就是说我们所编写的处理问题的函数就写在这里）userinfo：我们命名对的自变量，代表用户信息。onShow：就是要在页面展示并设置（ this.setData({userinfo})）我们所获取（const userinfo=wx.getStorageSync(“userinfo”)）的用户信息的缓存...原创 2020-02-02 14:41:44 · 1882 阅读 · 3 评论 -
CSS知识点复习
CSS介绍层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。使用选择器<!DOCTYPE html><html lang="en"><原创 2021-04-03 23:28:03 · 174 阅读 · 0 评论 -
HTML知识点复习
这篇博客的目的因为以前学过前端的知识，但是学过后并未怎么写过，所以决定重新开始复习一遍前端的基础知识点HTML介绍超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。使用基本结构标签标签名定义说明HTML标签页面中最大的标签，根标签文档的头部在改标签里必须设置title标签文档的标签网页的标题文档的主体包含文档的所有内容第一个网页<!DOCTYPE ht原创 2021-04-02 22:33:04 · 255 阅读 · 0 评论