实验2014052801:动态网页中的动态思想

目标:实现留言板功能

工具:

　　HTML+CSS:静态网站

　　JAVASCRIPT:前台脚本

　　PHP:后台脚本

　　MYSQL:数据储存

　　XAMPP:建立环境

实验1:网页规划

实验2:静态网页

　　1、HTML：添加控件，细分层次

　　index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><script  type="text/javascript" src="./js/lyb.js"></script><link rel=stylesheet type=text/css href=./css/lyb.css></head><body><div><div><h1>留言板</h1></div><div><div><div><div></div><div></div><br><br><br><div></div></div><br><br></div><div><div><a href="http://localhost/lyb/index.php?page=1">首页</a></div></div></div><br><div><div><textarea cols=100% rows=4 id="content" value=""></textarea></div><div><div>验证码：<input type='text' value="" id='confirm'></div><div><img src="./src/img/0.jpg"  id='n1'></div><div class="img_confirm"><img src="./src/img/1.jpg"  id='n2'></div><div class="img_confirm"><img src="./src/img/2.jpg"  id='n3'></div><div class="img_confirm"><img src="./src/img/3.jpg"  id='n4'></div></div><div><input type="submit" value="提交" ></div></div></div></body></html>

　　2、CSS：层次格式设置

　　index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><script  type="text/javascript" src="./js/lyb.js"></script><link rel=stylesheet type=text/css href=./css/lyb.css></head><body><div class=total><div><h1>留言板</h1></div><div class="d1"><div><div class="content"><div class="floor"></div><div class="time"></div><br><br><br><div></div></div><br><br></div><div><div class=page2><a href="http://localhost/lyb/index.php?page=1">首页</a></div></div></div><br><div class="d2"><div><textarea cols=100% rows=4 id="content" value=""></textarea></div><div><div class="text_confirm">验证码：<input type='text' value="" id='confirm'></div><div class="img_confirm"><img src="./src/img/0.jpg" class="image" id='n1'></div><div class="img_confirm"><img src="./src/img/1.jpg" class="image" id='n2'></div><div class="img_confirm"><img src="./src/img/2.jpg" class="image" id='n3'></div><div class="img_confirm"><img src="./src/img/3.jpg" class="image" id='n4'></div></div><div class="submit"><input type="submit" value="提交" ></div></div></div></body></html>

　　lyb.css

