如初的博客🥝

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | HTML5

我们采用 Bootstrap 网站的图标字体，作为播放器的按钮图标。 index.html的代码如下： 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851 ...

06-流程控制语句：循环结构（for和while）

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

前言循环语句：通过循环语句可以反复的执行一段代码多次。 for循环 for循环的语法语法： 123for(①初始化表达式; ②条件表达式; ④更新表达式){ ③语句...} 执行流程： 1234567①执行初始化表达式，初始化变量（初始化表达式只会执行一次）②执行条件表达式，判断是否执行循环：如果为true，则执行循环③ 如果为false，终止循环④执行更新表达式，更新表达式执行完毕继续重复② for循环举例： 123for (var i = 1; i <= 100; i++) { console.log(i);} 上方代码的解释： for循环举例 1234for (var i = 1; i < 13; i = i + 4) { console.log(i);} 上方代码的遍历步骤： 12345678910111213程序一运行，将执行var i = 1;这条语句，所以i的值是1。然后程序会验证一下i < 13是否满足，1<13是真，所以执行一次循环体（就是大括号里面的语句）。执行完循环体之后 ...

09-CSS案例讲解：博雅互动

发表于 2019-04-26 | 更新于 2024-10-22 | css | css

前言 CSS已经学了一些基础内容了，我们来讲解一个小案例吧。以博雅互动的官网首页举例。版心首页的版心如下：这里我们要普及一个概念，叫“版心”。版心是页面中主要内容所在的区域。比如说，网站左上角的logo，设计图给出的左边距是143像素，此时，我们千万不要以为，logo的左边距真的是143像素。因为设计图只是一个版心；而整个页面是处于浏览器的中间，浏览器的宽度是可以随时调整的。我们量一下中间四个方形图的width，是1000px，所以，网页版心的宽度是1000px。网页的结构从结构上来看，网页分为头部（导航栏）、banner区、内容区、底部。导航栏的制作在此我们只讲基础知识的使用，不涉及浏览器的优化。 class==header这个div是顶部的通栏，我们在里面放一个1000px宽的div，作为通栏的版心，我一般把这个版心称为class=inner_c，c指的是center。 class=inner_c不需要给高，因为它可以被内容撑高。现在我们需要在class=inner_c里放三个东西：左侧的logo、中间的导航栏、右侧的“加入我们”。接下来我们开始做右侧的 ...

09-HTML5详解（二）

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | HTML5

本文主要内容拖拽历史地理位置全屏拖拽如上图所示，我们可以拖拽博客园网站里的图片和超链接。在HTML5的规范中，我们可以通过为元素增加 draggable="true" 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。 1、拖拽元素页面中设置了 draggable="true" 属性的元素。举例如下： 1234567891011121314151617181920<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/font-awesome.min.css"> <style> .box1{ w ...

10-CSS的一些小知识

发表于 2019-04-26 | 更新于 2024-10-22 | css | css

隐藏盒子的几种方式隐藏盒子，有以下几种方式：（1）方式一： 1overflow：hidden; //隐藏盒子超出的部分（2）方式二： 1display: none; 隐藏盒子，而且不占位置(用的最多) 比如，点击X，关闭京东首页上方的广告栏。（3）方式三： 123visibility: hidden; //隐藏盒子，占位置。visibility: visible; //让盒子重新显示（4）方式四： 1pacity: 0; //设置盒子的透明度（不建议，因为内容也会半透明），占位置（4）方式五： 1Position/top/left/...-999px //把盒子移得远远的，占位置。（5）方式六： 1margin-left: 1000px; 设置盒子的半透明方式一：pacity: 0.4。优点是方便。缺点是：里面的内容也会半透明方式二：css3的技术来解决半透明。如下： background: rgba(0,0,0,0.3); background: rgba(0,0,0,.3); 备注：a指的是alpha透明度。给标签的形 ...

08-基本数据类型vs引用数据类型

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

前言在之前的javascript基础文章中（编号02、编号07），我们介绍过，变量有以下数据类型：基本数据类型（值类型）：String 字符串、Number 数值、Boolean 布尔值、Null 空值、Undefined 未定义。引用数据类型（引用类型）：Object 对象。本文，我们针对这两种类型，做个详细介绍。我们先来看个例子。基本数据类型举例： 1234567var a = 23;var b = a;a++;console.log(a); // 打印结果：24console.log(b); // 打印结果：23 上面的代码中：a 和 b 都是基本数据类型，让 b 等于 a，然后改变 a 的值之后，发现 b 的值并没有被改变。但是在引用数据类型中，就不同了，我们来看一看。引用数据类型举例： 1234567891011var obj1 = new Object();obj1.name = 'smyh';// 让 obj2 等于 obj1var obj2 = obj1;// 修改 obj1 的 name 属性obj1.name = &#x ...

