Canvas之鼠标滑动特效

大家好,我是皮皮。

我们会看到很多网页的粒子特效;如上图所示,这些都是借助HTML新特性,使用新增标签Canvas得到的效果;那么我们来了解下canvas。

什么是 Canvas

在 MDN 中是这样定义 <canvas> 的:

<canvas> 是 HTML5 新增的元素,可用于通过使用 JavaScript 中的脚本来绘制图形。例如,它可以用于绘制图形、制作照片、创建动画,甚至可以进行实时视频处理或渲染。

这里需要划重点的是,<canvas> 只是一个画布,本身并不具有绘图的能力,绘图必须使用 JavaScript 等脚本语言。

<canvas> 标签允许脚本语言动态渲染位图像。<canvas> 标签创建出了一个可绘制区域,JavaScript 代码可以通过一套完整的绘图功能类似于其他通用二维的 API 访问该区域,从而生成动态的图形。

我们可以认为 <canvas> 标签只是一个矩形的画布。JavaScript 就是画笔,负责在画布上画画。

Canvas 解决了什么问题?

在互联网出现的早期,Web 只不过是静态文本和链接的集合。1993 年,有人提出了 img 标签,它可以用来嵌入图像。

由于互联网的发展越来越迅猛,Web 应用已经从 Web 文档发展到 Web 应用程序。但是图像一直是静态的,人们越来越希望在其网站和应用程序中使用动态媒体(如音频、视频和交互式动画等),于是 Flash 就出现了。

但是随着 Web 应用的发展,出现了 HTML5,在 HTML5 中,浏览器中的媒体元素大受青睐。包括出现新的 Audio 和 Video 标签,可以直接将音频和视频资源放在 Web 上,而不需要其他第三方。

其次就是为了解决只能在 Web 页面中显示静态图片的问题,出现了 Canvas 标签。它是一个绘图表面,包含一组丰富的 JavaScript API,这些 API 使你能够动态创建和操作图像及动画。img 对静态图形内容起到了哪些作用,Canvas 就可能对可编写脚本的动态内容起到哪些作用。

案例-鼠标滑动效果

了解了canvas之后,我们使用新标签搭配原生JS,实现一个简单的页面特效 —— 鼠标滑动效果,如下所示:

页面搭建

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id="myCanvas"></canvas>
</body>

</html>

页面非常简单,只需要一个简单的canvas标签即可;

样式设置

* {
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
}

#myCanvas {
    background-color: #000; /* 黑色 */
}

逻辑交互

初始化设置

var myCanvas = document.getElementById('myCanvas');
var ctx = myCanvas.getContext("2d");
var starlist = [];
function init() {
    // 设置canvas区域的范围为整个页面
    myCanvas.width = window.innerWidth;
    myCanvas.height = window.innerHeight;
};
init();

监听

window.onresize = init; // 监听屏幕大小改变 重新为canvas大小赋值

移动事件

// 当鼠标移动时 将鼠标坐标传入构造函数 同时创建一个对象
myCanvas.addEventListener('mousemove', function (e) {
    // 将对象push到数组中,画出来的彩色小点可以看作每一个对象中记录着信息 然后存在数组中
    starlist.push(new Star(e.offsetX, e.offsetY));
});

随机函数

// 随机函数封装,设置坐标
function random(min, max) {
    // 设置生成随机数公式
    return Math.floor((max - min) * Math.random() + min);
};

对象构造

// 定义了一个构造函数进行对象构造
function Star(x, y) {
    // 将坐标存在每一个点的对象中
    this.x = x;
    this.y = y;
    // 设置随机偏移量
    this.vx = (Math.random() - 0.5) * 3;
    this.vy = (Math.random() - 0.5) * 3;
    this.color = 'rgb(' + random(0, 256) + ',' + random(0, 256) + ',' + random(0, 256) + ')';
    this.a = 1; // 初始透明度
    this.draw(); // 把对象绘制到页面
}

方法封装

//star对象原型上封装方法
Star.prototype = {
    // canvas根据数组中存在的每一个对象的小点信息开始画
    draw: function () {
        ctx.beginPath();
        ctx.fillStyle = this.color;
        // 图像覆盖  显示方式 lighter 会将覆盖部分的颜色重叠显示出来
        ctx.globalCompositeOperation = 'lighter'
        ctx.globalAlpha = this.a;
        ctx.arc(this.x, this.y, 30, 0, Math.PI * 2, false);
        ctx.fill();
        this.updata();
    },
    updata() {
        // 根据偏移量更新每一个小点的位置
        this.x += this.vx;
        this.y += this.vy;
        // 透明度越来越小
        this.a *= 0.98;
    }
}

渲染

// 将小球渲染到页面上
function render() {
    // 每一次根据改变后数组中的元素进行画圆圈  把原来的内容区域清除掉
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height)

    // 根据存在数组中的每一位对象中的信息画圆
    starlist.forEach(function (ele, i) {
        ele.draw();
        // 如果数组中存在透明度小的对象 ,给他去掉 效果展示逐渐消失
        if (ele.a < 0.05) {
            starlist.splice(i, 1);
        }
    });
    requestAnimationFrame(render);
}
render();

总结

本文我们首先了解了粒子特效,它大多数是HTML的新特性,使用canvas标签创建出来的,或者说是绘制吧,canvas是画布,但是还需要搭配js来构造动态效果,创建出好看的特效。总而言之,canvas的出现使得前端页面变得更加丰富多彩,提高了视觉效果,对于用户体验进行了适当的增强,感兴趣的小伙伴可以去尝试下,鼠标滑动效果特效。

小伙伴们,快快用实践一下吧!如果在学习过程中,有遇到任何问题,欢迎加我好友,我拉你进Python学习交流群共同探讨学习。

基于HTML5打造的一款别踩白板小游戏

背景简介

别踩白板这个游戏相信大家都玩过,这个是基于HTML5打造的简单小游戏,在PC端和移动端都能够运行,适应多种平台,今天我们使用原生JS搭配JQuery构建这个小游戏–别踩白板。

一、思路分析

整体页面是一个大的矩形,长宽比例大概是3:2,然后游戏开始,不断有白板降落,然后一行是4个板,一块黑色板块,其余三块是白色板块,通过板块的点击事件绑定,然后判定是什么颜色,只要是白色的,游戏结束(Game Over), 否则玩家积分加1;

二、页面搭建

2.1 HTML层

<div class="wrapper">
        <div id="go">
            <a href="javaScript:void(0)" id="go">Game Start</a>
        </div>
        <div id="main"></div>
</div>

2.2 CSS层

在样式设置前还是先了解大致结构,如下所示:

全局设置样式

*{
    margin:0;
    padding:0;
}

wrapper样式设置样式

.wrapper{
    margin:150px auto;
    width:400px;
    height:600px;
    border:1px solid #ccc;
    position: relative;
    overflow: hidden;
}

wrapper下面的go的设置样式

#go{
    width:100%;
    position: absolute;
    top:0;
    text-align: center;
    z-index:99;
}

开始游戏按钮设置样式

#go a{
    display:block;
    height:100px;
    width:400px;
    color:cyan;
    background-color: #000000;
    text-decoration: none;
    border-bottom:3px dashed #eee;
    font-size:60px;
    font-weight:600;
}

main(方块)设置样式

#main{
    width:400px;
    height:600px;
    position: relative;
    top:-150px;
    /* border:1px solid black; */
}

创建出来的每一行方块设置样式

.row{
    width:400px;
    height:150px;
}

一行中的四个小方块的设置样式

.row div{
   width:99px;
   height:149px;
   border-left:1px solid #222;
   border-bottom:1px solid #222;
   float: left;
   cursor: pointer;
}

