写九宫格日记模块设计

最新推荐文章于 2024-07-10 09:25:34 发布

hyty

最新推荐文章于 2024-07-10 09:25:34 发布

阅读量1.4k

点赞数

分类专栏： java

本文链接：https://blog.csdn.net/qq_38341596/article/details/82903744

版权

这篇博客详细介绍了如何设计和实现一个九宫格日记模块。用户在成功登录系统后，可以进入写日记页面填写内容。系统会生成日记预览图片，用户可以选择是否满意。满意则保存日记图片及信息，不满意则返回修改。实现过程中涉及文件头部信息处理、jQuery实现PNG透明、九宫格布局、日记填写、预览图片生成以及图片保存等关键步骤。

摘要由CSDN通过智能技术生成

九宫格日记模块概述

1.成功登录系统
2.写九宫格日记页面填写日记信息
3.生成预览日记图片
4.是否满意否-》2 /是-》5
5.保存日记图片，缩略图级日记信息

1.文件头部信息

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:if test="${empty sessionScope.userName}">
	<c:redirect url="index.jsp"/>
</c:if>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

2.应用jquery让png图片背景透明

<!-- 使用JQuery解决PNG图片背景不透明的问题 -->
	<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="JS/pluginpage.js"></script>
	<script type="text/javascript" src="JS/jquery.pngFix.pack.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('div.examples').pngFix( );
	});
</script>

3.九宫格显示样式

<!-- ******************************* -->
<title>写九宫格日记</title>
<link rel="stylesheet" href="CSS/style.css">
<style>
#gridLayout { /*设置写日记的九宫格的<ul>标记的样式*/
	float: left; /*设置浮动方式*/
	list-style: none; /*不显示项目符号*/
	width: 100%; /*设置宽度为100%*/
	margin: 0px; /*设置外边距*/
	padding: 0px; /*设置内边距*/
	display: inline; /*设置显示方式*/
}

#gridLayout li { /*设置写日记的九宫格的<li>标记的样式*/
	width: 33%; /*设置宽度*/
	float: left; /*设置浮动方式*/
	height: 198px; /*设置高度*/
	padding: 0px; /*设置内边距*/
	margin: 0px; /*设置外边距*/
	display: inline; /*设置显示方式*/
}
#opt{									/*设置默认选项相关的<ul>标记的样式 */
	padding:0px 0px 0px 10px;	/*设置上、右、下内边距为0，左内边距为10*/
	margin:0px;					/*设置外边距*/
}
#opt li{								/*设置默认选项相关的<li>标记的样式 */
	width:99%;
	padding-top:5px 0px 0px 10px;
	font-size:14px;				/*设置字体大小为14像素*/
	height:25px;				/*设置高度*/
	clear:both;					/*左、右两侧不包含浮动内容*/
}
.cssContent{							/*设置内容的样式*/
	float:left;
	padding:40px 0px;					/*设置上、下内边距为40，左、右内边距为0*/
	display:inline;						/*设置显示方式*/
}
#weather{								/*设置天气相关<ul>标记的样式*/
	border:0px;
	padding:15px 0px 0px 30px;
	margin:20px;
	display:inline;

}
#weather li{							/*设置天气相关<li>标记的样式*/
	border:0px;
	width:90%;
	padding:10px;
	margin:0px;
	display:inline;	
}
input{									/*设置输入框的样式*/
	font-size:12px;
}
.title{									/*设置标题的样式*/
color:#0F6548;
font-weight:bold;
}
#writeDiary_bg{							/*设置日记背景的样式*/
width:738px;							/*设置宽度*/
height:751px;						/*设置高度*/
background-repeat:no-repeat;							/*设置背景不重复*/
background-image:url(images/diaryBg_00.jpg);						/*设置默认的背景图片*/
padding-top:50px;						/*设置顶边距*/
padding-left:53px;						/*设置左边距*/
}
</style>
<script language="javascript">

4.填写日记信息的实现过程

function setTemplate(style){
	if(style=="默认"){
		document.getElementById("writeDiary_bg").style.backgroundImage="url(images/diaryBg_00.jpg)";
		document.getElementById("writeDiary_bg").style.width="738px";	//宽度
		document.getElementById("writeDiary_bg").style.height="751px";	//高度
		document.getElementById("writeDiary_bg").style.paddingTop="50px";//顶边距
		document.getElementById("writeDiary_bg").style.paddingLeft="53px";//左边距
		document.getElementById("template").value="默认";
	}else if(style=="女孩"){
		document.getElementById("writeDiary_bg").style.backgroundImage="url(images/diaryBg_01.jpg)";
		document.getElementById("writeDiary_bg").style.width="750px";	//宽度
		document.getElementById("writeDiary_bg").style.height="629px";	//高度
		document.getElementById("writeDiary_bg").style.paddingTop="160px";//顶边距
		document.getElementById("writeDiary_bg").style.paddingLeft="50px";//左边距
		document.getElementById("template").value="女孩";
	}else{
		document.getElementById("writeDiary_bg").style.backgroundImage="url(images/diaryBg_02.jpg)";
		document.getElementById("writeDiary_bg").style.width="740px";	//宽度
		document.getElementById("writeDiary_bg").style.height="728px";	//高度
		document.getElementById("writeDiary_bg").style.paddingTop="30px";//顶边距
		document.getElementById("writeDiary_bg").style.paddingLeft="60px";	//左边距
		document.getElementById("template").value="怀旧";
	}
}
window.onload=function(){
	var date=new Date();		//创建日期对象
	year=date.getFullYear();	//获取当前日期中的年份
	month=date.getMonth();		//获取当前日期中的月份
	day=date.getDate();			//获取当时日期中的日
	week=date.getDay();			//获取当前日期中的星期
	var arr=new Array("星期日","日期一","星期二","星期三","星期四","星期五","星期六");
	document.getElementById("now").innerHTML=year+"年"+(month+1)+"月"+day+"日 "