CSS和JS基础

举报
AlbertYang 发表于 2021/02/02 23:41:06 2021/02/02
【摘要】 文章目录 目标:使用CSS完成网站首页的优化需求分析:技术分析步骤分析:代码实现:扩展: 使用DIV+CSS完成注册页面的优化需求分析技术分析步骤分析:代码实现: CSS部分的总结:使用JS完成简单的数据校验需求分析技术分析JavaScript概述JS的组成:JS的语法:JS的数据类型:JS的运算符和语句:JS的输出 JS的开发步骤步骤分析:代码实现 使用JS完...

目标:

  • 了解CSS的概念
  • 了解CSS的引入方式
  • 了解CSS的基本用法和常用的选择器
  • 了解CSS的盒子模型,悬浮和定位
  • 了解JS的概念
  • 掌握JS的基本语法,数据类型,能够使用JS完成简单的页面交互

使用CSS完成网站首页的优化

需求分析:

​ 我们使用表格布局的时候存在缺陷,那么我们需要来考虑使用DIV+CSS来对页面进行优化。

表格布局的缺陷:

1. 嵌套层级太多, 一旦出现嵌套顺序错乱, 整个页面达不到预期效果
2.  采用表格布局,页面不够灵活, 动其中某一块,整个表格布局的结构全都要变

  
 
  • 1
  • 2

技术分析

HTML的块标签:

​ div标签: 默认占一行,自动换行

​ span标签: 内容显示在同一行

CSS概述:

​ Cascading Style Sheets : 层叠样式表

主要作用:

​ 用来美化我们的HTML页面的

​ HTML 决定网页的骨架,CSS 化妆

​ 将页面的HTML和美化进行分离

CSS的简单语法:

​ 在一个style标签中,去编写CSS内容,最好将style标签写在这个head标签中

<style>
  选择器{ 属性名称:属性的值; 属性名称2: 属性的值2;
  }
</style>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

CSS选择器: 帮助我们找到我们要修饰的标签或者元素

元素选择:

元素的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

  
 
  • 1
  • 2
  • 3
  • 4

ID选择器:

以#号开头  ID在整个页面中必须是唯一的s
#ID的名称{
  属性名称:属性的值;
  属性名称:属性的值;
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

类选择器:

以 . 开头 
.类的名称{ 属性名称:属性的值; 属性名称:属性的值;
}

  
 
  • 1
  • 2
  • 3
  • 4
  • 5

CSS的引入方式:

​ 外部样式: 通过link标签引入一个外部的css文件

​ 内部样式: 直接在style标签内编写CSS代码

​ 行内样式: 直接在标签中添加一个style属性, 编写CSS样式

CSS浮动 : 浮动的元素会脱离正常的文档流,在正常的文档流中不占空间

			float属性: left right clear属性: 清除浮动 both : 两边都不允许浮动 left: 左边不允许浮动 right : 右边不允许浮动 流式布局

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

步骤分析:

  1. 创一个最外层div
  2. 第一部份: LOGO部分: 嵌套三个div
  3. 第二部分: 导航栏部分 : 放置5个超链接
  4. 第三部分: 轮播图
  5. 第四部分:
  6. 第五部分: 直接放一张图片
  7. 第六部分: 抄第四部分的
  8. 第七部分: 放置一张图片
  9. 第八部分: 放一堆超链接

