H5、css和JavaScript简单应用

Kessity

已于 2022-07-27 11:19:08 修改

阅读量2.4k

点赞数 5

分类专栏： UI 文章标签： css javascript html

于 2019-08-18 10:17:14 首次发布

本文链接：https://blog.csdn.net/essity/article/details/82864287

版权

UI 专栏收录该内容

5 篇文章 10 订阅

订阅专栏

一 HTML5

1 demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
Hello，World！
</body>
</html>

2 表格

<table>
<tr>
    <td rowspan="7"> 文件状态：<br/>
        [√] 草稿<br/>
        [√] 正在修改<br/>
        [√] 正式发布 </td>
    <td>文件标识：</td>
    <td> </td>
</tr>
<tr>
    <td>当前版本：</td>
    <td>2.7</td>
</tr>
<tr>
    <td>作    者：</td>
    <td></td>
</tr>
<tr>
    <td>创建日期：</td>
    <td></td>
</tr>
<tr>
    <td>最后更新：</td>
    <td></td>
</tr>
<tr>
    <td>密    级：</td>
    <td></td>
</tr>
<tr>
    <td>版权说明：</td>
    <td></td>
</tr>
</table>

在这里插入图片描述

<table>
    <tr>
        <td>列一</td> 
        <td>列一</td> 
   </tr>
    <tr>
        <td colspan="2">合并行</td>    
    </tr>
    <tr>
        <td colspan="2">合并行</td>    
    </tr>
</table>

在这里插入图片描述

<table>
    <tr>
        <td>列一</td> 
        <td>列二</td> 
   </tr>
    <tr>
        <td rowspan="2">合并列</td>    
        <td >行二列二</td>  
    </tr>
    <tr>
        <td >行三列二</td>  
    </tr>
</table>

在这里插入图片描述

<table>
    <tr>
        <td>列一</td> 
        <td>列二</td> 
   </tr>
   <tr>
        <td colspan="2">合并行</td>    
   </tr>
   <tr>
        <td>列一</td> 
        <td>列二</td> 
   </tr>
    <tr>
        <td rowspan="2">合并列</td>    
        <td >行二列二</td>  
    </tr>
    <tr>
        <td >行三列二</td>  
    </tr>
</table>

在这里插入图片描述

3 简单音乐播放器

<!DOCTYPE html>
<html>
<head>
<style>
.wrap{
    width: 300px;
    margin: 50px auto 0;
}
button{
	font-size: 25px;
}
#btnNext{
	float: right;
}
#mlist{
	width: 300px;
	background: #ccc;
	border: 1px solid #666;
	border-radius: 10px;
	overflow: hidden;
	margin-top: 10px;
}
#mlist li{
	font-size: 24px;
	color: blue;
	line-height: 40px;
	border-bottom: 1px solid #666;
	padding-left: 5px;
}
#mlist li:last-child{
	border-bottom: none;
}
#mlist li:hover{
	color: red;
}
#mlist .play{
	background: pink;
}
</style>
</head>
<body>
<div class="wrap">
    <audio src="飞翔的翅膀-单良.mp3" controls autoplay id="aud"></audio>
        <button id="btnPre">上一首</button>
        <button id="btnNext">下一首</button>
        <ul id="mlist">
            <li class="play">飞翔的翅膀-单良.mp3</li>
            <li>飞扬-王缇.mp3</li>
            <li>匆匆那年-王菲.mp3</li>
        </ul>
