留言板制作

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

a {

text-decoration: none;

}

.wrap {

width: 600px;

height: 200px;

border: 1px solid #CCCCCC;

border-radius: 5px;

margin: 0 auto;

}

.top {

width: 100%;

height: 40px;

overflow: hidden;

}

.top-left {

float: left;

width: 80px;

height: 100%;

line-height: 40px;

text-indent: 2rem;

font-size: 20px;

color: orange;

}

.top-right {

float: right;

width: 60%;

height: 100%;

text-align: right;

padding-right: 20px;

line-height: 40px;

}

.middle {

width: 100%;

height: 100px;

}

.middle>textarea {

width: 570px;

height: 90px;

margin-left: 13px;

border: 1px solid #CCCCCC;

resize: none;

}

.bottom {

width: 100%;

height: 60px;

overflow: hidden;

}

.bottom-left {

float: left;

height: 100%;

width: 350px;

}

.bottom-left div {

float: left;

text-align: center;

line-height: 50px;

width: 70px;

}

.bottom-left div:hover {

color: orange;

}

.bottom-right {

float: right;

width: 80px;

height: 40px;

background-color: orange;

color: white;

border-radius: 5px;

line-height: 40px;

text-align: center;

margin-right: 13px;

font-size: 20px;

margin-top: 8px;

}

.message {

width: 600px;

height: 1000px;

border: 1px solid #CCCCCC;

border-radius: 5px;

margin: 0 auto;

}

.big {

width: 580px;

height: 100px;

border: 1px solid #CCCCCC;

border-radius: 5px;

margin-left: 9px;

margin-top: 10px;

position: relative;

overflow: hidden;

}

.name {

width: 100px;

height: 30px;

line-height: 30px;

padding-left: 10px;

font-weight: bold;

}

.mes {

width: 100%;

height: 30px;

line-height: 30px;

padding-left: 10px;

}

.date {

width: 200px;

height: 30px;

line-height: 30px;

padding-left: 10px;

color: #CCCCCC;

}

.close {

width: 50px;

height: 50px;

position: absolute;

top: 10px;

right: -20px;

}

.close:hover{

color: orange;

}

</style>

</head>

<body>

<div class="wrap">

<div class="top">

<div class="top-left">LOGO</div>

<div class="top-right">

<a href="####">点击领取红包</a>

</div>

</div>

<div class="middle">

<textarea name="" rows="" cols=""></textarea>

</div>

<div class="bottom">

<div class="bottom-left">

<div>表情</div>

<div>图片</div>

<div>视频</div>

<div>话题</div>

<div>文章</div>

</div>

<div class="bottom-right">发布</div>

</div>

</div>

<div class="message"></div>

<script src="js/tween.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">

//按钮的透明度

function opacityCtrl(){

if (textArea.value.length==0) {

publishBtn.style.opacity=0.4;

}

else{

publishBtn.style.opacity=1;

}

}

//创建div的函数

function createDiv(c){

var div=document.createElement("div");

//给div符属性

div.setAttribute("class",c);

//需要div的返回值

return div;

}

//获取一些标签

var massage =document.getElementsByClassName("message")[0];

// querySelector  方法返回文档中匹配指定 CSS 选择器的一个元素

var publishBtn=document.querySelector(".bottom-right");

var texArea=document.querySelector(".middle>textarea");

var topRight=document.querySelector(".top-right>a");

//字数设置

var textLimit=140;

var timer1=null;

var timer2=null;//添加两个定时器

textArea.onfocus=function(){

topRight.innerHTML="还可以输入"+textLimit+"字";

topRight.style.color="#CCCCCC";

opacityCtrl()

}

textArea.onkeyup=function(){

textLimit=140-textArea.value.length;

topRight.innerHTML="还可以输入"+textLimit+"字";

if (textLimit<0) {

topRight.innerHTML="超出"+(textArea.value.length-140)+"字,请修改";

}

opacityCtrl();

}

//onblur事件失去焦点触发

textArea.onblur=function(){

topRight.innerHTML="点击领取红包";

topRight.style.color="";

opacityCtrl();

}

function fabu() {

var big = createDiv("big");

var name1 = createDiv("name");

name1.innerHTML = "发布者";

var mes = createDiv("mes");

mes.innerHTML = textArea.value;

var date1 = createDiv("date");

date1.innerHTML = publishTime();

var close = createDiv("close");

close.innerHTML = "X";

//删除

// close.onclick = function() {

// //删除的动画效果,要先删除后动画

// var t=0;

// var bw=big.offsetWidth;

// var cw=0-bw;

// var bh=big.offsetHeight;

// var ch=0-bh;

// var d=50;

// clearInterval(timer2);

// timer2=setInterval(function(){

// t++;

// if (t>=d) {

// message.removeChild(big);

// clearInterval(timer2);

//

// }

// big.style.height=Tween.Linear(t,bh,ch,d)+"px";

// big.style.width=Tween.Linear(t,bw,cw,d)+"px";

// },10)

// }

big.appendChild(name1);

big.appendChild(mes);

big.appendChild(date1);

big.appendChild(close);

message.insertBefore(big, message.firstElementChild);

//添加动画效果

// var t=0;

// var b=-170;

// var c=0-b;

// var d=50;

// clearInterval(timer1);

// timer1=setInterval(function(){

// t++;

// if (t>=d) {

// clearInterval(timer1);

//

// }

// big.style.top=Tween.Back.easeOut(t,b,c,d)+"px";

// },20)

//

}