代码实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style> .logo{ float: left; width: 33%; /*border-width: 1px; border-style: solid; border-color: red;*/ height: 60px; line-height: 60px;
		/*		border: 1px solid red;*/ } .amenu{ color: white; text-decoration: none; height: 50px; line-height: 50px; } .product{ float: left; text-align: center; width: 16%; height: 240px; } </style>
	</head>
	<body>
		<!-- 1. 创一个最外层div 2. 第一部份: LOGO部分: 嵌套三个div 3. 第二部分: 导航栏部分 : 放置5个超链接 4. 第三部分: 轮播图 5. 第四部分: 6. 第五部分: 直接放一张图片 7. 第六部分: 抄第四部分的 8. 第七部分: 放置一张图片 9. 第八部分: 放一堆超链接
		-->
		<div> <!--2. 第一部份: LOGO部分: 嵌套三个div--> <div> <div class="logo"> <img src="../img/logo2.png"/> </div> <div class="logo"> <img src="../img/header.png"/> </div> <div class="logo"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> <!--清除浮动--> <div style="clear: both;"></div> <!--3. 第二部分: 导航栏部分 : 放置5个超链接--> <div style="background-color: black; height: 50px;"> <a href="#" class="amenu">首页</a> <a href="#" class="amenu">手机数码</a> <a href="#" class="amenu">电脑办公</a> <a href="#" class="amenu">鞋靴箱包</a> <a href="#" class="amenu">香烟酒水</a> </div> <!--4. 第三部分: 轮播图--> <div> <img src="../img/1.jpg" width="100%"/> </div> <!--5. 第四部分:--> <div> <div><h2>最新商品<img src="../img/title2.jpg"/></h2></div> <!--左侧广告图--> <div style="width: 15%; height: 480px;  float: left;"> <img src="../products/hao/big01.jpg" width="100%" height="100%"/> </div> <!-- 右侧商品 --> <div style="width: 84%; height: 480px;float: left;"> <div style="height: 240px; width: 50%; float: left;"> <img src="../products/hao/middle01.jpg" height="100%" width="100%" /> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> </div> </div> <!--6. 第五部分: 直接放一张图片--> <div> <img src="../products/hao/ad.jpg" width="100%"/> </div> <!--7. 第六部分: 抄第四部分的--> <div> <div><h2>最新商品<img src="../img/title2.jpg"/></h2></div> <!--左侧广告图--> <div style="width: 15%; height: 480px;  float: left;"> <img src="../products/hao/big01.jpg" width="100%" height="100%"/> </div> <!-- 右侧商品 --> <div style="width: 84%; height: 480px;float: left;"> <div style="height: 240px; width: 50%; float: left;"> <img src="../products/hao/middle01.jpg" height="100%" width="100%" /> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> <div class="product"> <img src="../products/hao/small08.jpg" /> <p>高压锅</p> <p style="color: red;">$998</p> </div> </div> </div> <!--8. 第七部分: 放置一张图片--> <div> <img src="../img/footer.jpg" width="100%"/> </div> <!--9. 第八部分: 放一堆超链接--> <div style="text-align: center;"> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a> <br /> Copyright © 2018 yxy 版权所有 </div>
		</div>
	</body>
</html>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235

扩展:

  • CSS的优先级

    按照选择器搜索精确度来编写: 行内样式 > ID选择器 > 类选择器 > 元素选择器

    就近原则: 哪个离得近,就选用哪个的样式

    CSS: 层叠样式表

    主要作用:

    1. 美化页面
    2. 将页面美化和HTML代码进行分离,提高代码的服用型
    • 选择器:

      • 元素选择器: 标签的名称{}
      • 类选择器: 以. 开头 .类的名称
      • ID选择器: 以#开头 , #ID的名称 (ID必须是页面上面唯一)
    • CSS浮动:

      • float : left, right 不再占有正常文档流中的空间 , 流式布局

      • clear : both left right

  • CSS中的其它选择器

    • 选择器分组: 选择器1,选择器2{ 属性的名称:属性的值}

    • 属性选择器:

      a[title]
      a[titile='aaa']
      a[href][title]
      a[href][title='aaa']
      
            
           
      • 1
      • 2
      • 3
      • 4
    • 后代选择器: 爷爷选择器 孙子选择器 找出所有的后代

    • 子元素选择器: 父选择器 > 儿子选择器

    • 伪类选择器: 通常都是用在A标签上

使用DIV+CSS完成注册页面的优化

需求分析

由于我们的注册页面也是用table布局的,存在与首页同样的问题,所以我们需要使用div+css对我们的注册页面进行美化

总共是5部分内容

技术分析

CSS的盒子模型: 万物皆盒子

内边距:

padding-top:

padding-right:

padding-bottom:

padding-left:

padding:10px;  上下左右都是10px
padding:10px 20px;  上下是10px 左右是20px
padding: 10px 20px 30px;  上 10px 右20px  下30px  左20px
padding: 10px 20px 30px 40px;  上右下左, 顺时针的方向

  
 
  • 1
  • 2
  • 3
  • 4

外边距:

margin-top:

margin-right:

margin-bottom:

margin-left:

CSS绝对定位:

​ position: absolute

​ top: 控制距离顶部的位置

​ left: 控制距离左边的位置