</div>
<script>
    var btnPre = document.getElementById('btnPre');
    var btnNext = document.getElementById('btnNext');
    var mlist = document.getElementById('mlist');
    var aud = document.getElementById('aud');
    var lis = mlist.getElementsByTagName('li');
	
    for(var i = 0; i < lis.length; ++i){
        lis[i].ondblclick = function(e){//双击播放该音乐
            e.preventDefault();
            aud.src = this.innerHTML;
            for(var j = 0 ; j < lis.length ; ++j){
                lis[j].className = '';
            }
            this.className = 'play';
        }
    }
	
    aud.onended = function(){//当音乐播放完自动播放下一首
        var index = getPlay();
        // alert(index);
        if(index == lis.length-1){//判断是否为最后一首，然后循环播放
        index = -1;
        }
        aud.src = lis[index+1].innerHTML;//切换到下一首
        for(var j = 0 ; j < lis.length ; ++j){
            lis[j].className = '';
        }
        lis[index+1].className = 'play';
    }
    
	btnNext.onclick = function(){//下一首
        var index = getPlay();
        if(index == lis.length-1){//判断是否为最后一首，然后循环播放
            index = -1;
        }
        
		aud.src = lis[index+1].innerHTML;//切换到下一首
        for(var j = 0 ; j < lis.length ; ++j){
            lis[j].className = '';
        }
        lis[index+1].className = 'play';
    }
    
    btnPre.onclick = function(){//上一首
        var index = getPlay();
        if(index == 0){//判断是否为第一首，然后循环播放
            index = lis.length;
        }
        aud.src = lis[index-1].innerHTML;//切换到上一首
            for(var j = 0 ; j < lis.length ; ++j){
                lis[j].className = '';
            }
        lis[index-1].className = 'play';
    }
        
	function getPlay(){//获取当前正在播放的音乐的索引值
        for(var i = 0 ; i < lis.length ; ++i){
            if (lis[i].getAttribute('class') == 'play') {
                return i;
            }
        }
    }
</script>
</body>
</html>

二 HTML5页面布局

1 css中id和class

id 对应 css 是用样式选择符 “#”（井号）；class 对应 css 是用样式选择符“.”(英文半角输入句号)。

#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
.center {
   text-align: center
}

id：属性，只能被一个元素调用；class：类标记，可以用于被多个元素调用(以“.”选择符命名样式可以一个页面使用多次)。
id 就像一个人的身份证，用于识别这个 div 的，class 就像人身上穿的衣服，用于定义这个 div 的样式。一般一个网页不设二个或二个以上同 id 的div，但 class 可以多个 div 用同一个 class。

2 引用css的方法

1、外部样式表

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

2、内部样式表

<head>
<style type="text/css">
  #body {background-color: red}
  #p {margin-left: 20px}
</style>
</head>

3、内联样式

<p style="color: red; margin-left: 20px">
This is a paragraph
</p>

3 深入理解 e.clientX,e.clientY e.pageX e.pageY e.offsetX e.offsetY

本节内容来自这里。
event.clientX、event.clientY
鼠标相对于浏览器窗口可视区域的X，Y坐标（窗口坐标），可视区域不包括工具栏和滚动条。IE事件和标准事件都定义了这2个属性
event.pageX、event.pageY
类似于event.clientX、event.clientY，但它们使用的是文档坐标而非窗口坐标。这2个属性不是标准属性，但得到了广泛支持。IE事件中没有这2个属性。
event.offsetX、event.offsetY
鼠标相对于事件源元素（srcElement）的X,Y坐标，只有IE事件有这2个属性，标准事件没有对应的属性。
event.screenX、event.screenY
鼠标相对于用户显示器屏幕左上角的X,Y坐标。标准事件和IE事件都定义了这2个属性。
在这里插入图片描述

4 css两列自适应布局的多种实现方式及原理

本节内容来自这里。
两列布局是非常常见的需求在实际项目中，实现的方式也有很多。究其原理也都不算复杂。这里主要提出几种实现方式和原理。
html页面基本布局如下代码所示：

<div class="main">
<div class='left'>
左侧    1
</div>
<div class='right'>
右侧    1
<div>假如div很多的话</div>
<div>假如div很多的话</div>
<div>假如div很多的话</div>
<div>假如div很多的话</div>
假如内容很多的话
假如内容很多的话
</div>
</div>

