案例编码
好长时间没学习了,今天把之前学的知识运用到案例中。
验证码
验证码产生案例,主要用到了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; }
function getRndInteger(min, max) { return Math.floor(Math.random() * (max - min + 1) ) + min; }
|
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> </head> <body> <div id="code"></div> <button onclick="createCode()">验证码</button> </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; }
|
画图
画图案例主要用到了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"> </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{
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");
pen=canvas.getContext('2d');
pen.lineWidth=1; pen.strokeStyle="blue"; var mousePress=false; var last=null;
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;
canvas.onmousemove=draw;
canvas.onmouseup=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> <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"> <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script> <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"> <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> <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> </div> </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"> <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>
|