html{background: #f7f7f7 url('image/bg.jpg');height: 100%;}
.total{width:80%;margin-left: auto;margin-right: auto;
}
.para{border-style: solid; border-width: 1px;
}
.d1{padding:2em;background-color:white;-moz-transition: background-color .25s ease-in-out;-webkit-transition: background-color .25s ease-in-out;-o-transition: background-color .25s ease-in-out;-ms-transition: background-color .25s ease-in-out;transition: background-color .25s ease-in-out;text-decoration: none;border-radius: 20px;outline: 0;
}.content{width:98%;position: relative;display: inline-block;#background: #0090c5;#color: #fff;text-decoration: none;#border-radius: 20px;border-bottom:black 1px solid;font-weight: 800;outline: 0;-moz-transition: background-color .25s ease-in-out;-webkit-transition: background-color .25s ease-in-out;-o-transition: background-color .25s ease-in-out;-ms-transition: background-color .25s ease-in-out;transition: background-color .25s ease-in-out;padding:1%;}
.time{text-align:right;width:20%;float:right;
}
.floor{width:20%;float:left;
}
.page{#width:20px;#float:left;#border:black 1px solid;#text-align:center;#margin-right:5px;background: none repeat scroll 0px 0px rgb(255, 255, 255);border: 1px solid rgb(231, 236, 240);color: rgb(0, 0, 205);float: left;height: 22px;line-height: 22px;margin-right: 5px;overflow: hidden;text-align: center;text-decoration: none;width: auto;padding: 0px 8px;}
.page1{#width:20px;#float:left;#border:black 1px solid;#text-align:center;#margin-right:5px;background: none repeat scroll 0px 0px rgb(255, 255, 255);border: 1px solid rgb(231, 236, 240);color: rgb(0, 0, 205);float: left;height: 22px;line-height: 22px;margin-right: 5px;overflow: hidden;text-align: center;text-decoration: none;width: auto;padding: 0px 8px;}
.page2{#width:20px;#float:left;#border:black 1px solid;#text-align:center;#margin-right:5px;background: none repeat scroll 0px 0px rgb(255, 255, 255);border: 1px solid rgb(231, 236, 240);color: rgb(0, 0, 205);float: left;height: 22px;line-height: 22px;margin-right: 5px;overflow: hidden;text-align: center;text-decoration: none;width: auto;padding: 0px 8px;}
.img_confirm{width:auto;height:auto;float:left;
}
.text_confirm{float:left;
}
.submit{width:100%;float:left;
}
.image{height:30px;
}

　　3、JS：设置验证码,提交留言内容

　　index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><script  type="text/javascript" src="./js/lyb.js"></script><link rel=stylesheet type=text/css href=./css/lyb.css></head><body οnlοad='init()'><div class=total><div><h1>留言板</h1></div><div class="d1"><div><div class="content"><div class="floor"></div><div class="time"></div><br><br><br><div></div></div><br><br></div><div><div class=page2><a href="http://localhost/lyb/index.php?page=1">首页</a></div></div></div><br><div class="d2"><div><textarea cols=100% rows=4 id="content" value=""></textarea></div><div><div class="text_confirm">验证码：<input type='text' value="" id='confirm'></div><div class="img_confirm"><img src="./src/img/0.jpg" class="image" id='n1'></div><div class="img_confirm"><img src="./src/img/1.jpg" class="image" id='n2'></div><div class="img_confirm"><img src="./src/img/2.jpg" class="image" id='n3'></div><div class="img_confirm"><img src="./src/img/3.jpg" class="image" id='n4'></div></div><div class="submit"><input type="submit" value="提交" οnclick="insert()"></div></div></div></body></html>

　　lyb.js

var n1,n2,n3,n4,conf;
function init(){n1=Math.floor(Math.random()*(9+1));n2=Math.floor(Math.random()*(9+1));n3=Math.floor(Math.random()*(9+1));n4=Math.floor(Math.random()*(9+1));document.getElementById('n1').src='./src/img/'+n1+'.jpg';document.getElementById('n2').src='./src/img/'+n2+'.jpg';document.getElementById('n3').src='./src/img/'+n3+'.jpg';document.getElementById('n4').src='./src/img/'+n4+'.jpg';conf=n1.toString()+n2.toString()+n3.toString()+n4.toString();//console.log(conf);
}function insert(){var content=document.getElementById("content").value;var nconf=document.getElementById("confirm").value;if(content==""){alert("留言内容不能为空！");return;}if(nconf!=conf){alert("验证码错误！");return ;}//console.log(content);var date=new Date();var now=date.toLocaleTimeString();//console.log(now);document.getElementById("content").value="";var month=date.getMonth()+1;now=date.getFullYear()+'.'+month+'.'+date.getDate()+' '+now;request(now,content);
}var xmlhttpreq=new XMLHttpRequest();function request(now,content){xmlhttpreq=new XMLHttpRequest();xmlhttpreq.onreadystatechange=updatePage;//console.log(content);//console.log(now);
    xmlhttpreq.open("GET","http://localhost/lyb/process.php?time="+now+"&text="+content,true);xmlhttpreq.send(null);
}function updatePage() {if (xmlhttpreq.readyState == 4) {if(xmlhttpreq.status!=200){alert("An error occurred:"+xmlhttpreq.statusText);return ;}console.log(xmlhttpreq.responseText);location.reload(true);}}

实验3：动态网页

　　1、PHP：读取留言内容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><script  type="text/javascript" src="./js/lyb.js"></script><link rel=stylesheet type=text/css href=./css/lyb.css></head><body οnlοad='init()'><div class=total><div><h1>留言板</h1></div><div class="d1"><div><?php$rec=0;$page=$_GET['page'];mysql_connect("localhost","root");mysql_select_db('lyb');$str="SELECT * FROM message";$result=mysql_query($str);if($tnum=mysql_num_rows($result)){while($row=mysql_fetch_array($result)){$rec=$rec+1;if($rec<=10*($page-1))continue;if($rec>10*$page)continue;?><div class="content"><div class="floor"><?phpecho $rec;echo '楼';?></div><div class="time"><?php echo $row['time'];?></div><br><br><br><div><?phpecho $row['content'];?></div></div><br><br><?php}}?></div><div><div class=page2><a href="http://localhost/lyb/index.php?page=1">首页</a></div><?phpecho sprintf('<div class=page1><a href="http://localhost/lyb/index.php?page=%d">前一页</a></div>',$page>1?$page-1:$page);$lim=$page-1+5;for($i=$page-1-4;$i<$tnum/10&&$i<=$lim;$i++){if($i<0){$lim++;continue;}echo sprintf('<div class=page><a href="http://localhost/lyb/index.php?page=%d">%d</a></div>',($i+1),($i+1));}echo sprintf('<div class=page1><a href="http://localhost/lyb/index.php?page=%d">后一页</a></div>',$page<$i?$page+1:$page);echo sprintf('<div class=page2><a href="http://localhost/lyb/index.php?page=%d">尾页</a></div>',$i);mysql_close();?></div></div><br><div class="d2"><div><textarea cols=100% rows=4 id="content" value=""></textarea></div><div><div class="text_confirm">验证码：<input type='text' value="" id='confirm'></div><div class="img_confirm"><img src="./src/img/0.jpg" class="image" id='n1'></div><div class="img_confirm"><img src="./src/img/1.jpg" class="image" id='n2'></div><div class="img_confirm"><img src="./src/img/2.jpg" class="image" id='n3'></div><div class="img_confirm"><img src="./src/img/3.jpg" class="image" id='n4'></div></div><div class="submit"><input type="submit" value="提交" οnclick="insert()"></div></div></div></body></html>

　　2、PHP：保存留言内容

<html><head><meta   http-equiv="content-type"   content="text/html;   charset=gb2312"></head><body><?php$text=$_GET['text'];$time=$_GET['time'];mysql_connect("localhost","root");mysql_select_db('lyb');$str=sprintf('INSERT INTO message VALUES(\'%s\',\'%s\')',$time,$text);$str = iconv("UTF-8", "GB2312", $str);echo $str;mysql_query($str);//$str="ALTER TABLE `message` ORDER BY `time` DESC";//mysql_query($str);mysql_close();?></body>
</html>

总结：

　　动态网页中的动态，在于可以根据数据库中的数据改变网页内容。当浏览器发送请求后，服务器运行后台脚本代码改变网页代码，并把改变后的代码发送回浏览器。浏览器无法看见后台脚本。

posted on 2014-05-28 17:27 ORLAN 阅读(...) 评论(...) 编辑收藏

转载于:https://www.cnblogs.com/experiments-of-ORLAN/p/3757547.html

实验2014052801:动态网页中的动态思想相关推荐

C#获取动态网页中的数据
删除线格式 # C#获取动态网页中的数据在实际工作需求中,编辑的文档需要获取历史地震的信息,所以利用计算机语言获取是一个简化人工操作的必要过程,本文分享一下自己第一次获取交互信息的爬虫经历! 操作流 ...
Python抓取网页中的动态序列化数据
Python抓取网页中的动态序列化数据动态序列化数据经常应用于前后端分离的页面.或者通过VUE.JS等HTML页面环境,常规的爬虫抓取方法并不能满足数据采集的要求,因此需要其他的方式进行数据的采集. ...
python抓取网页信息_python抓取网页中的动态数据
一.概念网页中的许多数据并不是写死在HTML中的,而是通过js动态载入的.所以也就引出了什么是动态数据的概念,动态数据在这里指的是网页中由Javascript动态生成的页面内容,是在页面加载到浏览器 ...
python爬取js动态网页_Python 爬取网页中JavaScript动态添加的内容（一）
当我们进行网页爬虫时,我们会利用一定的规则从返回的 HTML 数据中提取出有效的信息.但是如果网页中含有 JavaScript 代码,我们必须经过渲染处理才能获得原始数据.此时,如果我们仍采用常规方法 ...
动态网页html语言,动态网页设计HTML语言基础.ppt
动态网页设计HTML语言基础 * 动态网页设计(Dreamweaver CS3+ASP.NET) * 3.3 静态网页基础 3.3.4 表格例3-7(3-7.html)DW CS3中的表格制作. 表 ...
吴志祥php动态网页设计_PHP动态网页制作—毕业设计论文.doc
PHP动态网页制作摘要留言薄及数据库管理系统是一个成功的网站不可缺少的部分,它的存在对管员来说都至关重要,所以留言薄及数据库管理应该能够为网站管理员提供用户的反馈信息和快捷的查询手段.这种管 ...
动态网页中隐藏url参数传递的方法
做过网站开发的朋友肯定知道,我们在做动态网站的时候往往会在各个页面之间传递参数,而这些参数的名称和值都会在url地址栏中被暴露出来,有的时候参数的名称可能就是数据库中某个字段的名称,这样一方面不安全, ...
php禁止直接访问网页,动态网页中不让直接访问PHP程序文件
由于我们有需要用到某些php文件,而又不希望别人直接访问这个文件,我们可以在包含文件比如global.php中定义一个参数,在被访问页面data.php前面判断是否定义了该参数,没有定义则禁止访问在 ...
Linux部署动态网页,linux构建动态WEB服务器安装篇
linux构建动态WEB服务器安装篇发布时间:2008-09-18 08:50:01 作者:佚名我要评论基本配置安装web服务器:httpd-2.X.X 先优化吧根据CPU设置变量 ...
python django 动态网页_Django创建动态网页的基础知识
1.作为我们的第一个目标,让我们创建一个web页面来输出这个著名的示例消息:Hello world.如果您在没有web框架的情况下发布了一个简单的Hello world web页面,那么您只需将Hel ...

实验2014052801:动态网页中的动态思想

实验2014052801:动态网页中的动态思想相关推荐

最新文章

热门文章