步骤分析:

  1. 总共是5部分
  2. 第一部分是LOGO部分
  3. 第二部分是导航菜单
  4. 第三部分是注册部分
  5. 第四部分是FOOTER图片
  6. 第五部分是一堆超链接

代码实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title> <link rel="stylesheet" type="text/css" href="../css/main.css"/>
	</head>
	<body>
		<!-- 1. 总共是5部分 2. 第一部分是LOGO部分 3. 第二部分是导航菜单 4. 第三部分是注册部分 5. 第四部分是FOOTER图片 6. 第五部分是一堆超链接
		-->
		<div> <!--2. 第一部分是LOGO部分--> <div> <div class="logo"> <img src="../img/logo2.png" /> </div> <div class="logo"> <img src="../img/header.png" /> </div> <div class="logo"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> <!--清除浮动--> <div style="clear: both;"></div> <!--3. 第二部分是导航菜单--> <div style="background-color: black; height: 50px;"> <a href="#" class="amenu">首页</a> <a href="#" class="amenu">手机数码</a> <a href="#" class="amenu">电脑办公</a> <a href="#" class="amenu">鞋靴箱包</a> <a href="#" class="amenu">香烟酒水</a> </div> <!--4. 第三部分是注册部分--> <div style="background: url(../image/regist_bg.jpg);height: 500px;"> <div style="position:absolute;top:200px;left:350px;border: 5px solid darkgray;width: 50%;height: 50%;background-color: white;"> <table width="60%" align="center"> <tr> <td colspan="2"><font color="blue" size="6">会员注册</font>USER REGISTER</td> </tr> <tr> <td>用户名:</td> <td><input type="text"/></td> </tr> <tr> <td>密码:</td> <td><input type="password"/></td> </tr> <tr> <td>确认密码:</td> <td><input type="password"/></td> </tr> <tr> <td>email:</td> <td><input type="email"/></td> </tr> <tr> <td>姓名:</td> <td><input type="text"/></td> </tr> <tr> <td>性别:</td> <td><input type="radio" name="sex"/><input type="radio" name="sex"/><input type="radio" name="sex"/></td> </tr> <tr> <td>出生日期:</td> <td><input type="date"/></td> </tr> <tr> <td>验证码:</td> <td><input type="text"/></td> </tr> <tr> <td></td> <td><input type="submit" value="注册"/></td> </tr> </table> </div> </div> <!--5. 第四部分是FOOTER图片--> <div> <img src="../img/footer.jpg" width="100%"/> </div> <!--9. 第四部分: 放一堆超链接--> <div style="text-align: center;"> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a> <br /> Copyright © 2018 yxy 版权所有 </div> </div>
	</body>
</html>


  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122

CSS部分的总结:

​ CSS: 层叠样式表.

​ CSS作用: 美化页面,提高代码的复用性

​ 选择器:

​ 需要掌握的:

​ 元素选择器: 标签的名称

​ 类选择器: 以 . 开头

​ ID选择器: 以#开头, #ID的名称 ID必须是唯一的

​ 优先级: 按照选择精确度: 行内样式 > ID选择器 > 类选择器 > 元素选择器

​ 就近原则

​ 扩展选择器:

​ 选择器分组: 选择器1,选择器2 以逗号隔开

​ 后代选择器: 爷爷 孙子 中间以空格隔开

​ 子元素选择器: 爸爸 > 儿子

​ 属性选择器: 选择器[属性的名称=’’]

​ 伪类选择器: 超链接标签上使用

​ 浮动: float属性 left right

​ 清除浮动: clear: both left right

​ 盒子模型: 顺时针 : 上右下左

​ padding : 内边距 ,控制的是盒子内容的距离

​ margin : 外边距 控制盒子与盒子之间的距离

​ 绝对定位:

​ position: absolute

​ top:

​ left:

使用JS完成简单的数据校验

需求分析

使用JS完成对注册页面的简单数据校验,不允许出现用户名或密码为空的情况

技术分析

JavaScript概述

什么是javascript: JavaScript一种直译式脚本语言,

什么是脚本语言?

​ java源代码 ----> 编译成.class文件 -----> java虚拟机中才能执行

​ 脚本语言: 源码 -------- > 解释执行

​ js由我们的浏览器来解释执行

HTML: 决定了页面的框架

CSS: 用来美化我们的页面

JS: 提供用户的交互的

JS的组成:

ECMAScript : 核心部分 ,定义js的语法规范