父元素.main 包含两个子div，left和right。这里只是简单举个例子，所以布局很简单，只要有效果就好。
一、内联div的方式：
众所周知，html元素存在块级元素，内联元素以及内联块级元素等多种属性。在基本的block和inline两种属性基础上衍生出的inline-block，因为具有两种基本属性的共有特性，所以在很多地方有特殊用处。这里主要用到inline-block的inline特性，将子元素设置为inline-block使得两者不会换行。同时左侧定宽，右侧自动即可。css如下：

.main1{
    width: 100%;
    height:500px;
    border: 1px solid blue;
    overflow: auto;
}
.left1{
    display: inline-block;
    width: 200px;
    background:#ff4433;
    vertical-align: top;
}    
.right1{
    display: inline-block;
    background: pink;
}

二、使用绝对定位
绝对定位有很多特性，其中比较重要的一点是，脱离文档流，相对父元素最近的不为static定位的来定位。这里主要就用到了该特性，因为脱离了文档流，所以紧邻的div不会自动换行，只需要设好外间距即可达到效果。代码如下：

.main2{
    width: 100%;
    height:500px;
    border: 1px solid blue;
    overflow: auto;
}
.left2{
    position: absolute;
    width: 200px;
    background:#ff4433;
}    
.right2{
    margin-left: 200px;
    background: pink;
}

这里不够严谨，最好父元素为相对定位，以免发生意想不到的定位情况。
三、float方式
既然提到了绝对定位脱离文档流的方式，相信大家还会想起来另一个狂放不羁爱脱离的属性，对就是浮动。既然特性相同当然可以实现相同效果。不过这里声明一下使用浮动的话注意要清除浮动，否则会带来一些意想不到的效果，这里简便起见就不清除了。

.main3{
    width: 100%;
    height:500px;
    border: 1px solid blue;
    overflow: auto;
}
.left3{
    float: left;
    width: 200px;
    background:#ff4433;
}    
.right3{
    margin-left: 200px;
    background: pink;
}

四：flex布局
弹性流式布局，这个是根据百分比来布局的。在h5中是非常常见的。因为手机型号的问题，所以根据百分比来布局是比较合适的。如果固定宽度的话，很容易就出现问题。有关flex的内容，这里不详细描述。只稍微提一下flex布局的基本思想：将设置为display: flex的元素作为一个flex容器，其子元素根据flex对应的值来分配父容器的宽度（默认从左至右排列）。例如div1:flex1，div2:flex2 ，则div1，div2则按1：2来分配父元素的宽度。但是如果子元素有设置固定宽度，则剩下的子元素按flex对应比例分配余下的区域。所以要实现左侧定宽的效果，只需设置左侧固定宽度即可，若左侧不定宽，可以按照比例来分配各子元素的宽度。代码如下：

.main4{
    display: flex;
    flex-flew:row;
}
.left4{
    width:200px;
}
.right4{
    flex:3;
}

或者非定宽的布局：

.main5{
    display: flex;
    flex-flew:row;
}
.left5{
    flex:1;
}
.right5{
    flex:3;
}

三 JavaScript

1 概述

JavaScript是一门脚本语言，最常用在关于HTML网页中，但是并不是只有这一种用途，所以它的开发环境除了浏览器外，还有node.js。
JavaScript不仅仅是由单一的语法及其解释组成，他的组成部分包括：ECMAScript、DOM、BOM；ECMAScript：描述了该语言的语法和基本对象，ECMAScript是JavaScript脚本语言规范，由Javascript引擎具体实现，也可以看做具体标准；文档对象模型（DOM），描述处理网页内容的方法和接口；浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
在2009年，诞生了node.js技术，node.js是一个Javascript运行环境。实际上它是对Google V8引擎进行了封装。node.js使得JavaScript可以运行在服务器端作为一种服务器脚本语言运行，类似于php等动态语言。Nodejs其实是ECMAScript的运行环境，它包含了浏览器内核，使得ECMAScript能在浏览器之外运行。

2 浏览器运行

方法一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
	<script type="text/javascript">
		document.write("您好，JavaScript欢迎您的到来");
	</script>
</head>
<body>
Hello，World！
</body>
</html>

