随笔分类 - Web前端
摘要：1.viewport视口 视口（viewport），是视图窗口的简称。 视口的大小就是HTML元素的实际大小。 但是，在移动端要想展示实际页面大小则必须进行视口的适配设置， 否则，移动端加载页面时，默认视口宽度980px或某个值（布局视口宽度），无法呈现实际大小。 说明： 在桌面显示器上CSS中的1
阅读全文
摘要：1.刮刮乐 案例目标：利用canvas绑定事件，模拟简单刮刮乐程序。 案例思路：在canvas画布上引入是否中奖背景图片，然后在图片上覆盖涂层，当鼠标点击 并移动时擦出路径上的涂层，显示中奖信息。 主要事件：onload，onmousedown，onmousemove，onmouseup 代码示例：
阅读全文
摘要：1.图像绘制 在canvas中渲染图片，使用“drawImage()”方法。 drawImage()方法有三种形态：基础引入、图片缩放、切片。 ⑴ 基础引入 语法：ctx.drawImage(img,x,y); 说明：参数img是一个image或canvas对象，（x,y）是图像左上角的坐标。 ⑵
阅读全文
摘要：1.canvas描述 canvas（画布）是H5提出的新标签，其目的是用于替代类似flash动画或游戏的插件， 能够极大地减少页面结构大小，提高页面响应速度。 说明： ⑴ canvas标签仅是一个图形容器，提供了一个可以绘制图像、图形的区域，可以实时渲染 图形、动画、虚拟图像等，对快速绘图进行了大量
阅读全文
摘要：1.Web Worker线程 JavaScript语言是单线程模型，通过Web Worker为JS创造多线程环境； 由主线程创建Worker线程，将一些任务分配给Worker运行，两者异步执行； Worker完成计算任务后，再将结果返回给主线程。 优点：可以分担计算密集型或高延迟的任务，确保主线程运
阅读全文
摘要：1.数据持久化操作对象 本地存储，是相对于数据库存储而言的，是指将数据存储在个人设备上。 存储的操作方式有三种： ⑴ cookie ⑵ localStorage ⑶ sessionStorage 2.cookie 可以通过前台或后台进行设置和获取数据， 在访问网站时自动向后台发送数据。 ⑴ 前台设置
阅读全文
摘要：1.Ajax封装方法 自封装Ajax请求文件，其实就是将原生的Ajax的请求代码抽象为一个函数， 然后单独生成一个js文件保存，用到Ajax的时候引入文件，调用函数的过程。 封装Ajax大致步骤如下： ⑴ 提供创建xhr对象的兼容性函数 ⑵ 提供发送请求的对外接口 ⑶ 设计并约定对外接口的参数规格
阅读全文
摘要：1.xhr对象发送post请求 Ajax中post请求与get请求不同之处在于多了一个表单，而get请求则是通过url发送附加信息。 在xhr对象中，post请求可以通过FormData构建表单数据。 语法：var formData = new FormData(); formData.append
阅读全文
摘要：1.Ajax简述 全名：Asynchronous JavaScript and xml， 是指围绕“由js向服务器发起http请求”这个功能而开发的一整套完整的方法。 因此，引入jQuery封装好的Ajax会浪费很多资源，实际利用到的功能只是很少一部分， 而原生ajax则可以根据实际需求编写代码，减
阅读全文
摘要：1.时间戳 程序开发中所说的时间戳，通常是指从1970年1月1日0时到当前时间的毫秒数。 time()方法，用于获取当前的时间戳，结果为毫秒数。 date()方法，用于将时间戳结果转换为通常的时间格式。 语法：date(format,timeStamp); //format参数用于定义日期时间格式
阅读全文
摘要：1.PDO预处理Prepare 预处理语句Prepare是PDO提供的一种DB操作方式。 Prepare语句允许用户在“设置SQL语句”与“执行SQL语句”之间，进行参数的注入与提取操作。 Prepare方法的语言逻辑与正常的PDO访问相同，但正常的PDO访问是直接将参数写死的。 Prepare方法
阅读全文
摘要：1.singleLeton singleLeton称为单例模式，是一种构造类的设计模式。 目的是为了在全局获取这个类的对象时总能获取到唯一的对象，而不是每次实例化都创建出新的对象的一种结构。 特别是在DB操作中，DB连接这种对象就必须是通过单例模式来实现的。 代码示例： <?php class DB
阅读全文
摘要：1.可视化工具 ① PHPmyadmin 在Xampp环境下的访问地址： http://127.0.0.1(:端口号)/phpmyadmin 或者 http://localhost(:端口号)/phpmyadmin 端口号为“80”时可不加端口号。 ② Navicat for MySQL 需要单独下
阅读全文
摘要：1.会话Session、缓存Cookie session，可以理解为一种不断验证口令以获得用户持久链接的“访问机制”。 cookie，是当前访问的页面，由后台发往前台页面数据时所夹带的一小段信息。 原理说明： 当后台返回给前台数据的时候，添加的一段“持久”的信息， 因此，这段信息必须在PHP后台代码
阅读全文
摘要：1.运算符 PHP中运算符的用法与JS基本相同， 需要注意的一点区别是：拼接符加号“+”与点号“.”用法不同，以及“+=”和“.=”的区别。 2.foreach 快速遍历 foreach语句提供了快速遍历数组的简单方式，foreach仅能应用于数组和对象。 如果应用于其他数据类型的变量或未初始化的变
阅读全文
摘要：1.Xampp介绍 ⑴ 前台语言：用于处理用户界面交互（html、css、javascript……） 可以在浏览器/node中运行，通过浏览器中解析前台语言的机制（解析器）， 翻译成二进制语言提供给计算机读取。 ⑵ 后台语言：用于处理业务逻辑实现（C、C++、java、php……） 在服务器中运行，
阅读全文
摘要：1.nav导航 ⑴ 基础结构： 一种是在<ul><li>标签中嵌套<a>标签的方式； 另一种是在<nav>标签中嵌套<a>标签的方式； 也可以使用其它标签代替<nav>标签或<a>标签。 涉及到的 class样式如下： <!-- 使用 ul列表创建导航 --> <ul class="nav"> <l
阅读全文
摘要：1.Dropdown下拉按钮 ⑴ 基本样式 外层容器div，class="dropdown" button元素，在一般按钮的基础上增加“.dropdown-toggle”类和 data-toggle="dropdown"属性、“id” “.btn-secondary”样式也可以改换成其他类，如“.b
阅读全文
摘要：1.Card卡片 一个可以添加图像、标题、文本、列表、按钮等多种或一种内容的容器。 ⑴ 基本样式 主要构成： ① 卡片容器，<div class="card"> ③ 图片，<img class="card-img-top">，可以放在 body之前或之后 ④ 卡片体，<div class="card
阅读全文
摘要：1.Alert警告提示框 将任意文本和一个可选的关闭按钮组合在一起就能组成一个警告框。 常用提示框样式： <div class="alert alert-success" role="alert">成功提示</div> <div class="alert alert-info" role="aler
阅读全文
浙公网安备 33010602011771号