在设置好样式之后,得到的大致界面如下所示:

可以看到界面样式比较简单,我们的想法是点击Start Game 按钮后方块自动降落,所以屏幕比较空(暂时)。

2.3 JS层

js层主要用来控制页面产生动态效果;比如产生方块,以及方块的移动等等;

2.3.1获取元素

var main = document.getElementById('main'); // 获取dom元素
var go = document.getElementById('go'); 
var speed = 5, num = 0, timer, flag = true; // 设置初始变量
var colors = ['red', 'green', 'black', 'blue']; // 设置存放颜色的数组

这里存放颜色的数组不需要白色,每一个初始化出来的方块不设置背景颜色,它默认是白色;

2.3.1创建每一行div元素

前面我们说过,一行是四个方块,比例和大方块一样(3:2),它的长宽是:{width: 100px ; height: 150px};

function cDiv() {
    var oDiv = document.createElement('div');// 获取一个随机数将每一行找到一个随机div 设置上颜色
    var index = Math.floor(Math.random() * 4);
    
    oDiv.setAttribute('class', 'row'); // 设置行class类名
    for (var j = 0; j < 4; j++) { // for循环生成一行四个div
        var iDiv = document.createElement('div');
        oDiv.appendChild(iDiv); // 将每一个小div插入每一行中
    }
    
    if (main.childNodes.length == 0) { // 根据父级中是否有子元素   插入新生成的行
        main.appendChild(oDiv);  // 如果父级为空  直接插入
    } else {
        main.insertBefore(oDiv, main.childNodes[0]); // 如果父级有元素   将新生成的一行插入到已有行数的最前面
    } 
    var clickDiv = main.childNodes[0].childNodes[index]; // 根据随机数 设置一行中有颜色的div
    clickDiv.setAttribute('class', 'i'); // 将此元素设置class类名  作为需要点击的标记
    clickDiv.style.backgroundColor = colors[index]; // 同时设置上背景颜色
}

2.3.2点击事件函数封装

function bindEvent() {
    main.addEventListener('click', function (event) { // 给main添加点击事件
        if (flag) {  // 根据flag值判断是否可以点击
            var tar = event.target;  // 获得到点击的源事件
            if (tar.className == 'i') { // 判断点击的块是否为有颜色的 
                tar.style.backgroundColor = '#bbb'; // 改变背景颜色 
                tar.classList.remove('i'); // 移除class类名               
                num++;   // 计数++
            } else {                
                alert('游戏结束,得分:' + num); // 如果点到了白色的块   游戏结束
                clearInterval(timer);
                flag = false;
            }            
            if (num % 10 == 0) { // 如果当前分数为10的倍数   速度++
                speed++;
            }
        }
    })
}

2.3.4 方块移动函数封装

function move() {
    clearInterval(timer); 
    timer = setInterval(function () { // 设置定时器
        var step = parseInt(main.offsetTop) + speed; // 利用top值移动main区域
        main.style.top = step + 'px';
        if (parseInt(main.offsetTop) >= 0) { // 如果main区域移动到可视区域 创建一行新的元素
            cDiv();
            main.style.top = '-150px'; // 同时将main区域移动到可视区域上方
        }
        var len = main.childNodes.length; // 获得mian区域内的行数
        if (len == 6) {  // 如果main区域内行数为6   即显示区域四行  上面新生成一行  下面一行
            
            for (var i = 0; i < 4; i++) { // 遍历最后一行的每一个div
                
                if (main.childNodes[len - 1].children[i].classList.contains('i')) { // 如果其中有一个包含没有被点击的   游戏结束
                    alert('游戏结束,得分:' + num);
                    clearInterval(timer);
                    flag = false; // 游戏结束后不可以继续点击
                }
            }
            
            main.removeChild(main.childNodes[len - 1]); // 将展示过后的每一行移除
        }
    }, 20)
    bindEvent(); // 点击事件
}

在函数里面第一句就是clearInterval(timer);防止定时器多开;

2.3.5 游戏开始

// 开始按钮点击   开始移动 创建每一行元素
function clickStart() {
    go.addEventListener('click', function () {
        go.style.display = 'none';
        move();
    });
}
clickStart();

大致效果如图所示:

这个是使用到HbuilderX中的内置浏览器的界面,游戏结束效果如上图所示;

三、总结

本文我们使用到原生js打造了简单触屏游戏——别踩白板,对于游戏有简单的改动。总体来说首先我们需要设置好游戏界面大致结构和样式,然后通过原生js控制方块的产生移动,以及点击等等,最终才呈现了一个合适的完整的界面效果;感兴趣的小伙伴可以去试一下。

HTML页面基本结构和加载过程

大家好,我是皮皮。

前言

对于前端来说,HTML 都是最基础的内容。

今天,我们来了解一下 HTML 和网页有什么关系,以及与 DOM 有什么不同。通过本讲内容,你将掌握浏览器是怎么处理 HTML 内容的,以及在这个过程中我们可以进行怎样的处理来提升网页的性能,从而提升用户的体验。

一、浏览器页面加载过程

不知你是否有过这样的体验:当打开某个浏览器的时候,发现一直在转圈,或者等了好长时间才打开页面……

此时的你,会选择关掉页面还是耐心等待呢?

这一现象,除了网络不稳定、网速过慢等原因,大多数都是由于页面设计不合理导致加载时间过长导致的。

我们都知道,页面是用 HTML/CSS/JavaScript 来编写的。

  • HTML 的职责在于告知浏览器如何组织页面,以及搭建页面的基本结构;
  • CSS 用来装饰 HTML,让我们的页面更好看;
  • JavaScript 则可以丰富页面功能,使静态页面动起来。

HTML由一系列的元素组成,通常称为HTML元素。HTML 元素通常被用来定义一个网页结构,基本上所有网页都是这样的 HTML 结构:

<html>
    <head></head>
    <body></body>
</html>

其中:

  • html元素是页面的根元素,它描述完整的网页;
  • head元素包含了我们想包含在 HTML 页面中,但不希望显示在网页里的内容;
  • body元素包含了我们访问页面时所有显示在页面上的内容,是用户最终能看到的内容;

HTML 中的元素特别多,其中还包括可用于 Web Components 的自定义元素。

前面我们提到页面 HTML 结构不合理可能会导致页面响应慢,这个过程很多时候体现在<script>和<style>元素的设计上,它们会影响页面加载过程中对 Javascript 和 CSS 代码的处理。

因此,如果想要提升页面的加载速度,就需要了解浏览器页面的加载过程是怎样的,从根本上来解决问题。

浏览器在加载页面的时候会用到 GUI 渲染线程和 JavaScript 引擎线程(更详细的浏览器加载和渲染机制将在第 7 讲中介绍)。其中,GUI 渲染线程负责渲染浏览器界面 HTML 元素,JavaScript 引擎线程主要负责处理 JavaScript 脚本程序。

由于 JavaScript 在执行过程中还可能会改动界面结构和样式,因此它们之间被设计为互斥的关系。也就是说,当 JavaScript 引擎执行时,GUI 线程会被挂起。

以网易云课堂官网为例,我们来看看网页加载流程。

(1)当我们打开官网的时候,浏览器会从服务器中获取到 HTML 内容。

(2)浏览器获取到 HTML 内容后,就开始从上到下解析 HTML 的元素。

(3)<head>元素内容会先被解析,此时浏览器还没开始渲染页面。

我们看到<head>元素里有用于描述页面元数据的<meta>元素,还有一些<link>元素涉及外部资源(如图片、CSS 样式等),此时浏览器会去获取这些外部资源。除此之外,我们还能看到<head>元素中还包含着不少的<script>元素,这些<script>元素通过src属性指向外部资源。

