真实lie-优快云博客

原创 html：链接a的所有属性和几种使用方式

标签a的所有属性href 目标链接的urlhreflang 目标链接的语言(英文en，中文zh)rel 目标链接与当前页面关系target 规定在何处打开链接(H5)download 规定被下载的超链接目标文件名(H5)meta 规定目标url用于什么设备(H5)type 规定目标文档类型代码：<a href="url">文本</a><a href="url" hreflang="zh">文本</a><a hre

2022-04-30 20:11:12 1088

原创 js：按钮绑定多个事件的三种方法（js，DOM，jQuery）

1.js可以直接通过通过button的onclick添加多个函数来绑定多个事件。2.DOM可以通过事件监听函数addEventListener绑定事件。3.Jquery可以通过click方法来绑定事件。完整代码：<!DOCTYPE html><html lang="en"> <head> <title>按钮绑定多个事件</title> <meta charset="utf-8"&gt

2022-04-27 13:02:46 7625

原创 css3+jQuery：两种简单动画实现方式

css3支持动画animate完整代码（之后只给js部分）：<!DOCTYPE html><html lang="en"> <head> <title>简单动画</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1">

2022-04-22 21:00:02 2177

原创 js：两种方法实现键盘按键控制

第一步：先获取按键的键码（按下哪个键）使用DOM（文档对象模型）或者jQuery（js常用框架）实现完整代码（之后只给js部分）：<!DOCTYPE html><html> <head> <title>键盘事件</title> </head> <body style="text-align: center;"> <h1>键盘事件</h1

2022-04-20 23:20:17 4808

原创 js:三种简单的矩形绘制方法（画布canvas）

之前提到过画布canvas通过lineto方法绘制矩形，实际上画布canvas还有三种其他更简便的方法绘制矩形，而lineto方法可以绘制任何直线图形三种绘制矩形的方法分别是：rect();创建矩形路径（只生成路径）fillRect();创建填充的矩形路径（生成路径并填充）strokeRect();创建矩形路径并绘制（生成路径并绘制）另外有一种清除矩形填充的方法（个人理解为矩形形状的橡皮擦）：clearRect()这是之前的博客：https://blog.youkuaiyun.com/qq_

2022-04-16 20:34:28 5214

原创 html+js：画布canvas + 绘制简单矩形

html5支持canvas标签canvas创建一个画布，通过.getContext方法创建一个CanvasRenderingContext2D对象进行图案的绘制,具体的方法可以前往HTML Canvas 参考手册查询完整代码（之后只列出js部分）：<!DOCTYPE html><html> <head> <title>画布canvas测试</title> <style>

2022-04-16 19:22:21 884

原创 js：存储（Storage） + 实现简单的注册登录注销功能

window有两个简单的存储对象：localStorage和sessionStoragelocalStorage永久存储在本地硬盘的数据中，生命周期是永久（除非手动删除硬盘中的文件）sessionStorage临时存储在浏览器中，生命周期为浏览器页面打开时间（页面关闭时数据丢失）两个对象都是以键值对的方式保存数据，有相同的属性和方法：setItem(keyname，value) 存储键值对，如果键名相同，则更新值getItem(keyname) 根据键名查找对应的值key(n) 返回

2022-04-12 09:46:06 1311

原创 js:定时事件setTimeout与setInterval

setTimeout：执行一次，第一个参数是要执行的函数（function），第二个参数是定时时间（number），单位毫秒，cleartimeout停止代码：<!DOCTYPE html><html> <head> <title>定时测试</title> </head> <body style="text-align: center;"> <h1

2022-04-10 23:21:44 341

原创 js:三种弹出框（alter警告，confirm确认，prompt提示）

三种弹出框都属于window对象，完整写作window.alter，三种弹出框都可省略window.alter弹出警告框，只有一个确定按钮alert("这是一个警告框");confirm弹出确认框，有两个按钮：确定和取消，分别返回true和falseconfirm("这是一个确认框，确定返回true，取消返回false");prompt弹出提示框，确定，取消，输入框，确定返回输入框的值（不输入为空""），取消返回Nullprompt("这是一个提示框，确定返回输入值，取消返回N

2022-04-10 17:30:35 13722 1

原创 html：href与src

href(Hypertext Reference)超文本引用常用于<a><link><a href="www.baidu.com">引用一个网页链接</a><link rel="stylesheet" href="css.css"/>//引用一个css文件href引用时不会终止当前文档的加载src（source ）引用资源（或者说加载资源）常用于<img><script><image

2022-04-10 14:39:07 322

原创 js:或运算|| 布尔值Boolean

基本或运算：true || false = truetrue || true = truefalse || false = false布尔值（逻辑真和逻辑假）：有值为真，不具有真实的值为假数字0，未定义Undefined，非数字NaN，空值Null为假Boolean(0);//数字0返回假Boolean("0");//字符串不为空返回真Boolean("");//字符串为空返回假Boolean(Undefined);//未定义返回假var a;//变量a未定义Bool

2022-04-10 12:34:51 1044

原创 css：左中右布局占满屏幕，左右两块固定宽度200px ，中间自适应，先加载中间块

分析：1.中间自适应弹性布局display:flexflex-grow增长系数，左右默认为0，中间设置为1即可分配所有剩余空间（分配给左右固定宽度之后的空间）2：先加载中间css选择器优先级问题（1）越精确优先级越高id选择器>类选择器>元素选择器(伪类、伪元素等暂不讨论)（2）css文件里越后面优先级越高（相同类型）代码：html<!DOCTYPE html><html> <head>

2022-04-09 21:43:24 1872 2

原创 css：建立一个200px*200px的div实现完美居中

分析：（1）实现屏幕居中使用绝对定位（position: absolute）（2）实现文本居中使用弹性盒子（display：flex）不使用弹性盒子，使用文本居中对齐和行高设置代码：使用弹性盒子.center{ width: 200px; height: 200px; border: 1px solid red; position: absolute; left: 50%; top: 50%; /* 使用绝对位置实现屏

2022-04-09 17:31:18 944

qq_52824207的博客