本文介绍了如何使用JavaScript实现进度条效果，并详细讲解了论坛发帖功能的HTML、CSS和JS代码实现，包括两个部分：进度条的展示效果及论坛发帖页面的构建。
目录
进度条
效果图
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div class="wrapper">
<div id="tiao">
<span id="jindu"></span>
</div>
</div>
</body>
</html>css代码
.wrapper{
width: 300px;
height: 50px;
border: 1px solid black;
border-radius: 25px;
}
.wrapper #tiao{
height: 100%;
background-color: #ff6400;
border-radius: 25px;
display: flex;
justify-content: center;
align-items: center;
}
#jindu{
height: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
font-size: 18px;
font-weight: bold;
}js代码
<script>
var _wrapper=document.querySelector(".wrapper");
var _tiao=document.querySelector("#tiao"); //背景
var _jindu=document.querySelector("#jindu");
var i=0;
var timer=setInterval(function(){
if(i<100){
i++;
_tiao.style.width=i*3+"px";
_jindu.innerText=i+"%";
}
if(i>=100){
_jindu.innerText="加载完成";
clearInterval(timer);
}
console.log(i);
},60)
</script>论坛发文
效果图
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/02.css">
</head>
<body>
<div class="wrapper">
<div class="fb">
<button id="btn1">我要发帖</button>
</div>
<div class="tips">
<ul id="postul"></ul>
</div>
<div class="content">
<div>
<input type="text" placeholder="请输入标题（1-50个字符）" id="headline">
</div>
<div>
<label>所属板块：</label>
<select name="" id="sec">
<option value="">请选择板块</option>
<option value="1">电子书籍</option>
<option value="2">新课来了</option>
<option value="3">新手报到</option>
<option value="4">职业规划</option>
</select>
</div>
<div>
<textarea></textarea>
</div>
<div>
<button id="btn2">发布</button>
</div>
</div>
</div>
<script src="./js/02.js"></script>
</body>
</html>css代码
.wrapper {
width: 600px;
margin: 0 auto;
position: relative;
}
.wrapper .fb {
padding: 10px 0;
border-bottom: 1px solid gray;
}
.wrapper .fb button {
width: 200px;
height: 50px;
border: none;
border-radius: 10px;
background-color: #00aa00;
color: #fff;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
.content {
position: absolute;
top: 70px;
left: 120px;
width: 480px;
padding: 10px;
margin: 10px 0;
border: 1px solid gray;
background-color: #fff;
display: none;
}
.content div {
margin: ;
}
.content input {
width: 100%;
height: 30px;
}
.content select {
width: 200px;
height: 30px;
}
.content textarea{
width: 99%;
height: 200px;
}
.content div:nth-of-type(4) button {
width: 160px;
height: 40px;
border: none;
border-radius: 10px;
background-color: #00aa00;
color: #fff;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
.box{
width: 100%;
overflow: hidden;
}
.tips{
width: 100%;
padding: 10px 0;
overflow: hidden;
}
.tips #postul li{
padding: 10px 0;
border-bottom: 1px dashed gray;
overflow: hidden;
}
.tips #postul li div img{
width: 100px;
height: 100px;
border-radius: 50%;
}
.tips #postul li div {
width: 100px;
margin-right: 30px;
float: left;
}
.tips #postul li h2{
float: left;
margin:10px 0 30px;
width: 70%;
}
.tips #postul li p{
float: left;
width: 70%;
}
.tips #postul li p span{
float: right;
}js代码
//获取我要发布按钮
var _btn1 = document.querySelector("#btn1");
//获取发布信息表content
var _content = document.querySelector(".content");
//获取发布
var _btn2 = document.querySelector("#btn2");
//获取信息表tips
var _tips = document.querySelector(".tips");
_content.style.display = "none";
// _tips.style.display = "none";
//点击按钮时显示发布信息表
_btn1.onclick = function() {
if(_btn1.innerText=="我要发帖"){
this.innerText="不想发了";
_content.style.display = "block";
}
else{
this.innerText="我要发帖";
_content.style.display = "none";
}
}
//时间
function getTime(){
var mydate = new Date();
var year = mydate.getFullYear(); //年
var month = mydate.getMonth() + 1; //月
var date = mydate.getDate(); //日
var day = mydate.getDay(); //星期
var hours = mydate.getHours(); //时
var minutes = mydate.getMinutes(); //分
var seconds = mydate.getSeconds(); //秒
if (month < 10) {
month = `0${month}`;
}
if (hours < 10) {
hours = `0${hours}`;
}
if (minutes < 10) {
minutes = `0${minutes}`;
}
var cl=`${year}-${month}-${date} ${hours}:${minutes}`;
return cl;
}
//点击发布
/* 第一种*/
_btn2.onclick = function(){
_tips.style.display = "block";
// 创建li标签 【并把li标签添加到ul列表下的首个子标签的位置】
var newli = document.createElement("li");
var ul = document.getElementById("postul");
ul.insertBefore(newli, ul.firstChild); //【保证li当前添加的li标签始终在最上面】insertBefore插入
// 获取标题输入框中的内容
var biao= document.getElementById("headline");
//随机取1-4的随机数
var num = Math.floor(Math.random() * 4+1);
// 获取所属板块中的内容
var _select = document.getElementById("sec");
//获取当前选中的option的下标
var index=_select.selectedIndex;
//获取select下所有options
var option=_select.options[index];
newli.innerHTML=`
<div><img src='images/tou0${num}.jpg'></div>
<h2>${biao.value}</h2>
<p>模块信息：${option.innerText}<span>发布时间 :${getTime()}</span></p>`;
}
/* 第二种 */
/* _btn2.onclick = function() {
// _content.style.display = "none";
_tips.style.display = "block";
// 创建li标签 【并把li标签添加到ul列表下的首个子标签的位置】
var newli = document.createElement("li");
var ul = document.getElementById("postul");
ul.insertBefore(newli, ul.firstChild); //【保证li当前添加的li标签始终在最上面】insertBefore插入
// 创建div标签 并往li中添加div标签
var newdiv = document.createElement("div");
newli.appendChild(newdiv);//appendChild追加
// 往div中添加图片 设置当前图片的路径
var img = document.createElement("img");
newdiv.appendChild(img);//appendChild追加
//随机取1-4的随机数
var num = Math.floor(Math.random() * 4+1);
//设置路径---通过setAttribute自定义属性 设置属性
img.setAttribute("src", "images/tou0" + num + ".jpg");
// 在li中添加h1标签
var h1 = document.createElement("h1");
newli.appendChild(h1);
// 获取标题输入框中的内容
var biao= document.getElementById("headline");
h1.innerText = biao.value; //注意：因为input是单边标签，所以用.value获取
// 在li中添加p标签
var newp = document.createElement("p");
newli.appendChild(newp);
// 获取所属板块中的内容
var _select = document.getElementById("sec");
//获取当前选中的option的下标
var selectIndex=_select.selectedIndex
//获取select下所有options
var options=_select.options;
newp.innerText = "模块信息：" + options[selectIndex].innerText;
// 在p标签中添加span标签
var span = document.createElement("span");
newp.appendChild(span);
// 给span标签设置外边框边距、距离标签100px
// span.style.marginLeft = "100px";
// 把日期写在span标签中
span.innerText = "发布时间 : " + getTime();
} */
846
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