(4)当浏览器解析到这里时(步骤 3),会暂停解析并下载 JavaScript 脚本。

(5)当 JavaScript 脚本下载完成后,浏览器的控制权转交给 JavaScript 引擎。当脚本执行完成后,控制权会交回给渲染引擎,渲染引擎继续往下解析 HTML 页面。

(6)此时<body>元素内容开始被解析,浏览器开始渲染页面。

在这个过程中,我们看到<head>中放置的<script>元素会阻塞页面的渲染过程:把 JavaScript 放在<head>里,意味着必须把所有 JavaScript 代码都下载、解析和解释完成后,才能开始渲染页面。

到这里,我们就明白了:如果外部脚本加载时间很长(比如一直无法完成下载),就会造成网页长时间失去响应,浏览器就会呈现“假死”状态,用户体验会变得很糟糕。

因此,对于对性能要求较高、需要快速将内容呈现给用户的网页,常常会将 JavaScript 脚本放在<body>的最后面。这样可以避免资源阻塞,页面得以迅速展示。我们还可以使用defer/async/preload等属性来标记<script>标签,来控制 JavaScript 的加载顺序。

百度首页

三、DOM 解析

对于百度这样的搜索引擎来说,必须要在最短的时间内提供到可用的服务给用户,其中就包括搜索框的显示及可交互,除此之外的内容优先级会相对较低。

浏览器在渲染页面的过程需要解析 HTML、CSS 以得到 DOM 树和 CSS 规则树,它们结合后才生成最终的渲染树并渲染。因此,我们还常常将 CSS 放在<head>里,可用来避免浏览器渲染的重复计算。

二、HTML 与 DOM 有什么不同

我们知道<p>是 HTML 元素,但又常常将<p>这样一个元素称为 DOM 节点,那么 HTML 和 DOM 到底有什么不一样呢?

根据 MDN 官方描述:文档对象模型(DOM)是 HTML 和 XML 文档的编程接口。

也就是说,DOM 是用来操作和描述 HTML 文档的接口。如果说浏览器用 HTML 来描述网页的结构并渲染,那么使用 DOM 则可以获取网页的结构并进行操作。一般来说,我们使用 JavaScript 来操作 DOM 接口,从而实现页面的动态变化,以及用户的交互操作。

在开发过程中,常常用对象的方式来描述某一类事物,用特定的结构集合来描述某些事物的集合。DOM 也一样,它将 HTML 文档解析成一个由 DOM 节点以及包含属性和方法的相关对象组成的结构集合。

三、DOM 解析

我们常见的 HTML 元素,在浏览器中会被解析成节点。比如下面这样的 HTML 内容:

<html>
    <head>
        <title>标题</title>
    </head>
    <body>
        <a href='xx.com'>我的超链接</a>
        <h1>页面第一标题</h1>
    </body>
</html>

打开控制台 Elements 面板,可以看到这样的 HTML 结构,如下图所示:

在浏览器中,上面的 HTML 会被解析成这样的 DOM 树,如下图所示:

我们都知道,对于树状结构来说,常常使用parent/child/sibling等方式来描述各个节点之间的关系,对于 DOM 树也不例外。

举个例子,我们常常会对页面功能进行抽象,并封装成组件。但不管怎么进行整理,页面最终依然是基于 DOM 的树状结构,因此组件也是呈树状结构,组件间的关系也同样可以使用parent/child/sibling这样的方式来描述。同时,现在大多数应用程序同样以root为根节点展开,我们进行状态管理、数据管理也常常会呈现出树状结构。

四、事件委托

我们知道,浏览器中各个元素从页面中接收事件的顺序包括事件捕获阶段、目标阶段、事件冒泡阶段。其中,基于事件冒泡机制,我们可以实现将子元素的事件委托给父级元素来进行处理,这便是事件委托。

如果我们在每个元素上都进行监听的话,则需要绑定三个事件;(假设页面上有a,b,c三个兄弟节点)

function clickEventFunction(e) {
  console.log(e.target === this); // logs `true`
  // 这里可以用 this 获取当前元素
}
// 元素a,b,c绑定
element2.addEventListener("click", clickEventFunction, false);
element5.addEventListener("click", clickEventFunction, false);
element8.addEventListener("click", clickEventFunction, false);

使用事件委托,可以通过将事件添加到它们的父节点,而将事件委托给父节点来触发处理函数:

function clickEventFunction(event) {
  console.log(e.target === this); // logs `false`
  // 获取被点击的元素
  const eventTarget = event.target;
  // 检查源元素`event.target`是否符合预期
  // 此处控制广告面板的展示内容
}
// 元素1绑定
element1.addEventListener("click", clickEventFunction, false);

这样能解决什么问题呢?

  • 绑定子元素会绑定很多次的事件,而绑定父元素只需要一次绑定。
  • 将事件委托给父节点,这样我们对子元素的增加和删除、移动等,都不需要重新进行事件绑定。

常见的使用方式主要是上述这种列表结构,每个选项都可以进行编辑、删除、添加标签等功能,而把事件委托给父元素,不管我们新增、删除、更新选项,都不需要手动去绑定和移除事件。

如果在列表数量内容较大的时候,对成千上万节点进行事件监听,也是不小的性能消耗。使用事件委托的方式,我们可以大量减少浏览器对元素的监听,也是在前端性能优化中比较简单和基础的一个做法。

注意:

  1. 如果我们直接在document.body上进行事件委托,可能会带来额外的问题;
  2. 由于浏览器在进行页面渲染的时候会有合成的步骤,合成的过程会先将页面分成不同的合成层,而用户与浏览器进行交互的时候需要接收事件。此时,浏览器会将页面上具有事件处理程序的区域进行标记,被标记的区域会与主线程进行通信。
  3. 如果我们document.body上被绑定了事件,这时候整个页面都会被标记;
  4. 即使我们的页面不关心某些部分的用户交互,合成器线程也必须与主线程进行通信,并在每次事件发生时进行等待。这种情况,我们可以使用passive: true选项来解决

五、总结

我们了解了 HTML 的作用,以及它是如何影响浏览器中页面的加载过程的,同时还介绍了使用 DOM 接口来控制 HTML 的展示和功能逻辑。我们了解了DOM解析事件委托等相关概念。

  1. true选项来解决

五、总结

我们了解了 HTML 的作用,以及它是如何影响浏览器中页面的加载过程的,同时还介绍了使用 DOM 接口来控制 HTML 的展示和功能逻辑。我们了解了DOM解析事件委托等相关概念。

手把手教你使用CanvasAPI打造一款拼图游戏

一、canvas简介

  1. canvas是HTML5提供的一种新标签,双标签;
  2. HTML5 canvas标签元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成;
  3. canvas标签只是图形容器,必须使用脚本来绘制图形;

Canvas是一个矩形区域的画布,可以用JavaScript在上面绘画;

二、案例目标

我们今天的目标是使用HTML5画布技术制作一款拼图小游戏,要求将图像划分为3*3的9块方块并打乱排序,用户可以移动方块拼成完整图片。

效果如下所示:

手把手教你使用CanvasAPI打造一款拼图游戏

三、程序流程

3.1 HTML静态页面布局

<div id="container">
            <!--页面标题-->
            <h3>HTML5画布综合项目之拼图游戏</h3>
            <!--水平线-->
            <hr />
            <!--游戏内容-->
            <!--游戏时间-->        
            <div id="timeBox">
                共计时间:<span id="time">00:00:00</span>
            </div>
            <!--游戏画布-->
            <canvas id="myCanvas" width="300" height="300" style="border:1px solid">
                对不起,您的浏览器不支持HTML5画布API。
            </canvas>
            <!--游戏按钮-->
            <div>
                <button onclick="restartGame()">
                    重新开始
                </button>
            </div>  
