jQuery發帖案例

阿新 • • 發佈：2019-01-18

這裡寫圖片描述

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>論壇列表</title>
    <link href="css/bbs.css" rel="stylesheet">
    <style type="text/css">
    .bbsList{width: 600px;}
    .bbsList ul li{width: 600px;height:80px; border-bottom:1px #CCCCCC 
 dashed; color:#666; font-size:12px;}
    .bbsList ul li img{ width:50px; height:50px; float:left; border-radius:50px; margin:15px 0px;}
    .bbsList ul li h1{width: 530px; padding-left:20px; color:#000; padding-top:15px; font-size:20px; height:30px;line-height:30px;  float:left;}
    .bbsList ul li p{width: 530 
px; padding-left:20px; height:20px; line-height:20px; float:left;}
    .bbsList ul li p span{ margin-left:20px;}
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        //單擊我要發帖
        var 
 i=0;
        $("header").click(function(){
            if(i>0){
                $(".post").hide();
                i=0;
            }else{
                $(".post").show(); 
                i=1;
            }
        });
        //點擊發布
        $(".btn").click(function(){
            //1.建立li
            var $li=$("<li></li>");
            //2.建立img
            var tou=new Array("tou01.jpg","tou02.jpg","tou03.jpg","tou04.jpg");
            var r=parseInt(Math.random()*tou.length);//隨機數0 1 2 3
            var $img=$("<img src=images/"+tou[r]+" />");
            $li.append($img);
            //3.建立h1
            var $h1=$("<h1>"+$(".title").val()+"</h1>");
            $li.append($h1);
            //4.建立p
            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+"-"+month+"-"+day+" "+hour+":"+minute+":"+second; 
            //版塊資訊+釋出時間
            var $p=$("<p>"+$("select").val()+"<span>釋出時間："+time+"</span></p>");
            $li.append($p);
            $(".bbsList ul").prepend($li);//插入到前面
            $(".post").hide();
        });


    });
    </script>
</head>
<body>
<div class="bbs">
    <header><span>我要發帖</span></header>
    <section>
        <ul></ul>
    </section>
    <div class="post">
        <input class="title" placeholder="請輸入標題（1-50個字元）">
        所屬版塊：<select><option>請選擇版塊</option><option>電子書籍</option><option>新課來了</option><option>新手報到</option><option>職業規劃</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="釋出">
    </div>
    <div class="bbsList"><ul></ul></div>
</div>

</body>
</html>

jQuery發帖案例

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> &l

jQuery實際案例⑥——圖片跟隨鼠標、五角星評分案例

jquery 方法評分分區 ges jquer 獲取移動 query 一、圖片跟隨鼠標移動　　1、要求：鼠標移動到哪，圖片就要跟到哪　　2、用到的事件：首先監聽鼠標：$(document).mousemove(function(event){ }); //此時可以

jQuery基礎--案例練習

分享 meta 取消 -h mar utf-8 根據 .com 輸入 1.端口案例改進，操作更靈活 <head> <meta charset="UTF-8"> <title>Title</title>

jQuery（案例實現）

一、jQuery概述 1、什麼是jQuery？ jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript程式碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少

jQuery最後案例：商標展示

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>案例-品牌選擇</title>

spring+springmvc+mybatis+jQuery easyUI案例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/cor

jQuery開發案例(筆記)

由於現在接手的專案需要用到jQuery,而身為jQuery小白的我之前略微的接觸了一點,所以只能做到區域性看得懂,卻寫不出.這使我開發效率大大降低,工欲善其事必先利其器!,於是我走上了jQuery的探索之路.下面是我這四天以來,邊學習邊實操的程式碼,分享給大家: 目錄結

JQuery 基礎案例（3）—— jQuery實現輪播圖無縫（無回滾）滾動切換效果

輪播圖無縫滾動切換原理基本框架 <div class="slide">  <ul class="slide-nav"> <li class="activ

JQuery小案例

1.滑鼠移動到數字按鈕上後，圖片從有向左切入：示例程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title&

jQuery——小案例：點選圖片放大縮小

需求： HTML中有三張圖片：如果圖片處於“大”狀態，則點選圖片可以縮小。如果圖片處於“小”狀態，則點選圖片可以放大。程式碼： <!DOCTYPE html> <html>

JavaScript發帖案例

window.onload=function(){ //頁面全部載入完成後，執行 var obtn=document.getElementById("btn");//我要發帖的按鈕 var opost=document.getElementById("post");//輸入面板 var osubmit=do

jquery jsonp 案例

//公共js類 var ajax_jsonp = { baseurl: "", send: function(data, complate) { /** * data : {"opp": "main", "pageType

JQuery基礎以及5個小案例

進行 change 遍歷 selectall 獲得 idea 獲取設置 html 1.JQ完成定時彈出廣告　　步驟分析創建html文檔在頁面中創建一個廣告部分的div,設置div隱藏設置定時操作,1秒執行一個顯示的方法設置定時操作.1秒執行一個隱藏方法 /

jQuery簡單的省市區縣三級聯動案例

結構 ted change mage jquer ges ict 第一個 lin 簡單的省市區三級聯動，適合初學者入門學習的案例目錄結構如下：三級聯動.html 跟 JS文件夾是同個級別效果圖如下： HTML代碼： 1 <style type="te

<jQuery> 七. 手風琴案例

調用事件 htm rip function div bsp body rap <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

第15章WEB15-AJAX和JQuery案例篇

AJAX和JQuery案例篇 javaweb 今日任務? 使用AJAX完成用戶名的異步校驗? 使用JQuery完成用戶名異步校驗? 使用JQuery完成商品信息模糊顯示? 使用JQuery完成省市聯動效果返回XML? 使用JQuery完成省市聯動效果返回JSON教學導航教學目標了解AJAX的基本使用掌

JQuery案例一：實現表格隔行換色

body ble () ++ doc cti seo head 姓名 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t

JQuery案例二：實現全選、全不選和反選

lap lsp enter scrip ttr on() class cells span <!DOCTYPE html> <html> <head> <meta charset="UTF-8">

jQuery--文檔處理案例

http nal 左右移動技術 option itl button bsp right 需求　　　如上圖，實現左右兩邊的選擇菜單可以左右移動，‘>’按鈕一次只能移動被選中的一個菜單，‘>>’按鈕一次移動所有被選擇的菜單，‘>>>’按

JQ外掛案例-基於jquery和canvas的調色盤

最近在研究canvas，想要弄一個canvas的所見所得工具。在研究的過程中，猛然發現調色盤不太好實現。通過多方面研究及翻閱文獻，發現網上對於調色盤的實現大都是產生一個色塊列表而已。這種方式醜爆了好吧，而且選顏色麻煩死了，綠色還分那麼多個塊，怎麼能好好選到自己心儀的顏色呢

jQuery發帖案例

相關推薦