如上所示，js代码在其标签内，该标签放在HTML的<head>与</head>之间，也可放在<body>与</body>之间。
方法二：test.html和test.js

document.write("您好，JavaScript欢迎您的到来");

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
	<script language="JavaScript" src="test.js">
	</script>
</head>
<body>
Hello，World！
</body>
</html>

3 Node.js运行

文件test.js

'use strict';//总是以严格模式运行JavaScript代码，避免各种潜在陷阱
console.log("Hello World");

ECMAScript 5引入了严格模式
在命令行运行：node test.js
在这里插入图片描述
上图为命令交互模式，REPL（Read-Eval-Print Loop，输入-求值-输出循环，也译为交互式解释器），为运行JavaScript脚本与查看运行结果提供了一种交互方式（交互模式）。
undefined：node中每一行代码执行完，都会显示一下返回值，这里没有返回值，所以有个undefined。
如果在REPL中看到三个点（… ），这就意味着需要输入更多的代码去完成当前的表达式、语句或者函数（function），进入了多行输入状态，此时若想终结这种多行输入状态，可以输入.break即可。
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
在这里插入图片描述
有特殊双重身份的对象：
window对象既是ECMAScript规范中的Global对象，也是BOM中的顶级对象；window对象是相对于web浏览器而言的，依赖于浏览器。
global对象可以说是ECMAScript中对特别的一个对象了，因为不管你从什么角度上看，这个对象都是不存在的。从某种意义上讲，它是一个终极的“兜底儿对象”，换句话说呢，就是不属于任何其他对象的属性和方法，最终都是它的属性和方法。比如isNaN()、parseInt()以及parseFloat()等，实际都是它的方法；还有就是常见的一些特殊值，如：NaN、undefined等都是它的属性，以及一些构造函数Object、Array等也都是它的方法。总之，记住一点：global对象就是“老祖宗”，所有找不到归属的就都是它的。
document对象既是BOM顶级对象的一个属性，也是DOM模型中的顶级对象。文档对象模型(Document Object Model，DOM)是针对HTML和XML文档的一个API(ApplicationProgramming Interface，应用程序编程接口)，现在已经成为表现和操作页面标记的真正的跨平台、语言中立的一种标准。
document对象是window对象的一个属性，是显示于窗口内的一个文档。而window对象则是一个顶层对象，它不是另一个对象的属性。document可以理解为文档，就是你的网页，而window是你的窗口，就是你的浏览器包含的。它们俩在没有框架的情况下可以说是等同的，在有框架的情况下就要区别对待了。

3 简单语法

new Object()和简易的{}是同样的空对象，就是默认的对象。
函数调用

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
 
<body>
    <p id="cookiedata"></p>
    <p id="first"></p>
	<button id="wirte">add cookie</button>
	<button id="updata">updata cookie</button>
	<button id="del">del cookie</button>
     
    <script type="text/javascript">
        var cookieCount=0;
        readCookies();
        function readCookies(){
			document.write("readCookies\r\n");
            document.getElementById("wirte").onclick=createCookies();
            document.getElementById("updata").onclick=updateCookies();
        }
        function createCookies(){
			document.write("createCookies\r\n");
            cookieCount++;
            document.cookie = "Cookie_" + cookieCount + "=Value_" + cookieCount;
            readCookies();
        }
        function updateCookies(){
			document.write("updateCookie\r\n");
            document.cookie = "Cookie_" + cookieCount + "=Updated_" + cookieCount;
            readCookies();
        }       
    </script>
     
</body>
</html>

运行出错，修改方法：要么去掉括号，要么加上引号：

document.getElementById("wirte").onclick=createCookies;
document.getElementById("wirte").onclick="createCookies()";

JS中的函数是一种叫做Function引用类型的实例，因此函数是一个对象。函数名则是指向这个对象的引用地址。做为一个对象，函数是可以赋值传递的。事件所需要的是函数对象的引用地址。函数名后面不加圆括号()就是获取函数对象的引用地址，（这样不调用执行函数）。函数名后面的圆括号()实际上是调用（执行）函数的运算符。如果函数名后面加上圆括号就表示立即调用（执行）这个函数里面的代码。