</div>

效果如下所示:

手把手教你使用CanvasAPI打造一款拼图游戏

我们可以看到页面的大致结构是已经显现出来了,就是骨架已经搭建好了,现在我们要使用css强化样式;

3.2 CSS打造页面样式

整体背景设置

body {
    background-color: silver;/*设置页面背景颜色为银色*/
}

游戏界面样式设置

#container {
    background-color: white;
    width: 600px;   
    margin: auto;
    padding: 20px;
    text-align: center; 
    box-shadow: 10px 10px 15px black;
}

游戏时间面板样式设置

#timeBox {
    margin: 10px 0;
    font-size: 18px;
}

游戏按钮样式设置

button {
    width: 200px;
    height: 50px;
    margin: 10px 0;
    border: 0;
    outline: none;
    font-size: 25px;
    font-weight: bold;
    color: white;  
    background-color: lightcoral;
}

鼠标悬浮时的按钮样式设置

button:hover {
    background-color: coral;
}

设置好界面整体样式之后我们得到完整的界面,如下所示:

手把手教你使用CanvasAPI打造一款拼图游戏

可以看到整体的静态界面已经搭建出来了

3.3 js构建交互效果

3.3.1 对象的获取以及图片的设置

目标对象的获取

var c = document.getElementById('myCanvas'); //获取画布对象
var ctx = c.getContext('2d'); //获取2D的context对象

声明拼图的图片素材来源

var img = new Image();
img.src = "image/pintu.jpg";
                
img.onload = function() { //当图片加载完毕时
    generateNum(); //打乱拼图的位置
    drawCanvas(); //在画布上绘制拼图
}

3.3.2 初始化拼图

  • 需要将素材图片分割成3行3列的9个小方块,并打乱顺序放置在画布上;
  • 为了在游戏过程中便于查找当前的区域该显示图片中的哪一个方块,首先为原图片上的9个小方块区域进行编号;

定义初始方块位置

var num = [[00, 01, 02], [10, 11, 12], [20, 21, 22]];

打乱拼图的位置

function generateNum() { //循环50次进行拼图打乱    
         for (var i = 0; i < 50; i++) {
      //随机抽取其中一个数据
            var i1 = Math.round(Math.random() * 2);
            var j1 = Math.round(Math.random() * 2);
      //再随机抽取其中一个数据
            var i2 = Math.round(Math.random() * 2);
            var j2 = Math.round(Math.random() * 2);
      //对调它们的位置
            var temp = num[i1][j1];
            num[i1][j1] = num[i2][j2];
            num[i2][j2] = temp;
   }
}

绘制拼图

自定义名称的drawCanvas()方法用于在画布上绘制乱序后的图片;

function drawCanvas() {
    //清空画布
    ctx.clearRect(0, 0, 300, 300);
    //使用双重for循环绘制3x3的拼图
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 3; j++) {
            if (num[i][j] != 22) {
                //获取数值的十位数,即第几行
                var row = parseInt(num[i][j] / 10);
                //获取数组的个位数,即第几列
                var col = num[i][j] % 10;
                //在画布的相关位置上绘图
                ctx.drawImage(img, col * w, row * w, w, w, j * w, i * w, w, w); // w:300 / 3 = 100(小图宽度)
            }
        }
    }
}

如下所示:

手把手教你使用CanvasAPI打造一款拼图游戏

3.3.3 事件绑定

监听鼠标监听事件

c.onmousedown = function(e) {
    var bound = c.getBoundingClientRect(); //获取画布边界
    
    var x = e.pageX - bound.left; //获取鼠标在画布上的坐标位置(x,y)
    var y = e.pageY - bound.top;


    var row = parseInt(y / w); //将x和y换算成几行几列
    var col = parseInt(x / w);


    
    if (num[row][col] != 22) { //如果当前点击的不是空白区域
        detectBox(row, col); //移动点击的方块
        drawCanvas(); //重新绘制画布
        var isWin = checkWin(); //检查游戏是否成功
        
        if (isWin) { //如果游戏成功
            clearInterval(timer); //清除计时器
            ctx.drawImage(img, 0, 0); //绘制完整图片
            ctx.font = "bold 68px serif"; //设置字体为加粗、68号字,serif
            ctx.fillStyle = "red"; //设置填充色为红色
            ctx.fillText("游戏成功!", 20, 150); //显示提示语句
        }
    }
}

点击方块移动

function detectBox(i, j) {
    //如果点击的方块不在最上面一行
    if (i > 0) {
        //检测空白区域是否在当前方块的正上方
        if (num[i-1][j] == 22) {
            //交换空白区域与当前方块的位置
            num[i-1][j] = num[i][j];
            num[i][j] = 22;
            return;
        }
    }
    //如果点击的方块不在最下面一行
    if (i < 2) {
        //检测空白区域是否在当前方块的正下方
        if (num[i+1][j] == 22) {
            //交换空白区域与当前方块的位置
            num[i+1][j] = num[i][j];
            num[i][j] = 22;
            return;
        }
    }
    //如果点击的方块不在最左边一列
    if (j > 0) {
        //检测空白区域是否在当前方块的左边
        if (num[i][j - 1] == 22) {
            //交换空白区域与当前方块的位置
            num[i][j - 1] = num[i][j];
            num[i][j] = 22;
            return;
        }
    }
    //如果点击的方块不在最右边一列
    if (j < 2) {
        //检测空白区域是否在当前方块的右边
        if (num[i][j + 1] == 22) {
            //交换空白区域与当前方块的位置
            num[i][j + 1] = num[i][j];
            num[i][j] = 22;
            return;
        }
    }
}

3.3.4 游戏计时

  • 自定义函数getCurrentTime()用于进行游戏计时;
  • function getCurrentTime() {
    s = parseInt(s); //将时分秒转换为整数以便进行自增或赋值
    m = parseInt(m);
    h = parseInt(h);
    s++; //每秒变量s先自增1
    if (s == 60) {
    s = 0; //如果秒已经达到60,则归0
    m++; //分钟自增1
    } if (m == 60) {
    m = 0; //如果分钟也达到60,则归0
    h++; //小时自增1
    //修改时分秒的显示效果,使其保持两位数
    if (s < 10)
    s = “0” + s;
    if (m < 10)
    m = “0” + m;
    if (h < 10)
    h = “0” + h;
    time.innerHTML = h + “:” + m + “:” + s; //将当前计时的时间显示在页面上
    }
  • 在JavaScript中使用setInterval()方法每隔1秒钟调用getCurrentTime()方法一次,以实现更新效果;var timer = setInterval(“getCurrentTime()”, 1000);

3.3.5 游戏成功与重新开始

游戏成功判定与显示效果的实现

  • 自定义函数checkWin()用于进行游戏成功判断;
function restartGame() {
    clearInterval(timer);  //清除计时器
    s = 0; //时间清零
    m = 0;
    h = 0;
    getCurrentTime();  //重新显示时间
    timer = setInterval("getCurrentTime()", 1000);
 
    generateNum(); //重新打乱拼图顺序
    drawCanvas(); //绘制拼图
    
}
  • 如果成功则使用clearInterval()方法清除计时器。然后在画布上绘制完整图片,并使用fillText()方法绘制出“游戏成功”的文字图样;if (isWin) { //如果游戏成功
    clearInterval(timer); //清除计时器
    ctx.drawImage(img, 0, 0); //绘制完整图片
    ctx.font = “bold 68px serif”; //设置字体为加粗、68号字,serif
    ctx.fillStyle = “red”; //设置填充色为红色
    ctx.fillText(“游戏成功!”, 20, 150); //显示提示语句
    }

3.4 最终效果演示

手把手教你使用CanvasAPI打造一款拼图游戏

静态效果如上所示,至于游戏成功这里伙计们可以自行操作;

四、总结

本次案例我们使用HTML5的新特性canvas画布标签打造了简单的9宫格拼图游戏,总体来说没有特别的复杂,主要是图片的分割方块移动事件的绑定,以及重新游戏的初始化操作,明确了游戏逻辑之后其实代码的编写其实不难。感兴趣的小伙伴可以去尝试一下。

一文解读JavaScript中的文档对象(DOM)

大家好,我是IT共享者,人称皮皮。

前言

相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。

1.文档对象(DOM)

1).Document对象

