案例编码

好长时间没学习了,今天把之前学的知识运用到案例中。

验证码

验证码产生案例,主要用到了JavaScript中的相关知识,通过JS随机函数来产生验证码,在经过DOM操作将验证码结果显示在网页上。
JS随机有以下函数:

  • Math.random():返回0(包括)至1(不包括)之间的随机整数
  • Math.floor():和Math.random函数一起使用返回随机整数
    1
    2
    3
    4
    5
    6
    7
    8
    function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min) ) + min;
    }
    // 这个函数始终返回介于 min(包括)和 max(不包括)之间的随机数
    function getRndInteger(min, max) {
    return Math.floor(Math.random() * (max - min + 1) ) + min;
    }
    // 这个函数始终返回介于 min 和 max(都包括)之间的随机数

HTML结构很简单,设置一块显示验证码的区域和按钮即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>验证码</title>
<link rel="stylesheet" href="验证码.css">
<script src="验证码.js"></script>
<!-- css样式和js文件都通过外部链接的方式引入 -->
</head>
<body>
<div id="code"></div>
<!-- 显示验证码区域 -->
<button onclick="createCode()">验证码</button>
<!-- 按钮,点击按钮运行createCode()函数 -->
</body>
</html>

CSS样式也比较简单,设置code区域的宽、高、背景颜色、字体等。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
*{
padding: 0;
margin: 0;
}
/* 清除浏览器样式 */
#code{
width: 100px;
height: 25px;
background-color: lightblue;
font-size: 22px;
letter-spacing: 5px;
}
button{
margin-top: 5px;
}

JS的关键在于产生随机验证码并且显示在网页上,这里设置了createCode()函数来完成这一要求。

1
2
3
4
5
6
7
8
9
10
11
12
function createCode(){
var chars=['a','b','c','1','2','3','A','B','C'];
var randCode="";
for(var i=0;i<4;i++){
var randPos=Math.floor(Math.random()*(chars.length-1));
// 随机数组下标
randCode+=chars[randPos];
// 随机数组
}
document.getElementById("code").innerHTML = randCode;
// DOM操作,通过id名字写入随机数组
}

画图

画图案例主要用到了html5中画布的新特性。实现鼠标按下移动画图,鼠标松开结束画图。
一开始我的js文件是在head中引用,出现了报错。

原来是因为在js文件中出现了canvas标签函数,所以要放在canvas标签后面引用。
html和css文件代码都比较简单。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>绘图</title>
<link rel="stylesheet" href="绘图.css">
<!-- <script src="绘图.js"></script> -->
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
<script src="绘图.js"></script>
</html>

一开始我在css文件中设置canvas长和宽,发现出现鼠标和画出来的线不同步问题。

1
2
3
4
5
6
7
8
9
*{
padding: 0;
margin: 0;
}
#myCanvas{
/* width: 1000px;
height: 800px; */
border: 1px solid black;
}

画图的重点在于js文件,实现鼠标按下移动画图,松开结束画图功能

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
var canvas,pen;
canvas=document.getElementById("myCanvas");
// 使用 id 来寻找 canvas 元素
pen=canvas.getContext('2d');
// 创建 context 对象,2d绘画
pen.lineWidth=1;
pen.strokeStyle="blue";
var mousePress=false;
var last=null;
// 设置pen的颜色、像素,鼠标是否被按下和最后位置的初始值
function pos(event){
var ex,ey;
ex=event.clientX;
ey=event.clientY;
return{
x:ex,
y:ey
}
}// 返回鼠标位置函数
function start(event){
mousePress=true;
}
function draw(event){
if(!mousePress) return;
var xy=pos(event);
if(last !=null){
pen.beginPath();//开始一条路径
pen.moveTo(last.x,last.y);
pen.lineTo(xy.x,xy.y);//创建路径
pen.stroke();//绘制路径
}
last=xy;
}//画图函数,当鼠标按下并移动时,
function finish(event){
mousePress=false;
last=null;
}
canvas.onmousedown=start;
// 鼠标按下触发start事件
canvas.onmousemove=draw;
// 鼠标移动触发draw事件
canvas.onmouseup=finish;
// 鼠标松开触发finish事件

课程首页

我们利用bootstrap组件完成页面设计。引用bootstrap的css、jquery和js文件,应用导航条,巨幕,列表组件,完成课程页面设计。

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课程首页</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Web前端开发</a>
</div>

<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">视频 <span class="sr-only">(current)</span></a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">资料 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">幻灯片</a></li>
<li><a href="#">源代码</a></li>
<li><a href="#">扩展阅读</a></li>
</ul>
</li>
<li><a href="#">作业</a></li>
<li><a href="#">讨论</a></li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container">
<div class="row">
<!-- 巨幕组件 -->
<div class="col-sm-9">
<div class="jumbotron">
<h1>Web前端开发</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore aliquam assumenda iusto sed molestias fugit rem, mollitia animi reprehenderit non. Accusantium sapiente tenetur repellendus inventore facere, repellat eos commodi quis....</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">加入学习</a></p>
</div>
<div class="row">
<!-- 详细内容,小屏合并6个单元格,大屏合并4个单元格 -->
<div class="col-xs-6 col-lg-4">
<h2>HTML</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas neque sapiente non consectetur perspiciatis eveniet illum facere consequatur obcaecati esse, minima necessitatibus voluptatum dolores quo, sit reprehenderit explicabo cupiditate. Modi.</p>
<P><a class="btn btn-default" href="#"></a>开始学习</P>
</div>
<div class="col-xs-6 col-lg-4">
<h2>HTML</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas neque sapiente non consectetur perspiciatis eveniet illum facere consequatur obcaecati esse, minima necessitatibus voluptatum dolores quo, sit reprehenderit explicabo cupiditate. Modi.</p>
<P><a class="btn btn-default" href="#">开始学习</a></P>
</div>
<div class="col-xs-6 col-lg-4">
<h2>HTML</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas neque sapiente non consectetur perspiciatis eveniet illum facere consequatur obcaecati esse, minima necessitatibus voluptatum dolores quo, sit reprehenderit explicabo cupiditate. Modi.</p>
<P><a class="btn btn-default" href="#">开始学习</a></P>
</div>
<div class="col-xs-6 col-lg-4">
<h2>HTML</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas neque sapiente non consectetur perspiciatis eveniet illum facere consequatur obcaecati esse, minima necessitatibus voluptatum dolores quo, sit reprehenderit explicabo cupiditate. Modi.</p>
<P><a class="btn btn-default" href="#">开始学习</a></P>
</div>
<div class="col-xs-6 col-lg-4">
<h2>HTML</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas neque sapiente non consectetur perspiciatis eveniet illum facere consequatur obcaecati esse, minima necessitatibus voluptatum dolores quo, sit reprehenderit explicabo cupiditate. Modi.</p>
<P><a class="btn btn-default" href="#">开始学习</a></P>
</div>
<div class="col-xs-6 col-lg-4">
<h2>HTML</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas neque sapiente non consectetur perspiciatis eveniet illum facere consequatur obcaecati esse, minima necessitatibus voluptatum dolores quo, sit reprehenderit explicabo cupiditate. Modi.</p>
<P><a class="btn btn-default" href="#">开始学习</a></P>
</div>
</div>
</div>
<!-- 列表组件 -->
<div class="col-sm-3">
<ul class="list-group">
<li class="list-group-item">最新公告</li>
<li class="list-group-item">最新讨论</li>
<li class="list-group-item">最新作业</li>

</ul>
</div>
</div>
</div>
</body>
</html>