精华内容
下载资源
问答
  • [JavaScript] 用 jQuery 实现发帖功能

    千次阅读 2020-04-11 17:05:11
    本文包含了 JavaScript 中用 jQuery 实现发帖功能的相关案例。。。


    发帖

    1. 主要需求

    • 在页面中输入昵称和评论内容之后,点击评论即可发帖。完成效果如下图所示:
      在这里插入图片描述

    2. 代码实现

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>发帖</title>
        <script src="../js/jquery-1.11.3.min.js"></script>
    </head>
    <body>
    <table id="tb" style="border:1px solid red;">
        <tr>
            <td>Regino's Blog:</td>
            <td><a href="https://qwert.blog.csdn.net/">https://qwert.blog.csdn.net/</a></td>
        </tr>
    </table>
    <br/>
    昵称:<input type="text" id="txt" value=""/><br/>
    <textarea id="textContent" rows="10" cols="15"></textarea><br/>
    <input type="button" value="评论" id="btn1"/>
    
    <script type="text/javascript">
        $(function(){//页面加载完成时自动执行
            let tb = $('#tb');//获取表格
            $('#btn1').click(function(){
                let name = $('#txt').val();//昵称
                let text = $('#textContent').val();//评论内容
                let tr = "<tr><td>"+name+":</td><td>"+text+"</td></tr>";
                tb.append(tr);//添加一行
                $('#txt').val("");//清空昵称
                $('#textContent').val("");//清空评论内容
            });//点击事件
        });
    </script>
    </body>
    </html>
    

    原文链接:https://qwert.blog.csdn.net/article/details/105455183

    展开全文
  • js如何实现发帖锁定

    2010-03-22 13:35:25
    对于已经得到解决的帖子,为了避免一些人反复的回帖,采用锁定该帖的方式禁止回帖!
  • php 简单发帖实现

    2018-11-29 14:08:20
    php 简单发帖实现
  • 使用jquery实现论坛发帖

    千次阅读 2020-08-16 21:40:00
    //使用javascript实现论坛发帖 //我要发帖 按钮的单击事件 function show(){ //获取隐藏的div var div=document.getElementsByClassName("post")[0]; div.style.display="block"; } //发布按钮单机事件 function ...
    <script>
        $(function(){
            $("span").click(function(){
                 $(".post").css("display","block");
            })
            $(".btn").click(function(){
                //创建保存头像的数组
                var tou=new Array("images/tou01.jpg","images/tou02.jpg","images/tou03.jpg","images/tou04.jpg");
                //创建标签
                var $li=$("<li></li>");
                var $div=$("<div></div>");
                var $img=$("<img/>");
                var $h1=$("<h1></h1>");
                var $p=$("<p></p>");
                //获取标题信息
                var title=$(".title").val();
                //获取所属板块
                var ban=$("select").val();
                //获取头像 随机生成图片
                var index=Math.floor(Math.random()*4);
                //6.获取系统时间
                var time=new Date();
                //获取年月日时分秒
                var year=time.getFullYear();
                var yue=time.getMonth()+1;
                var ri=time.getDate();
                var shi=time.getHours();
                var fen=time.getMinutes();
                var miao=time.getSeconds();
                //7.将板块和时间拼接成整体
                var shu="发表板块:"+ban+"  "+"发表时间:"+year+"-"+yue+"-"+ri+"-"+shi+":"+fen+":"+miao;
                //8.将各项数据放入对应的标签
                $img.attr("src",tou[index]);
                $h1.html(title);
                $p.html(shu);
                //获取父标签ul
                var $ul=$("ul");
                //10.a 将img放入div中
                $div.html($img);
                //将div放入li中
                $li.append($div);
                //b.将h1放入li
                $li.append($h1);
                //c.将p放入li
                $li.append($p);
                //11.将li放入ul的第一个位置
                $li.insertBefore($ul);
                //12.将发帖的div隐藏
                $(".post").hide();
                //13.清空上一次发帖的内容 清空div当中的信息
               /* $(".title").html("");
                $("select").html("<option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option>");
                $("textarea").html("");*/
            })
        })
    </script>
    //使用javascript实现论坛发帖
     //我要发帖  按钮的单击事件
    function show(){
         //获取隐藏的div
        var div=document.getElementsByClassName("post")[0];
        div.style.display="block";
    }
    //发布按钮单机事件
    function upload(){
        //1.创建数组保存四张头像的存储路径
        var tou=new Array("images/tou01.jpg","images/tou02.jpg","images/tou03.jpg","images/tou04.jpg");
        //2.创建标签
        var li=document.createElement("li");
        var div=document.createElement("div");
        var img=document.createElement("img");
        var h1=document.createElement("h1");
        var p=document.createElement("p");
        //3.获取标题信息
        var title=document.getElementsByClassName("title")[0].value;
        //4.获取所属板块
        var ban=document.getElementsByTagName("select")[0].value;
        //5.获取头像 随机生成图片
        var index=Math.floor(Math.random()*4);
        //6.获取系统时间
        var time=new Date();
        //获取年月日时分秒
        var year=time.getFullYear();
        var yue=time.getMonth()+1;
        var ri=time.getDate();
        var shi=time.getHours();
        var fen=time.getMinutes();
        var miao=time.getSeconds();
        //7.将板块和时间拼接成整体
        var shu="发表板块:"+ban+"  "+"发表时间:"+year+"-"+yue+"-"+ri+"-"+shi+":"+fen+":"+miao;
        //8.将各项数据放入对应的标签
        img.setAttribute("src",tou[index]);
        h1.innerHTML=title;
        p.innerHTML=shu;
        //9.获取父标签ul标签
        var ul=document.getElementsByTagName("ul")[0];
        //10.a 将img放入div中
        div.appendChild(img);
        //将div放入li中
        li.appendChild(div);
        //b.将h1放入li
        li.appendChild(h1);
        //c.将p放入li
        li.appendChild(p);
        //11.将li放入ul的第一个位置
        ul.insertBefore(li,ul.firstChild);
        //12.将发帖的div隐藏
        document.getElementsByClassName("post")[0].style.display="none";
        //13.清空上一次发帖的内容 清空div当中的信息
        document.getElementsByClassName("title")[0].value="";
        document.getElementsByClassName("content")[0].value="";
    }
    function guanbi(){
        var guan=document.getElementsByClassName("post")[0].style.display="none";
    }
    
    展开全文
  • js模拟论坛发帖

    2020-07-28 23:27:29
    模拟论坛发帖 <html> <head> <title>论坛发帖</title> <style type="text/css"> .content{ width:520px; /*border:1px solid pink;*/ } #txt1{ width:600...

    模拟论坛发帖

    <html>
    	<head>
    		<title>论坛发帖</title>
    		<style type="text/css">
    			.content{
    				width:520px;
    				/*border:1px solid pink;*/
    			}
    			#txt1{
    				width:600px;
    				padding-left:5px;
    				padding-bottom:5px;
    				border-bottom:1px solid gray;
    			}
    			#txt2{
    				width:500px;
    				border:1px solid gray;
    				padding-left:5px;
    				margin-left:50px;
    				margin-top:10px;
    				display:none;
    				position:absolute;
    				background:white;
    			}
    			#txt1 #btn1{
    				background:#3CB371;
    				color:white;
    				width:300px;
    				font-size:25px;
    				border-color:#3CB371;
    			}
    			#txt2 #btn2{
    				background:#3CB371;
    				color:white;
    				width:120px;
    				border-color:#3CB371;
    			}
    			img{
    				border-radius:50%;
    			}
    		</style>
    		<script type="text/javascript">
    			function fatei(){
    				document.getElementById("txt2").style.display="block";
    				
    			}
    			var i=1;
    			function fabu(){
    				var biaoti=document.getElementById("biaoti").value;
    				//var selects=document.getElementsByTagName("select");
    				var selec=document.getElementById("selec").value;
    				var txtara=document.getElementById("txtara").value;
    				var txt3=document.getElementById("txt3");
    				
    				if(i<=4){
    					var html="<br>"+"<img src='images/tou0"+i+".jpg'>"+"<br>";
    					i++;
    					if(i>4){
    						i=1;
    					}
    					html+=biaoti+"<br>";
    					//txt3.innerHTML +="";
    					html+=txtara+"<br>";
    					/*for(var j=0;j<=selects.length;j++){
    						html+="版本:"+selects[j].value ;
    					}*/
    					html+="版本:"+selec+"&nbsp;&nbsp;";
    					var date=new Date();
    					var year=date.getFullYear();
    					var month=date.getMonth()+1;
    					var day=date.getDate();
    					var hour=date.getHours();
    					var minute=date.getMinutes();
    					var second=date.getSeconds();
    					html+="发表时间:"+year+"年"+month+"月"+day+"日"+hour+":"+minute+":"+second;
    					//document.write("<br>");
    					txt3.innerHTML +=html+"<hr>";
    				}
    				document.getElementById("txt2").style.display="none";
    				
    			}
    		</script>
    	</head>
    	
    	<body >
    		<div class="content">
    			<div id="txt1">
    				<input type="button" id="btn1" value="我要发帖" onclick="fatei()">
    			</div>
    			<div id="txt2">
    				
    				<input type="text" name="name" placeholder="请输入标题(1-50个字符)" id="biaoti"><br><br>
    				所属板块:
    				<select id="selec">
    					<option>新课来了</option>
    					<option>98K</option>
    					<option>M24</option>
    					<option>安其拉</option>
    					<option>鲁班七号</option>
    					<option>赵云</option>
    				</select><br><br>
    				<textarea rows="10" cols="60" id="txtara">
    				</textarea>
    				<br><br>
    				<input type="button" id="btn2" value="发布" onclick="fabu()">
    			</div>
    			<div id="txt3">
    			
    			</div>
    		</div>
    	</body>
    </html>
    

    总体效果图
    随机头像

    随机头像
    随机头像
    随机头像

    展开全文
  • JavaScript发帖案例

    千次阅读 2018-03-11 14:17:23
    "text/javascript" > window.onload= function () { //页面全部加载完成后,执行 var obtn=document.getElementById( "btn" ); //我要发帖的按钮 var opost=document.getElementById( "post" ); //输入面板...

    这里写图片描述

    <!DOCTYPE html>
    <html>
    <head lang="en">
     <meta charset="UTF-8">
     <title>论坛发贴</title>
     <link href="css/bbs.css" rel="stylesheet">
    <style type="text/css">
    /*新增贴列表样式*/
    #content ul li{ height:50px; line-height:50px; padding:20px 0px;}
    #content ul li img{ width:50px; height:50px; float:left; border-radius:50px;}
    #content ul li h1{ width:540px; height:25px; line-height:25px; float:left; font-size:16px; padding-left:10px;}
    #content ul li p{ width:540px;float:left; height:25px;line-height:25px;  padding-left:10px;}
    </style>
    </head>
    <body>
    <div class="bbs">
        <header id="btn"><span>我要发帖</span></header>
        <section>
            <ul></ul>
        </section>
        <div class="post" id="post" style="display:none">
            <input class="title" id="title" placeholder="请输入标题(1-50个字符)">
            所属版块:<select><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
            <textarea class="content"></textarea>
            <input class="submit" id="submit" value="发布">
        </div>
    <div  id="content" style="display:none"><ul></ul></div>
    </div>
    <script type="text/javascript">
    window.onload=function(){ //页面全部加载完成后,执行
    var obtn=document.getElementById("btn");//我要发帖的按钮
    var opost=document.getElementById("post");//输入面板
    var osubmit=document.getElementById("submit");//发布的按钮
    var ocontent=document.getElementById("content");//输出列表内容
    var tid;//定时器ID
    var flag=false;//用于标记鼠标是否放在输入面板上
    //鼠标放到按钮上时
    obtn.onmouseover=function(){
    opost.style.display="block";
    }
    //鼠标离开按钮之后
    obtn.onmouseout=function(){
    timeDelay();
    }
    //鼠标放到输入面板上
    opost.onmouseover=function(){
    flag=true;
    timeDelay(); 
    }
    //鼠标离开输入面板后
    opost.onmouseout=function(){
    timeDelay();
    }
    //有使用键盘的情况下
    document.onkeydown=function(event){
    flag=true;
    timeDelay(); 
    }
    //时间延迟的方法
    function timeDelay(){
        if(flag==false){
            tid=setTimeout(function(){
            opost.style.display="none";
            },5000);//时间延迟5秒
        }
        if(flag==true){
            opost.style.display="block";
            if(tid != "undefined"){
            clearTimeout(tid); 
            }
        }
    }
    var date=new Date();//获取系统时间
    //年
    var year=date.getFullYear();
    //月
    var month=date.getMonth()+1;
    //日
    var day=date.getDate();
    //时
    var hour=date.getHours();
    //分
    var minute=date.getMinutes();
    //秒
    var second=date.getSeconds();
    //时间拼接
    var time=year+"-"+addzero(month)+"-"+addzero(day)+" "+addzero(hour)+":"+addzero(minute)+":"+addzero(second)
    //时间补0函数
    function addzero(num){
        if(num<10){
            return "0"+num;
        }else{
            return num;
        }
    }
    
    //点击发布,提交按钮
    osubmit.onclick=function(){
    var tou=new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");
    flag=false;
    opost.style.display="none";
    ocontent.style.display="block";
    
    //1.创建li节点
    var li=document.createElement("li");
    //2.创建img节点
    var img=document.createElement("img");
    var r=parseInt(Math.random()*tou.length);//随机获取图片下标
    img.src="images/"+tou[r];
    li.appendChild(img); //将img追加到li末尾
    //3.创建h1节点
    var h1=document.createElement("h1");
    var title=document.getElementById("title").value;//获取标题内容
    var bankuai=document.getElementsByTagName("select");
    h1.innerHTML=title;
    li.appendChild(h1); //将h1追加到li末尾
    //4.创建p节点
    var p=document.createElement("p");
    p.innerHTML="版块:"+bankuai[0].value+"    发表时间:"+time;
    p.style.fontSize="12px";
    p.style.color="#999";
    li.appendChild(p); //将p追加到li末尾
    li.style.borderBottom="1px dashed #dcdcdc";
    //5.将创建好的li节点插入div#content下的ul中第一位
    ocontent.firstElementChild.insertBefore(li,ocontent.firstElementChild.firstChild);
    
    }//点击发布结束
    }//window.onload结束
    
    </script>
    </body>
    </html>
    
    展开全文
  • 这其实是在表单元素上稍微加了一点JavaScript代码,具体实现方法请查看代码。 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/js-checkbox-nm-login-submit-codes/ 具体代码如下: <...
  • 实现原理 功能1.删除状态 用removeChild()方法即可 功能2.最上面的点赞 判断文字的内容是否为赞,做相应操作改变存放赞数量的容器文本内容 功能3.回复评论 创建一个新的评论添加到评论列表里 功能4.回复里的点赞 ...
  • vue.js如何实现ajax 内容精选换一换如果您希望使用第三方库文件,而当前系统中不存在该库,您可以通过上传,新增该JS/CSS库,并在页面中设计并使用该库,实现引入第三方库的功能。本节将介绍如何引入并使用第三方库...
  • Atitit 发帖实现(3 )---usrQBN023 js提交ajax内容到后端规范与标准化   大段内容务必要替换转义换行符号1 提交务必使用utf编码,否则解码后的可能缺失,是web server的bug应该。Resin4.0.221   大段内容...
  • 初学Python有了一段时间,寒假里又看了一些Web编程方面的知识,就写了一个实现bbs自动登录和发帖的Python脚本 由于本人学校BBS站首页使用js加载,貌似通过首页登录不大可行,然后就分析表单,发现是通过POST一些data...
  • 新版网页版微博发帖所用的富文本编辑器是怎么实现的 新版网页版微博发帖所用的富文本编辑器是怎么实现的 新版网页版微博发帖所用的富文本编辑器是怎么实现
  • 原生js实现飞机大战小游戏 废话不多说我们直接开始吧 首先是最基础的html结构,三个小飞机图来表示己方剩余的血量,剩下的css样式自己设置即可。 设置成这样就可以了 //先创建一个游戏引擎 var Engine = { //刚...
  • Vue.js实现文章评论和回复评论功能

    万次阅读 多人点赞 2016-12-19 20:49:25
    Vue.js实现文章评论和回复评论功能
  • JavaScript实现论坛发贴等功能

    千次阅读 多人点赞 2019-10-13 18:16:19
    "JSTest4.css" / > < / head > < body > < div class = "bbs" > < header > < span onclick = "iWantPost()" > 我要发帖 < / span > < / header > < section > < ul > < ! -- < li > < ...
  • 写完前面两篇以后,就打算写个百度贴吧自动发帖程序,结果研究了好久,发现比预想的难太多了。。。一开始打算用requests模拟登陆,用F12抓了包,看post请求参数:参数也特么太多了,简直丧心病狂,变化参数有token、...
  • script type="text/javascript" src="tanchish2.js"></script> <bgsound id="bgs"src="" loop=1> <audio src=""></audio> </body> </html> 通关部分js代码如下function...
  • 最近简单地尝试用Javascript写了一个刷贴的脚本,原理就是Javascript注入,对表单的DOM对象进行操作,比较简单,这里姑且做个记录。
  • js实现页面自动跳转

    千次阅读 2017-11-12 02:23:00
    JS,在 <head> </head> 标签里头添加如下JS:   JScript 代码 复制  window.onload=function()   {   setInterval("redirect();",3000);   } function redirect()   {   window.location.href=...
  • function getdate (data) { // 当前时间标准化 let now = new Date() const nowday = now.getDate() const nowhour = now.getHours() const nowminute = now.getMinutes() const nowsecond = now.getSeconds()...
  • 请看这里: JS 实现回帖时间的中文显示 秒 分钟 天 之前显示
  • 思路: 1.有一个textarea框,宽600高400,边框是1像素实线黑色,textarea框不允许用户随意缩放 2.
  • js ftp上传文件到服务器上 内容精选换一换用户在MRS Manager界面配置监控指标转储后,转储失败时产生该告警。转储成功后,告警恢复。监控指标转储失败会影响上层管理系统无法获取到MRS Manager系统的监控指标。无法...
  • js实现上传图片 文字 (全步骤)

    千次阅读 2018-10-12 10:33:01
    用jq+jqForm实现 以下是代码: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 5,443
精华内容 2,177
关键字:

js实现发帖