这是我们用的最普遍的一个文档对象了,专门用来操作DOM节点时用。

1)).获取元素

document.getElementById()           #通过id查找HTML元素
document.getElementsByName()        #通过name查找HTML元素
document.getElementsByTagName()     #通过标签名查找HTML元素
document.getElementsByClassName()   #通过类名查找HTML元素 
document.querySelector(".h")        #第一个类名为 "h" 的元素
document.querySelectorAll("div.no, div#h") #所有class为"no"或者id为"h"的div元素
document.body          #获取body标签
document.documentElement   #获取html标签

2)).获取网页内容

document.cookie        #网页cookie
document.domain        #文档的域名
document.lastModified  #文档被最后修改的日期和时间
document.referrer      #载入当前文档的文档的URL
document.title         #当前文档的标题
document.URL           #当前文档的URL
document.doctype       #当前文档的doctype
document.baseURI       #当前文档的绝对URI
document.documentMode   #浏览器使用的模式
document.documentURI    #文档的URI
document.implementation #DOM实现
document.inputEncoding  #文档的编码(字符集)
document.readyState     #文档的(加载)状态
document.strictErrorChecking    #是否强制执行错误检查

3)).文档写入

document.write('hello world')   向文档写入文本
document.writeln('hello world') 向文档写入文本并换行

4)).获取集合

document.all        #所有html元素
document.anchors    #所有Anchor引用
document.forms      #所有的表单引用
document.images     #所有的图片引用
document.links      #所有的超链接引用
document.scripts    #所有的脚本引用
document.embeds     #所有的流媒体引用

5)).获取节点

childNodes          #获取子节点的集合 ,返回数组 ,并把换行和空格也当成是节点信息。
children            #获取子节点的集合 ,返回数组   
firstChild          #获取第一个子元素  并把换行和空格也当成是节点信息
firstElementChild   #获取第一个子节点
lastChild           #获取最后一个子节点 并把换行和空格也当成是节点信息
lastElementChild    #获取最后一个子节点
parentNode          #获取父节点
parentElement       #获取父节点(IE)
offsetParent        #获取所有父节点  对应的值是body下的所有节点信息
previousSibling         #获取上一个兄弟节点  匹配字符,包括换行和空格,而不是节点
previousElementSibling  #获取上一个兄弟节点  直接匹配节点
nextSibling             #获取下一个兄弟节点  匹配字符,包括换行和空格,而不是节点
nextElementSibling      #获取下一个兄弟节点  直接匹配节点
ownerDocument           #元素的根节点

这里我们获取到了所有的Div元素,我们可以针对性的获取一个ID下的Div的子元素以及它的兄弟和父,子元素,如下:

6)).创建节点

我们可以自定义节点并添加值,不过要将它添加到文档中去,所以必须添加节点,一般和下方的增加节点配套使用。

document.createElement(标签)  #创建HTML元素
document.createTextNode(文本) #给文档添加文本
document.createComment(文本)  #创建一个注释节点
document.createDocumentFragment() #创建文档粉碎节点

7)).增加节点

appendChild(节点) #节点被添加到元素的末尾
insertBefore(a,b) #a节点会插入b节点的前面

8)).删除节点

removeChild(节点名)  #被移除的节点仍在文档中,只是文档中已没有其位置了

9)).替换节点

replaceChild(插入的节点,被替换的节点)

10)).复制节点

a.cloneChild() #复制a节点,复制出来的节点作为返回值为true时,则a元素后代也一并复制。否则,仅复制a元素本身

11)).节点属性

#节点类型 nodeType 有三种情况
#1.元素节点  2.属性节点  3.文本节点


#节点名称 nodeName 


#节点值 nodeValue 
#元素节点没节点值,为null 
#文本节点的节点值就是文本
#属性节点的节点值就是该属性值


#节点属性获取
a.width
a['width']
a.gerAttribute(属性名)  返回指定的属性值
a.gerAttributeNode(属性名) 返回指定的属性节点
节点属性设置
a.width=400
a['width']=400
a.attributes['width']=400
a.setAttribute('width',400) 添加指定的属性
a.setAttributeNode(b) 添加指定的属性节点


#节点属性删除
a.removeChild(子节点)    从元素中移除子节点
a.removeAttribute(属性)  从元素中移除指定属性
a.removeAttributeNode(属性) 移除指定的属性节点,并返回被移除的节点


a.id 获取当前元素的id
a.className  获取当前元素的class
a.classList  获取当前元素的class列表


a.accessKey='w'    设置或返回元素的快捷键
a.namespaceURI     返回指定节点的命名空间的 URI
a.dir              设置或返回元素的内容是否可编辑
a.normalize()      合并元素中相邻的文本节点,并移除空的文本节点
a.tabIndex='3'     设置或返回元素的tab键控制次序
a.tagName          返回元素的标签名
a.textContent      设置或返回节点及其子代的文本内容
a.title            设置或返回元素的标题属性
a.item(num)        返回节点列表中位于指定下标的节点
a.length           返回节点列表中的节点数

12)).获取元素文本

a.innerHTML  获取或者设置对象内的HTML
a.innerText  获取或者设置对象内的文本
a.outerHTML  获取或者设置对象外的HTML
a.outerText  获取或者设置对象外的文本
a.value      获取或者设置表单元素的值

总结

这篇文章主要介绍了JavaScript的文档对象。下一篇文章,我们继续介绍JavaScript,敬请期待!

一文解读JavaScript事件对象和表单对象

前言

相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会JavaScript,因为它对做网页方面是有很大作用的。

1.事件对象(Event)

1).事件对象常量

bubbles         事件是否是起泡事件类型 
cancelable      事件是否可确定可取消的默认动作
currentTarget   事件监听器触发该事件的元素 
eventPhase      事件传播的当前阶段 
target          触发此事件的元素(事件的目标节点),srcElement(IE)
timeStamp       事件生成的日期和时间
type            当前Event对象表示的事件的名称 
initEvent()     初始化新创建的 Event 对象的属性
preventDefault() 不执行默认动作
stopPropagation()   停止冒泡 cancelBubble
x,y             元素的 x 坐标和 y 坐标
returnValue     设置或获取事件的返回值
fromElement  在IE中用于mouseover和mouseout 事件,可以引用移出鼠标的元素。
toElement  在IE中用于mouseover和mouseout 事件,该属性引用移入鼠标的元素。
returnValue 设置或获取事件的返回值
keyCode(IE) 键盘码 which()  charCode
offsetX,offsetY 事件在源元素的中的x坐标和y坐标。

这在后面的其它操作中我都有举例子,大家可以仔细看看。

2).键盘鼠标事件

altKey          判断"ALT" 是否被按下 
button          判断哪个鼠标按钮被点击 
clientX         判断鼠标指针的水平坐标
clientY         判断鼠标指针的垂直坐标
ctrlKey         判断"CTRL" 键是否被按下
keyIdentifier   按键的标识符  
keyLocation     按键在设备上的位置 
metaKey         判断"meta" 键是否被按下
relatedTarget   与事件的目标节点相关的节点
screenX         判断鼠标指针的水平坐标
screenY         判断鼠标指针的垂直坐标
shiftKey        判断"SHIFT" 键是否被按下

