倒计时
2015-11-20 20:47
459 查看
效果:
文件1:LongDay.php
<!DOCTYPE html PUBLIC>
<!--[if IE 7]> <html class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新闻点评功能</title>
<style>
body {height:100px;font-size:16px;color:#048bcc;margin:5%;}
a {text-decoration:none;}
.divFrame {width:572px;border:solid 1px #666;background-color:#fafcff:}
.divFrame .divTitle {padding:5px;background-color:#eee}
.divFrame .divTitle span{padding:2px;padding-top:5px;font-family:黑体;font-size:14px;}
.divFrame .divContent {padding:5px}
.divFrame .divContent .clsShow {font-size:16px;}
.divFrame .divContent .clsShow .ShowBottom{text-align:right;font-size:12px;color:#555;}
.divFrame .divSubmit{padding:20px;}
.divFrame .divSubmit .SubContent .SubBtn{padding-top:10px;padding-bottom:12px;font-size:12px;color:#555;font-weight:bold;}
.btn {border:#666 1px solid;width:80px;}
.txt {width:525px;margin-bottom:5px;margin-top:5px;}
.clsError {margin-bottom:5px;margin-top:5px;}
.clsTip {position:absolute;width:160px;text-align:center;font-size:13px;border:solid 1px #cc3300;padding:2px;margin-bottom:5px;background-color:#ffe0a3;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#divMsg").ajaxStart(function(){
$(this).html("正在发送数据请求......").show(); //显示元素
})
$("#divMsg").ajaxStop(function(){
$(this).html("数据处理完成。").hide(); //显示后再隐藏
})
//初始化点评数据
LoadData();
$("#Button1").click(function(){
var strName = $("#txtName").val();
var strContent = $("#txtContent").val();
$.ajax({
type:"GET",
url:"addData.php",
data:{name:strName,content:strContent},
dataType:"html",
success:function(msg){
alert(msg);
LoadData();
$("#txtName").val("");
$("#txtContent").val("");
}
})
})
//动态加载XML格式的点评数据
function LoadData(){
$.ajax({
type:"GET",
url:"CommentData.xml", //请求XML格式数据
dataType:"xml",
cache:false,
success:function(data){
$(".divContent").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
//如果没有找到数据
if ($(data).find("Data").length == 0){
strHTML = "<div style='text-align:center'>目前还没有找到点评数据!</div>";
}
//遍历获取的数据
$(data).find("Data").each(function(){
var $strUser = $(this);
strHTML += "<div class='clsShow'>";
strHTML += "<div class='ShowTitle'>网友游侠 <a href=''>" + $strUser.find("name").text() +"</a></div>";
strHTML += "<div class='ShowContent'>" + $strUser.find("content").text() +"</div>";
strHTML += "<div class='ShowBottom'>发送时间 " + $strUser.find("date").text() +"</div>";
strHTML += "</div>";
})
$(".divContent").html(strHTML); //显示处理后的数据
}
})
}
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<span>最新点评</span>
</div>
<div class="divContent">
</div>
<div class="divDay" style="text-align:center;">
<?php
$d1=strtotime("January 1 2016");
$d2=ceil(($d1-time())/60/60/24);
date_default_timezone_set("Asia/Shanghai"); //设置时区
echo "今天是:".date("Y-m-d")." ".date("l")."<br/>";
echo "现在时间是: " . date("h:i:sa")."<br/>";
echo "距离2016年新年还有:" . $d2 ." 天"."<br/>";
?>
</div>
<div class="divSubmit">
<div class="SubTitle">发表评论
<span id="divMsg" class="clsTip">正在发送数据请求......</span>
</div>
<div class="SubContent">
<textarea id="txtContent" rows="6" class="txt"></textarea>
<div class="SubBtn">
<span style="float:left">用户名:<input id="txtName" type="text" class="txtName" /></span>
<span style="float:right"><input id="Button1" type="button" value="发表" class="btn" /></span>
</div>
</div>
</div>
</div>
</body>
</html>
文件1:LongDay.php
<!DOCTYPE html PUBLIC>
<!--[if IE 7]> <html class="no-js ie7"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8"> <![endif]-->
<!--[if IE 9]> <html class="no-js ie9"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新闻点评功能</title>
<style>
body {height:100px;font-size:16px;color:#048bcc;margin:5%;}
a {text-decoration:none;}
.divFrame {width:572px;border:solid 1px #666;background-color:#fafcff:}
.divFrame .divTitle {padding:5px;background-color:#eee}
.divFrame .divTitle span{padding:2px;padding-top:5px;font-family:黑体;font-size:14px;}
.divFrame .divContent {padding:5px}
.divFrame .divContent .clsShow {font-size:16px;}
.divFrame .divContent .clsShow .ShowBottom{text-align:right;font-size:12px;color:#555;}
.divFrame .divSubmit{padding:20px;}
.divFrame .divSubmit .SubContent .SubBtn{padding-top:10px;padding-bottom:12px;font-size:12px;color:#555;font-weight:bold;}
.btn {border:#666 1px solid;width:80px;}
.txt {width:525px;margin-bottom:5px;margin-top:5px;}
.clsError {margin-bottom:5px;margin-top:5px;}
.clsTip {position:absolute;width:160px;text-align:center;font-size:13px;border:solid 1px #cc3300;padding:2px;margin-bottom:5px;background-color:#ffe0a3;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#divMsg").ajaxStart(function(){
$(this).html("正在发送数据请求......").show(); //显示元素
})
$("#divMsg").ajaxStop(function(){
$(this).html("数据处理完成。").hide(); //显示后再隐藏
})
//初始化点评数据
LoadData();
$("#Button1").click(function(){
var strName = $("#txtName").val();
var strContent = $("#txtContent").val();
$.ajax({
type:"GET",
url:"addData.php",
data:{name:strName,content:strContent},
dataType:"html",
success:function(msg){
alert(msg);
LoadData();
$("#txtName").val("");
$("#txtContent").val("");
}
})
})
//动态加载XML格式的点评数据
function LoadData(){
$.ajax({
type:"GET",
url:"CommentData.xml", //请求XML格式数据
dataType:"xml",
cache:false,
success:function(data){
$(".divContent").empty(); //先清空标记中的内容
var strHTML = ""; //初始化保存内容变量
//如果没有找到数据
if ($(data).find("Data").length == 0){
strHTML = "<div style='text-align:center'>目前还没有找到点评数据!</div>";
}
//遍历获取的数据
$(data).find("Data").each(function(){
var $strUser = $(this);
strHTML += "<div class='clsShow'>";
strHTML += "<div class='ShowTitle'>网友游侠 <a href=''>" + $strUser.find("name").text() +"</a></div>";
strHTML += "<div class='ShowContent'>" + $strUser.find("content").text() +"</div>";
strHTML += "<div class='ShowBottom'>发送时间 " + $strUser.find("date").text() +"</div>";
strHTML += "</div>";
})
$(".divContent").html(strHTML); //显示处理后的数据
}
})
}
})
</script>
</head>
<body>
<div class="divFrame">
<div class="divTitle">
<span>最新点评</span>
</div>
<div class="divContent">
</div>
<div class="divDay" style="text-align:center;">
<?php
$d1=strtotime("January 1 2016");
$d2=ceil(($d1-time())/60/60/24);
date_default_timezone_set("Asia/Shanghai"); //设置时区
echo "今天是:".date("Y-m-d")." ".date("l")."<br/>";
echo "现在时间是: " . date("h:i:sa")."<br/>";
echo "距离2016年新年还有:" . $d2 ." 天"."<br/>";
?>
</div>
<div class="divSubmit">
<div class="SubTitle">发表评论
<span id="divMsg" class="clsTip">正在发送数据请求......</span>
</div>
<div class="SubContent">
<textarea id="txtContent" rows="6" class="txt"></textarea>
<div class="SubBtn">
<span style="float:left">用户名:<input id="txtName" type="text" class="txtName" /></span>
<span style="float:right"><input id="Button1" type="button" value="发表" class="btn" /></span>
</div>
</div>
</div>
</div>
</body>
</html>
文件2:addData.php
文件3:<span style="font-family: Arial, Helvetica, sans-serif;">CommentData.xml 动态创建</span>
相关文章推荐
- JSON数据解析
- 如何在Mac OS X上安装 Ruby运行环境
- 基于v4l2 ffmpeg x264的视频远程监控(附上编译好的库文件)
- 初始化列表的顺序应该是按照你成员声明顺序初始化
- 最新版SDWebImage的使用
- sublime text技巧
- list::swap函数
- 杭电4857 逃生
- 白话空间统计十九:热点分析(下):结果解读以及用R语言实现
- SDWebImage 的常用方法使用
- SDWebImage使用,图片加载和缓存
- Maven scope 参数含义
- error: two or more data types in declaration specifiers原因及解决方法
- 和菜鸟一起学linux之V4L2摄像头应用流程
- sublime使用常见技巧举例2
- web前端与移动开发---初学者须知
- Activity生命周期应用实例
- poj Game Prediction 1323 (贪心ordp)
- 前端代码发布系统-node开发
- IOS框架研究之SDWebImage的原理以及使用流程