//发布时间

function publishTime(){

var now = new Date();

var m = now.getMonth()+1;

var d = now.getDate();

var h = now.getHours();

var fen = now.getMinutes();

return m+"月" +d+"日"+h+":"+fen+"发布";

}

publishBtn.onclick = function(){

if (textArea.value=="") {

alert("不能为空");

}else if(textLimit<0){

alert("超出字数");

}else{

fabu();

textArea.value=="";

textLimit=140;//每次发布完一条后,让textlimt为140

opacityCtrl();

}

opacityCtrl()

}

//onblur失去焦点

</script>

</body>

</html>

时间: 07-06

留言板制作的相关文章

javascript-简易留言板制作

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js练习</title> <style type="text/css"> #ull{ padding:0px; margin: 0px; } #ull li{ list-style:none; background-color: #ccc; width:auto;

简单的PHP留言板制作(一)

首先是确定自己的留言板需求.例如:名字,邮件及留言内容. 一. 建立一个数据库guestbook. CREATE TABLE IF NOT EXISTS `content` ( `id` int(11) NOT NULL auto_increment, `name` varchar(20) NOT NULL, `email` varchar(50) NOT NULL, `content` varchar(200) NOT NULL, PRIMARY KEY (`id`)) ENGINE=MyIS

html的留言板制作(js)

这次留言板运用到了最基础的localstorage的本地存储,展现的效果主要有: 1.编写留言2.留言前可以编辑自己的留言昵称.不足之处: 1.未能做出我喜欢的类似于网易的叠楼功能. 2.未能显示评论楼层(可实现,但是插进去十分不美观). 编辑效果如下: 文件为html文件,编写的方式主要为div+css布局和js.本人的有点在于编写类似于后台功能和js的实现较快.但是缺点在于前端的编写较为薄弱. 在学长的帮助下前端的设计还是比较美观的.下面我将开放记事本的全部源码. <!DOCTYPE HTM

JSP+Servlet+JavaBean传统方式实现简易留言板制作(注册、登录、留言)

学JavaEE也有一段时间了,跟着老师和教材做了不少东西,但是一直以来没时间写博客,今天就把以前写的一个简易留言板简单发一下吧. 开发工具 主要用的开发工具为 MyEclipse(2014.2016均可).Tomcat 7.0.SQL Server 2016.SSMS数据库管理工具.浏览器等. 开发环境 开发环境为windows系统,已安装配置Java最新版开发环境. 主要功能与语言 登录.注册.并可以在留言板留言,所有留言内容均可见. 所采用JSP+Servlet+JavaBean传统方式,仅

制作PHP+MYSQL留言板

1.建立conn.php <?php [email protected]_connect("127.0.0.1","root","") or die ("Connect False"); mysql_select_db("wikidb",$bbs); mysql_query("set names 'utf8'"); ?> 2.建立add.php <?php includ

利用“多说”制作留言板、评论系统

留言板和评论系统在网站建设中会经常用到,今天为大家介绍如何利用多说来为自己的网站制作留言板.评论系统!注意以下只是介绍一下简单的创建设置,更多功能大家可以自己去探索! 1.进入多说网站 http://duoshuo.com/ 并且登录. 2.点击首页的“我要安装”,进入创建站点页面,然后根据自己的实际情况填写信息. 3.进入后台管理界面,点击工具->获取代码->通用代码,将这段代码复制到你留言板或者是评论区的地方,代码中需要你填写的信息在“文章”中设置 4.文章设置->添加文章,注意如果

jsp 用application对象制作留言板

1 <%@ page contentType="text/html; charset=gb2312"%> 2 <html> 3 <body> 4 <form action="show.jsp" method="post"> 5 输入名字:<input type="text" name="name"><br> 留言标题:<input

AngularJs学习笔记(制作留言板)

原文地址:http://www.jmingzi.cn/?post=13 初学Anjularjs两天了,一边学一边写的留言板,只有一级回复嵌套.演示地址 这里总结一下学习的过程和笔记.另外,看看这篇文章也是会有收获的. 我觉得AngularJs就是实现了php的很多功能和方法,除了不能直接操作数据库以外,他有很多插件可以提供使用,很强大. 我遇到的问题: 1.使用$http.post()方法提交到php的时候,php的接收语句是这样的: 1 $shuju = file_get_contents('

利用php制作简单的文本式留言板

del.php 代码如下: <html><head ><meta charset="utf-8"><title>我的留言板</title></head><body><center>    <?php include("menu.php"); ?>    <h3>删除留言</h3>    <?php    $id=$_GET[&qu