这个在后面也会提到,比如获取鼠标坐标:

2.表单对象

1).Form对象

document.forms['表单名']['text'].value #获取表单中的文本框的值
acceptCharset       服务器字符集 
action              设置或返回表单的action
enctype             设置或返回表单用来编码内容的MIME类型 
length              返回表单中的元素数目
method              设置或返回将数据发送到服务器的 HTTP 方法
name                设置或返回表单的名称
target              设置或返回表单提交结果的Frame或Window

2).Button对象(submit,hidden与它方法差不多)

b.accessKey                 设置或返回访问按钮的快捷键
b.alt                       设置或返回当浏览器无法显示按钮时供显示的替代文本 
b.disabled=true|false       设置或返回是否禁用按钮
b.form                      返回对包含该按钮的表单对象的引用
b.id                        设置或返回按钮的 id
b.name                      设置或返回按钮的名称 
b.tabIndex='3'              设置或返回按钮的 tab 键控制次序 
b.type                      返回按钮的表单元素类型 
b.value                     设置或返回在按钮上显示的文本

3).Checkbox 对象(Radio与它方法差不多)

和上面的对象差不多,唯一不同的便是多了一个默认值选中值:“defaultChecked”。

4).Select 对象

s.options  返回下拉列表数组
s.selectedIndex=num    设置或返回下拉列表中被选选项的索引号
s.multiple=true|false  设置或返回是否可有多个选项被选中
s.size                 设置或返回下拉列表中一次显示显示的选项数
s.add()       向下拉列表添加一个选项
s.remove()    从下拉列表中删除一个选项

总结

这篇文章主要介绍了JavaScript的事件对象和表单对象。下一篇文章,我们继续介绍JavaScript,敬请期待!

手把手教你利用JavaScript 获取任意网站图片链接

前言

大家好,我是IT共享者,人称皮皮。

妹纸图这个网站想必大家都非常熟悉了,老司机的天堂。小编第一次进表示身体逐渐变得空虚,表示一定要克制自己,远离这种正能量的网站。话不多说,今天带大家获取妹纸图上的图片链接。然后大家都懂得。

一、项目准备

360浏览器,仅此而已

二、项目目的

获取页面所有美女图片

三、项目步骤

1.打开浏览器,搜索图片,我们以美女图片为例:

画面太美,不忍直视。

2.打开浏览器控制台

F12,即可打开浏览器控制台,我们今天要做的是获取所有的图片链接,顺便查看下图片。如下图:

今天我们就是要在这里面获取到所有的图片链接,相信没接触过前端的人肯定对此一无所知,但是小编接下来讲过了之后你还是一无所知,那就是你的不对了。

3.控制台功能大揭秘

大家可能觉得这个地方没啥用处,啥都没有,还不如Element Network用处大;诚然前两者的确用处很大,可以用来分析网页结构和网页请求,但是我想说的是控制台的功能你永远不要小瞧了,因为它可以使你在开发过程中能快速的见到效果图,比如,你写个代码,但是你想看看它现在能否运行,一般的做法就是写个HTML+CSS然后将JavaScript嵌入到里面去,这样做显然太麻烦,而且你修改后还得在刷新才能浏览器中运行看到效果,到最后就是浏览器和编辑器频繁切换,影响开发速度和效率甚至占用多余的系统资源。于是,控制台应运而生,它使得我们可以轻松的使用JavaScript代码而无需再搭配HTML和CSS才能运行,一个Console统统搞定,这就是我们刚刚说的控制台。我们可以先来看看它的功能:

可以看到,它是有自动提示功能的,而且比任何三方IDE的都要全面,因为它是和浏览器配套使用的,而其它IDE则无法做到这么齐全,所以你可以看到有时候如果你想用某种方法它不会提示,那就只有一个原因,就是你用错了。

1).改变它的编辑状态

控制台输入:

![4](4.jpgdocument.body.contentEditable=true

在编辑状态下,我们的点击操作是没有任何作用的,也就是说只能修改,如果想还原,刷新一下浏览器即可。

2).定位特定元素

这里我们可以先看看我们要看的浏览器图片元素的信息,可以先打印出所有的图片 ,这里使用一个特殊符号:

我们可以看到,通过这个语法糖可以打印当前页面所有的图片信息,显示70,说明这个页面有70张图片,当小编再次滚动鼠标时发现图片数量就变多了,变成了136张图片,这说明它是Ajax加载的。

除了这种获取图片的方式外,还可以这样:

document.images

得到的结果和上面的一模一样,有了这几样的知识点积累,我们现在就可以轻松获取所有的图片链接了。

4.获取图片链接和图片名

这里我们要把获取到的图片添加到数组中,然后在遍历即可打印出所有的图片。

1).建立数组存放所有的图片

ab=document.images #获取当前页面所有图片
var aa=[]           #建立数组
for(const y of ab){    #建立const变量使得无法修改
    aa.push(y); #把图片装进数组
}

2).遍历数组打印图片链接

这里可以使用多种方法,小编一 一介绍。

1)).For …in

for(const a in aa){
    console.log(aa[a])
}

2)).For…of

for(const a of aa){
    console.log(a)
}

3)).ForEach

aa.forEach(function(val,item,array){
  console.log(val)
});

4)).Map