4 运行机制

单线程
为了避免复杂性，JavaScript从诞生就是单线程。在HTML5中，推出了web worker标准，允许JavaScript脚本创建多个线程，但是子线程完全受主线程的控制，且不得操作DOM，所以也是没有违背JavaScript单线程的本质。
任务队列
单线程容易导致任务的阻塞，所以JavaScript的任务分为两种：在主线程上执行的任务“同步任务”，被主线程挂载起来的任务“异步任务”，后者一般是放在一个叫任务队列的数据结构中。
那么一般异步执行运行机制如下(也是JavaScript的运行机制)：

(1)所有同步任务都在主线程上执行，形成一个执行栈；
(2)主线程之外，还有一个“任务队列”,只要异步任务有了运行结果，就在“任务队列”之中放置一个事件；
(3)一旦“执行栈”中的所有同步任务执行完毕了，系统就会读取“任务队列”，看看里面有哪些事件。那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行；
(4)主线程不断重复上面的三步。（事件循环）

事件和回调函数
其实任务队列就是一个事件队列，因为一般我们绑定一个事件，比如点击事件等等，都是在某一个时刻才触发执行的，这个时候就得放到任务队列里面，等待执行；而在某个DOM节点上绑定了事件，就要有相应的回调函数，它们是相辅相成的。所谓回调函数，就是那些被挂载起来，等待执行的代码，主线程执行任务队列里面的异步任务，其实就是执行这些回调函数。
一般只有主线程所有任务都执行完毕了，才会执行任务队列里面的异步任务，一般是按照队列的“先进先出”顺序执行，但是因为存在定时器，所以主线程要检查执行时间，只有到了规定的时间，才能返回主线程。
定时器
终于到特殊的定时器了，定时器主要由setTimeout()和setInterval()两个函数来完成，它们的内部运行机制完全一样，不同的只是，前者一次性执行，而后者反复执行。定时器，属于任务队列中的异步任务。

四 vue语法

1 onLoad和onShow

1、首次加载时
onLoad页面加载时调用，可以获取参数，通过options。
onShow页面显示时调用。
2、从其他页面返回时
onShow 会重新加载调用（如果每次返回到页面都会执行一次加载，显然性能会有影响。当有内容修改时，把函数方法放在onshow可以使界面能及时更新）
onLoad 不会重新加载调用（如果携带有参数，options 对象会接收参数）

2 vue中定义data：{} 和 data（）{ return }的区别

1.第一种写法：对象

var app = new Vue({
　　el: '#app',
　　data: {
　　　　name: 'yang'
　　}
})

2.第二种写法：函数ES6规范中的写法

var app = new Vue({
　　el: '#app',
　　data() {
　　　　return {
　　　　　　name: 'yang'
　　　　}
　　}
})

区别：
在简单的vue实例应用中，三种写法几乎是没有什么区别的，因为你定义的#app对象不会被复用。
但是如果是在Vue组件应用的环境中，就可能会存在多个地方调用同一个组件的情况，为了不让多个地方的组件共享同一个data对象，只能返回函数。这个与JavaScript的作用域特性有关，函数自己拥有私有的作用域，函数之间的作用域相互独立，也就不会出现组件对数据的绑定出现交错的情况。
补充：函数，也有这样写的，用的比较少。

var app = new Vue({
　　el: '#app',
　　data:function{
　　		return{
		　name: 'yang'
		}
　　}
})

3 v-if、v-else、v-else-if

vue条件语句v-if、v-else、v-else-if用法

4 export和export default

https://www.cnblogs.com/fger/p/11994968.html

5 getApp

https://www.cnblogs.com/jgnba/p/14954669.html

Kessity

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
H5、css和JavaScript简单应用

一 HTML51 demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>首页</title></head><body>Hello，World！</body></html>2 表格<table><tr> <td rowspa
复制链接

扫一扫

专栏目录