DOM: document Object Model 文档对象模型 , 主要是用来管理页面的

BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高

JS的语法:

变量弱类型: var i = true

区分大小写

语句结束之后的分号 ,可以有,也可以没有

写在script标签

JS的数据类型:
  • 基本类型
    • string
    • number
    • boolean
    • undefine
    • null
  • 引用类型
    • 对象, 内置对象
  • 类型转换
    • js内部自动转换
JS的运算符和语句:
  • 运算符和java 一样
    • “===” 全等号: 值和类型都必须相等
    • == 值相等就可以了
  • 语句和java 一样
JS的输出
  • alert() 直接弹框

  • document.write() 向页面输出

  • console.log() 向控制台输出

  • innerHTML: 向页面输出

  • 获取页面元素: document.getElementById(“id的名称”);

JS声明变量:

​ var 变量的名称 = 变量的值

JS声明函数:

​ var 函数的名称 = function(){

​ }

​ function 函数的名称(){

​ }

JS的开发步骤

1. 确定事件
2. 通常事件都会出发一个函数
3. 函数里面通常都会去操作页面元素,做一些交互动作


  
 
  • 1
  • 2
  • 3
  • 4

步骤分析:

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script> /* 1. 确认事件: 表单提交事件 onsubmit事件 2. 事件所要触发的函数: checkForm 3. 函数中要干点事情 1. 校验用户名, 用户不能为空, 长度不能小于6位 1.获取到用户输入的值 */ function checkForm(){ //获取用户名输入项 var inputObj = document.getElementById("username"); //获取输入项的值 var uValue = inputObj.value;
// alert(uValue); //用户名长度不能6位 "" if(uValue.length < 6 ){ alert("对不起,您的长度太短!"); return false; } //密码长度大于6 和确认必须一致 //获取密码框输入的值 var input_password = document.getElementById("password"); var uPass = input_password.value; if(uPass.length < 6){ alert("对不起,您还是太短啦!"); return false; } //获取确认密码框的值 var input_repassword = document.getElementById("repassword"); var uRePass = input_repassword.value; if(uPass != uRePass){ alert("对不起,两次密码不一致!"); return false; } //校验手机号 var input_mobile = document.getElementById("mobile"); var uMobile = input_mobile.value; // if(!/^[1][3578][0-9]{9}$/.test(uMobile)){ alert("对不起,您的手机号无法识别!"); return false; } //校验邮箱: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/ var inputEmail = document.getElementById("email"); var uEmail = inputEmail.value; if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)){ alert("对不起,邮箱不合法"); return false; } return true; } </script>
	</head>
	<body>
		<form action="JS开发步骤.html" onsubmit="return checkForm()"> <div>用户名:<input id="username" type="text"  /></div> <div>密码:<input id="password" type="password"  /></div> <div>确认密码:<input id="repassword" type="password"  /></div> <div>手机号码:<input id="mobile"  type="number"  /></div> <div>邮箱:<input id="email" type="text"  /></div> <div><input type="submit" value="注册"  /></div>
		</form>
	</body>
</html>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77

javascript : 它是一门脚本语言 , 直接解释执行的语言

javascript:

​ ECMAScript : 定义的语法

​ DOM: document Object Model

​ BOM: 浏览器对象模型

会定义变量: var 变量的名称 = 变量的值

会定义函数:

​ function 函数的名称(参数的名称){

​ }

使用JS完成图片的轮播效果

需求分析

在我们的网站首页,通常需要有一块区域,用来显示广告,但是这块区域如果仅仅显示一张图片肯定是不够的, 故我们需要采用动态循环播放我们所有的广告。

代码实现:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script> /* 当页面加载完成的时候, 动态切换图片 1.确定事件: 2.事件所要触发的函数 */ var index = 1; //切换图片的函数 function changeAd(){ //获取要操作的img var img = document.getElementById("imgAd"); img.src = "../img/"+(index%3+1)+".jpg";  //0,1,2 //1,2,3 index++; } function init(){ //启动定时器 setInterval("changeAd()",3000); }
		</script>
	</head>
	<body onload="init()">
		<img src="../img/1.jpg" id="imgAd"/>
	</body>
</html>

  
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

文章来源: albertyang.blog.csdn.net,作者:Albert Yang,版权归原作者所有,如需转载,请联系作者。

原文链接:albertyang.blog.csdn.net/article/details/84500752

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。