![10](10.jpgaa.map(function(val,item,array){
  console.log(val)
});

可以看到第四种方法和第三种方法差不多,但是它们还是有差别的,前者是没有返回值的,而后者有并且后者支持修改返回值。虽然我们打印出了图片链接,但是图片名字并没有打印出来,于是小编开始找图片名字:

发现它在Div标签里,于是小编开始找满足条件的Div:

document.querySelectorAll('div.img_tit')#精确找到所有类名为img_tit的Div
document.getElementsByClassName('img_tit')#找到所有类名为img_tit

然后我们先输出图片名再输出图片链接,这样就可以使用循环然后进行判断,如下图:

var a=0;
do{
  a++;
  if(a%2==0){
    console.log(aa[a])
}
    else{
    console.log(ac[a])
  }


}
while(a<ac.length)

可以看到按照顺序打印出了。另外,我们发现当我们打印出了这些结果值后感觉控制台都已经爆满了,我们想清空这些信息那该怎么办了?一行代码就能搞定啦。

当然,这项功能你可别指望它能在你控制台相当干净的时候起作用。看了这么多了我们再来看看图片的查看功能吧。

5.图片查看

希望上面的方法应该不会让读者眼花缭乱才是,因为Js是一门动态语言,所以它的骚操作实在是太多了,你懂的。言归正传,如果我们现在想快速查看某一张图片,那么怎么办呢?有人说单击它,我想告诉你的是,虽然这可以实现查看功能,但这是在被包裹的网页中查看,如果我们在单独的网页中查看了,比如说这样:

那我们要想只看这一张图片而不看其它的内容了,那又该怎么办了?最传统的方法:

点击红色箭头处,可以看到如下图:

感觉是不是就好多了,没有其它的东西干扰我们,专心致志的看图,多爽。但是我们开发者可不能这么做,因为太没技术含量了,我们要时时刻刻挑战自己;所以我决定用JS代码来查看这张图片。

我们可以先看看这个,代码如下:

function view(src,filename) {
                var link = document.createElement('a');#创建a标签
                link.setAttribute("download", filename);#设置download属性
                link.href = src;#设置href属性
                document.body.appendChild(link);#将a标签添加到网页主体中
                link.click();
                document.body.removeChild(link);#删除a标签
            }
view('https://p0.ssl.qhimgs1.com/bdr/326__/t0160c8456511be3c4e.jpg','t0160c8456511be3c4e.jpg')

可以看到我们成功在浏览器中查看了这张图片。

四、总结

突然发现小编还是比较有才的,这都能被小编捕捉到,不过还是不能太得意,以免翻车。另外,如果大家想在自家服务器上添加图片下载功能,超简单的,一行代码搞定。

<a href="http://localhost:8080/12.jpg" download="12.jpg">点我下载</a>

这样就能生成一个下载图片的点击链接了。

一篇文章帮助你理解跑马灯的滚动原理

走马灯效果其实就是利用<marquee>标签进行图片和文字滚动,设置的样式不一样,滚动的效果就不一样,实现“走马观花”的效果。

一、滚动方式

1. 普通滚动

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>


    </body>
  <marquee>这里是您要填的内容</marquee>
</html>
一篇文章帮助你理解跑马灯的滚动原理

1.1 文字碰到左边就会停止

<marquee behavior="slide">这里是您要填的内容</marquee>
一篇文章帮助你理解跑马灯的滚动原理

1.2 文字碰到右边就会停止

<marquee behavior=”slide” direction=”right”>这里是您要填的内容</marquee>

一篇文章帮助你理解跑马灯的滚动原理

2.图片滚动

2.1 预设滚动

图片滚动到右边界,自动再从左边滚动。

<marquee behavior="scroll"><img src="img/border.png"></marquee>
一篇文章帮助你理解跑马灯的滚动原理

2.2 来回滚动

<marquee behavior="alternate"><img src="img/border.png"></marquee>
一篇文章帮助你理解跑马灯的滚动原理

2.3 滚动的方向

向左滚动

<marquee direction="left"><img src="img/border.png"></marquee>

向右滚动

<marquee direction="right"><img src="img/border.png"></marquee>

向下滚动

<marquee direction="down"><img src="img/border.png"></marquee>

向上滚动

<marquee direction="up"><img src="img/border.png"></marquee>
一篇文章帮助你理解跑马灯的滚动原理

二、参数

1. 设定滚动次数(可自行更改参数)

<marquee loop="2">这里是您要填的内容</marquee>

2. 设定背景颜色 (16进位颜色或文字输入)

<marquee bgcolor="#??????">这里是您要填的内容</marquee>

3. 设定滚动宽度

为了方便辨别,这里加上bgcolor属性。

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>


        <body>
        <div >
            <p>初始化</p>
            <marquee bgcolor="red"; >这里是您要填的内容</marquee>
        </div>
        <div>
            <p>设置高度</p>
            <marquee bgcolor="aqua";width="380">这里是您要填的内容</marquee>
        </div>


</body>
</html>
一篇文章帮助你理解跑马灯的滚动原理

4. 设定滚动高度

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>


        <body>
        <div >
            <p>初始化</p>
            <marquee bgcolor="red"; >这里是您要填的内容</marquee>
        </div>
        <div>
            <p>设置高度</p>
            <marquee bgcolor="aqua"; height="38">这里是您要填的内容</marquee>
        </div>


</body>
</html>
一篇文章帮助你理解跑马灯的滚动原理

5. 设定滚动速度 (可自行更改参数)

<marquee scrollamount="30">这里是您要填的内容</marquee>
一篇文章帮助你理解跑马灯的滚动原理

三、总结

本文以html为基础,主要介绍了常见的效果(跑马灯)的滚动原理,详细介绍了三种常见的滚动以及其相关属性,以及对设置参数时遇到的难题一一解答,希望能够帮助你学习。

一篇文章带你了解HTML的网页布局结构

大家好,我是IT共享者,人称皮皮。这篇我们来讲讲CSS网页布局。

一、网页布局

网页布局有很多种方式,一般分为以下几个部分:头部区域、菜单导航区域、内容区域、底部区域


1. 头部区域

头部区域位于整个网页的顶部,一般用于设置网页的标题或者网页的 logo:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS 项目(runoob.com)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}


/* 头部样式 */
.header {
  background-color: #f1f1f1;
  padding: 20px;
  text-align: center;
}
</style>
</head>
<body>


<div class="header">
  <h1>头部区域</h1>
</div>


</body>
</html>


2. 菜单导航区域

菜单导航条包含了一些链接,可以引导用户浏览其他页面:

/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接 - 修改颜色 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

3. 内容区域

内容区域一般有三种形式:

  • 1 列:一般用于移动端。
  • 2 列:一般用于平板设备。
  • 3 列:一般用于 PC 桌面设备。

不相等的列

不相等的列一般是在中间部分设置内容区域,这块也是最大最主要的,左右两次侧可以作为一些导航等相关内容,这三列加起来的宽度是 100%。

例:

.column {
  float: left;
}
 
/* 左右侧栏的宽度 */
.column.side {
  width: 25%;
}
 
/* 中间列宽度 */
.column.middle {
  width: 50%;
}
 
/* 响应式布局 - 宽度小于600px时设置上下布局 */
@media screen and (max-width: 600px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

4. 底部区域

底部区域在网页的最下方,一般包含版权信息和联系方式等。

.footer {
  background-color: #F1F1F1;
  text-align: center;
  padding: 10px;
}

二、响应式网页布局

通过以上等学习我们来创建一个响应式等页面,页面的布局会根据屏幕的大小来调整:

案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>项目</title>
<style>
* {
  box-sizing: border-box;
}
 
body {
  font-family: Arial;
  padding: 10px;
  background: #f1f1f1;
}
 
/* 头部标题 */
.header {
  padding: 30px;
  text-align: center;
  background: white;
}
 
.header h1 {
  font-size: 50px;
}
 
/* 导航条 */
.topnav {
  overflow: hidden;
  background-color: #333;
}
 
/* 导航条链接 */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
 
/* 链接颜色修改 */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
 
/* 创建两列 */
/* Left column */
.leftcolumn {   
  float: left;
  width: 75%;
}
 
/* 右侧栏 */
.rightcolumn {
  float: left;
  width: 25%;
  background-color: #f1f1f1;
  padding-left: 20px;
}
 
/* 图像部分 */
.fakeimg {
  background-color: #aaa;
  width: 100%;
  padding: 20px;
}
 
/* 文章卡片效果 */
.card {
  background-color: white;
  padding: 20px;
  margin-top: 20px;
}
 
/* 列后面清除浮动 */
.row:after {
  content: "";
  display: table;
  clear: both;
}
 
/* 底部 */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
  margin-top: 20px;
}
 
/* 响应式布局 - 屏幕尺寸小于 800px 时,两列布局改为上下布局 */
@media screen and (max-width: 800px) {
  .leftcolumn, .rightcolumn {   
    width: 100%;
    padding: 0;
  }
}
 
/* 响应式布局 -屏幕尺寸小于 400px 时,导航等布局改为上下布局 */
@media screen and (max-width: 400px) {
  .topnav a {
    float: none;
    width: 100%;
  }
}
</style>
</head>
<body>


<div class="header">
  <h1>我的网页</h1>
  <p>重置浏览器大小查看效果。</p>
</div>


<div class="topnav">
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#">链接</a>
  <a href="#" style="float:right">链接</a>
</div>


