留言板效果，爱的告白

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 }
p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; min-height: 36.0px }
p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d74200 }
p.p4 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #289c97 }
p.p5 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #060606 }
p.p6 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4a8a01 }
p.p7 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151; min-height: 36.0px }
p.p8 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #d16400 }
p.p9 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #929151 }
p.p10 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4f5d66 }
p.p11 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #a5b2b9 }
p.p12 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #4663cc }
span.s1 { color: #4f5d66 }
span.s2 { color: #2b7ec3 }
span.s3 { color: #48565d }
span.s4 { color: #289c97 }
span.s5 { color: #d74200 }
span.s6 { color: #000000 }
span.s7 { color: #060606 }
span.s8 { color: #929151 }
span.s9 { color: #4a8a01 }
span.s10 { color: #ad42ef }
span.s11 { color: #698906 }
span.s12 { color: #d16400 }
span.s13 { color: #4663cc }
span.s14 { color: #e48b00 }
span.s15 { color: #b58a00 }
span.Apple-tab-span { white-space: pre }

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

#box {

border: 2px solid deeppink;

width: 1000px;

margin: 10px auto;

padding: 10px;

background-color: pink;

color: white;

font-size: 20px;

}

#title {

display: flex;

}

#titleFont {

line-height: 50px;

}

#titleSpace {

height: 50px;

width: 900px;

border: 1px solid deeppink;

outline: deeppink;

font-size: 20px;

color: deepskyblue;

}

#content {

display: flex;

margin-top: 20px;

}

#contentspace {

border: 1px solid deeppink;

outline: deeppink;

font-size: 20px;

height: 300px;

width: 900px;

color: seagreen;

}

#submit {

height: 30px;

width: 100px;

border: 1px solid yellow;

color: crimson;

background-color: white;

font-size: 20px;

outline: none;

cursor: pointer;

margin-left: 60px;

margin-top: 20px;

}

#text {

font-size: 25px;

}

#show {

margin-left: 55px;

margin-top: 20px;

}

li,

ul {

margin: 0;

padding: 0;

list-style-type: none;

}

li {

height: 50%;

line-height: 40px;

text-indent: 20px;

}

ul {

width: 900px;

}

</style>

</head>

<body>

<div id="box">

<div id="title">

<div id="titleFont">标题：</div>

<input type="text" id="titleSpace" />

</div>

<div id="content">

<div id="contentFont">

内容：

</div>

<textarea id="contentspace"></textarea>

</div>

<input type="button" id="submit" value="提交" />

<div id="show">

<div id="text">

爱的告白

</div>

</div>

</div>

</body>

<script type="text/javascript" src="js/tween(1).js">

</script>

<script type="text/javascript">

var btn = document.getElementById("submit");

var tSpace = document.getElementById("titleSpace");

var cSpace = document.getElementById("contentspace");

var show = document.getElementById("show");

var timer = null;

//赋点击事件

btn.onclick = function() {

var str1 = tSpace.value;

var str2 = cSpace.value;

//判断是否为空

if(str1.length == 0 || str2.length == 0) {

alert("爱的表白怎么能少了文字的点缀呢？")

} else {

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

ul.style.marginTop = 10 + "px";

ulHeight(ul);

var liTop = document.createElement("li");

liTop.style.backgroundColor = "cadetblue";

liTop.innerHTML = "??" + tSpace.value + "??";

ul.appendChild(liTop);

var liBot = document.createElement("li");

liBot.style.backgroundColor = "seagreen";

liBot.innerHTML = "??" + cSpace.value + "??";

liBot.style.position = "relative";

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

a.href = "#"

a.innerHTML = "删除";

a.style.position = "absolute";

a.style.right = 10 + "px";

a.onclick = function() {

ul.remove();

}

liBot.appendChild(a);

ul.appendChild(liBot);

show.appendChild(ul);

}

}

//产生高度的函数

function ulHeight(obj) {

var t = 0;

var d = 30;

var b = 0;

var c = 80;

clearInterval(timer);

timer = setInterval(function() {

t++;

if(t >= d) {

clearInterval(timer);

}

obj.style.height = Tween.Bounce.easeOut(t, b, c, d) + "px";

}, 30)

}

</script>

</html>

时间： 2025-01-13 08:37:27

留言板效果，爱的告白的相关文章

用js做一个简单的留言板效果

html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>js实现简单留言板</title> 5: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6: <link rel="stylesheet&quo

php实现简易留言板效果

首先是Index页面效果图 index.php <?php header('content-type:text/html;charset=utf-8'); date_default_timezone_set('PRC'); $filename="msg.txt"; $msgs=[]; //检测文件是否存在 if(file_exists($filename)){ //读取文件中的内容 $string=file_get_contents($filename); if(strlen($

问题：关于一个贴友的js留言板的实现

需求:用js做一个简单的留言板效果 html部分: 1: <!DOCTYPE> 2: <html lang="zh-en"> 3: <head> 4: <title>js实现简单留言板</title> 5: <meta http-equiv="content-type" content="text/html;charset=utf-8"> 6: <link rel=&q

JavaScript+IndexedDB实现留言板：客户端存储数据

之前看到贴友有问:用js怎么实现留言板效果.当时也写了一个,但是没有实现数据存储:http://www.ido321.com/591.html 现在将之前的改写一下,原来的HTML布局不变,为了防止Google调整字体,在原来的css中加入一个样式 1: body{ 2: font-size: 20px; 3: -webkit-text-size-adjust:none; 4: } 在google中调整字体,可以见此文:http://www.ido321.com/652.html     有评论

怎样在留言板中实现动画效果

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Monaco; color: #2b7ec3 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Monaco; min-height: 25.0px } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 18.0px Monaco; color: #d74200 } p.p4 { margi

【weiphp微信开发教程】留言板插件开发详解

基于weiphp框架的留言板插件教程: 1.功能分析 传统的留言板应该具有发布留言.查看留言.回复留言.管理留言等功能,本教程开发的是最基本的留言板,仅包含发布留言和查看留言两个功能,根据功能用bootstrap制作的前台页面样式如下: 2.新建weiphp插件 在第一步我们根据留言板的功能需求设计了前台效果页面,那么接下来的步骤就是根据效果来逐步开发weiphp插件了 第一步,在weiphp后台管理页面创建一个插件,记得把是否需要配置项和是否需要管理列表两个选项都选为“是” 第二步,安装创建好

微信小程序实现简易留言板

微信小程序现在很火,于是也就玩玩,做了一个简易的留言板,让大家看看,你们会说no picture you say a j8 a,好吧先上图. 样子就是的,功能一目了然,下面我们就贴实现的代码,首先是HTML页面,好吧,其实微信小程序的是wxml(微信ml)总感觉怪怪的,有木有. 1 <!--index.wxml--> 2 <view class="msg-box"> 3 <!--留言--> 4 <view class="send-bo

LocalStorage 本地存储 做一个简单留言板

二话不说,先上代码: 1 <body> 2 <div><textarea id="trCon" cols="30" rows="10"></textarea></div> 3 <div><input type="button" value="发表" onclick="PostCon()"><inpu

使用PHP连接数据库实现留言板功能

PHP实现留言板功能: 1 首先是登录页面: <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>留言板登录</title>        <script src="bootstrap/js/jquery-1.11.2.min.js"></script>        &l