10-HTML5详解（三）

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | HTML5

Web 存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。 H5 中有两种存储的方式 1、window.sessionStorage 会话存储：保存在内存中。生命周期为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。在同一个窗口下数据可以共享。 2、window.localStorage 本地存储：有可能保存在浏览器内存里，有可能在硬盘里。永久生效，除非手动删除（比如清理垃圾的时候）。可以多窗口共享。 Web 存储的特性（1）设置、读取方便。（2）容量较大，sessionStorage 约5M、localStorage 约20M。（3）只能存储字符串，可以将对象 JSON.stringify() 编码后存储。常见 API 设置存储内容： 1setItem(key, value); PS：可以新增一 ...

10-作用域

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

作用域、变量提升的知识点，面试时会经常遇到。作用域（Scope）的概念作用域指一个变量的作用范围。在js中，一共有两种作用域：全局作用域函数作用域全局作用域直接编写在script标签中的JS代码，都在全局作用域。全局作用域在页面打开时创建，在页面关闭时销毁。在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用。在全局作用域中：创建的变量都会作为window对象的属性保存。创建的函数都会作为window对象的方法保存。全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问的到。变量的声明提前（变量提升）使用var关键字声明的变量（比如 var a = 1），会在所有的代码执行之前被声明（但是不会赋值），但是如果声明变量时不是用var关键字（比如直接写a = 1），则变量不会被声明提前。举例1： 12console.log(a);var a = 123; 打印结果：undefined。（说明变量 a 被被提前声明了，只是尚未被赋值）举例2： 12console. ...

09-函数

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

函数的介绍函数：就是将一些功能或语句进行封装，在需要的时候，通过调用的形式，执行这些语句。函数也是一个对象使用typeof检查一个函数对象时，会返回function 函数的作用：将大量重复的语句写在函数里，以后需要这些语句的时候，可以直接调用函数，避免重复劳动。简化编程，让编程模块化。来看个例子： 12345678console.log("你好");sayHello(); // 调用函数// 定义函数function sayHello(){ console.log("欢迎"); console.log("welcome");} 函数的定义和调用第一步：函数的定义方式一：使用函数声明来创建一个函数。语法： 123function 函数名([形参1,形参2...形参N]){ // 备注：语法中的中括号，表示“可选” 语句...} 举例： 123function sum(a, b){ return a+b;} 解释如下： fun ...

07-CSS3属性详解：Web字体

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | HTML5

前言开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站点中），无需考虑用户电脑上是否安装了此特殊字体。从此，把特殊字体处理成图片的方式便成为了过去。支持程度比较好，甚至 IE 低版本的浏览器也能支持。字体的常见格式不同浏览器所支持的字体格式是不一样的，我们有必要了解一下字体格式的知识。 TureTpe格式：(.ttf) .ttf 字体是Windows和Mac的最常见的字体，是一种RAW格式。支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+。 OpenType格式：(.otf) .otf 字体被认为是一种原始的字体格式，其内置在TureType的基础上。支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+。 Web Open Font Format格式：(.woff) woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩 ...

11-this

发表于 2019-04-26 | 更新于 2024-10-22 | JavaScript | JavaScript

this 解析器在调用函数每次都会向函数内部传递进一个隐含的参数，这个隐含的参数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象。根据函数的调用方式的不同，this会指向不同的对象：【重要】 1.以函数的形式调用时，this永远都是window。比如fun();相当于window.fun(); 2.以方法的形式调用时，this是调用方法的那个对象 3.以构造函数的形式调用时，this是新创建的那个对象 4.使用call和apply调用时，this是指定的那个对象针对第1条的举例： 12345678910111213141516171819function fun() { console.log(this); console.log(this.name);}var obj1 = { name: "smyh", sayName: fun};var obj2 = { name: "vae", sayName: fu ...

11-Zepto入门

发表于 2019-04-26 | 更新于 2024-10-22 | 前端 | jQuery

Zepto 的介绍什么是 Zepto zepto是轻量级的JavaScript库，专门为移动端定制的框架。与jquery有着类似的API，俗称：会jquery就会用zepto zepto的特点针对移动端轻量级，压缩版本只有8kb左右响应，执行快语法、API大部分同jquery一样，学习难度低，上手快。目前API完善的框架中体积最小的一个相关网址官网：http://zeptojs.com/ GitHub：https://github.com/madrobby/zepto Zepto 与 jQuery 的前世今生相同点都是优秀的js函数库语法、API大部分都一样（zepto是按照jquery的思路来设计的） Zepto 相当于 jQuery 的子集同jQuery一样，都是以$符号为核心函数。不同点 Zepto 的初体验（1）Zepto 库的下载：我们去官网下载 Zepto的开发版本zepto.js：官网里，还有这样一张图：上图的意思是：最前面打钩的那五个api，已经包含在zepto.js ...