<div class="row">
  <div class="leftcolumn">
    <div class="card">
      <h2>文章标题</h2>
      <h5>xx 年xx月 xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/bird.png"></div>
      <p>文本...</p>
      <p>当热诚变成习惯,恐惧和忧虑即无处容身。缺乏热诚的人也没有明确的目标。热诚使想象的轮子转动。一个人缺乏热诚就象汽车没有汽油。
      善于安排玩乐和工作,两者保持热诚,就是最快乐的人。热诚使平凡的话题变得生动。!</p>
    </div>
    <div class="card">
      <h2>文章标题</h2>
      <h5>xx 年 xx 月xx日</h5>
      <div class="fakeimg" style="height:200px;"><img src="img/border.png"></div>
      <p>文本...</p>
      <p>一切事无法追求完美,唯有追求尽力而为。这样心无压力,出来的结果反而会更好!</p>
    </div>
  </div>
  <div class="rightcolumn">
    <div class="card">
      <h2>关于我</h2>
      <div class="fakeimg" style="height:100px;"></div>
      <p>6666</p>
    </div>
    <div class="card">
      <h3>热门文章</h3>
      <div class="fakeimg"><img src="img/fy2_wp.png">\</div>
    
    </div>
    <div class="card">
      <h3>关注我</h3>
      <p>本站发布的系统与软件仅为个人学习测试使用,请在下载后24小时内删除,
      不得用于任何商业用途,否则后果自负,请支持购买正版软件!如侵犯到您的权益,请及时通知我们,我们会及时处理。


声明:为非赢利性网站 不接受任何赞助和广告。</p>
    </div>
  </div>
</div>


<div class="footer">
  <h2>底部区域</h2>
</div>


</body>
</html>

三、总结

本文主要介绍了Html的网页布局结构,如何去了解网络的布局,介绍了常见的移动设备的三种网页模式,最后通过一个小项目,总结之前讲解的内容。

代码很简单,希望可以帮助你学习。

一篇文章带你了解CSS 文本样式

大家好,我是IT共享者,人称皮皮。这篇文章我们来讲讲CSS的文本样式。

一、文本颜色Color

颜色属性被用来设置文字的颜色。

颜色是通过CSS最经常的指定:

  • 十六进制值 – 如”#FF0000″。
  • 一个RGB值 – “RGB(255,0,0)”。
  • 颜色的名称 – 如”红”。

一个网页的文本颜色是指在主体内的选择:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            body {
                color: blue;
            }


            h1 {
                color: #00ff00;
            }


            h2 {
                color: rgb(255, 0, 0);
            }
</style>
    </head>


    <body>
        <h2>hello world</h2>
        <h1>welcome to CaoZhou</h1>
    </body>


</html>

注:对于W3C标准的CSS:如果你定义了颜色属性,你还必须定义背景色属性。

二、属性

1. text-align 文本的对齐方式

文本排列属性是用来设置文本的水平对齐方式。

文本可居中或对齐到左或右,两端对齐。

当text-align设置为”justify”,每一行被展开为宽度相等,左,右外边距是对齐(如杂志和报纸)。

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            h1 {
                text-align: center;
            }


            p.date {
                text-align: right;
            }


            p.main {
                text-align: justify;
            }
</style>
    </head>


    <body>


        <p class="date">2015 年 3 月 14 号</p>
        <p class="main"> 从前有个书生,和未婚妻约好在某年某月某日结婚。到那一天,未婚妻却嫁给了别人。书生受此打击, 一病不起。  这时,路过一游方僧人,从怀里摸出一面镜子叫书生看。书生看到茫茫大海,一名遇害的女子一丝不挂地躺在海滩上。路过一人, 看一眼,摇摇头,走了。又路过一人,将衣服脱下,给女尸盖上,走了。再路过一人,过去,挖个坑,小心翼翼把尸体掩埋了。  僧人解释道, 那具海滩上的女尸,就是你未婚妻的前世。你是第二个路过的人,曾给过他一件衣服。她今生和你相恋,只为还你一个情。但是她最终要报答一生一世的人,是最后那个把她掩埋的人,那人就是他现在的丈夫。书生大悟,病愈。


        </p>
        <p><b>注意:</b> 重置浏览器窗口大小查看 "justify" 是如何工作的。</p>
    </body>


</html>

2. text-decoration文本修饰

text-decoration 属性用来设置或删除文本的装饰。

从设计的角度看 text-decoration属性主要是用来删除链接的下划线:

<!doctype html>
<html lang="en">


    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            .none {}


            .del {
                text-decoration: none;
            }
</style>
    </head>


    <body>
        <p>原来的样子</p>
        <a href="#" class="none">wwwwwwwwwwwwwwwwww</a>
        <p>去掉下划线</p>
        <a href="#" class="del">wwwwwwwwwwwwwwwwwwwww</a>
    </body>


</html>

也可以这样装饰文字:

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            h1 {
                text-decoration: overline;
            }


            h2 {
                text-decoration: line-through;
            }


            h3 {
                text-decoration: underline;
            }
</style>
    </head>


    <body>
        <h1>This is heading 1</h1>
        <h2>This is heading 2</h2>
        <h3>This is heading 3</h3>
    </body>


</html>

注:不建议强调指出不是链接的文本,因为这常常混淆用户。

3. text-transform文本转换

text-transform文本转换属性是用来指定在一个文本中的大写和小写字母。

  • uppercase:转换为全部大写。
  • lowercase:转换为全部小写。
  • capitalize :每个单词的首字母大写。
<!DOCTYPE html>
<html>


    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            p.uppercase {
                text-transform: uppercase;
            }


            p.lowercase {
                text-transform: lowercase;
            }


            p.capitalize {
                text-transform: capitalize;
            }
</style>
    </head>


    <body>
        <p class="uppercase">This is some text.</p>
        <p class="lowercase">This is some text.</p>
        <p class="capitalize">This is some text.</p>
    </body>


</html>

4. text-indent文本缩进

text-indent文本缩进属性是用来指定文本的第一行的缩进。

p {text-indent:50px;}

5. letter-spacing 设置字符间距

增加或减少字符之间的空间。

<style>
     h1 {
       letter-spacing:2px;
}
      h2 {
        letter-spacing:-3px;
}
</style>

6. line-height设置行高

指定在一个段落中行之间的空间。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            p.small {
                line-height: 70%;
            }


            p.big {
                line-height: 200%;
            }
</style>
    </head>


    <body>
        <p>
            This is a paragraph with a standard line-height.<br> This is a paragraph with a standard line-height.<br> The default line height in most browsers is about 110% to 120%.<br>
        </p>


        <p class="small">
            This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br> This is a paragraph with a smaller line-height.<br>
        </p>


        <p class="big">
            This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br> This is a paragraph with a bigger line-height.<br>
        </p>


    </body>


</html>

7. word-spacing 设置字间距

增加一个段落中的单词之间的空白空间。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style type="text/css">
            p {
                word-spacing: 30px;
            }
</style>
    </head>


    <body>


        <p>
            This is some text. This is some text.
        </p>


    </body>


</html>

8. vertical-align 设置元垂直居中

设置文本的垂直对齐图像。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
            img{
                width: 200px;
                height: 100px;
            }
            img.top {
                vertical-align: text-top;


            }


            img.bottom {
                vertical-align: text-bottom;


            }
</style>
    </head>


    <body>
        <p>An <img src="img/logo.png"  /> image with a default alignment.</p>
        <p>An <img class="top" src="img/logo.png" /> image with a text-top alignment.</p>
        <p>An <img class="bottom" src="img/logo.png" /> image with a text-bottom alignment.</p>
    </body>


</html>

9. text-shadow 设置文本阴影

设置文本阴影。

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
        <title>项目</title>
        <style>
         h1{
            text-shadow: 2px 2px #FF0000;
     }
</style>
    </head>


    <body>
    <h1>Text-shadow effect</h1>
    </body>


</html>

三、总结

本文主要介绍了CSS文本样式实际应用中应该如何去操作,通过讲解文本中对应的属性去改变文本的表现形式。使用丰富的效果图的展示,能够更直观的看到运行的效果,能够更好的理解。使用Html语言,代码结构更佳的清晰,能够帮助你更好的学习。