簡單模擬評論效果

阿新 • • 發佈：2018-09-05

click element gin 分享圖片 black info 函數 parse border

簡單模擬評論效果

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>模擬評論</title>
        <style>
            #div1{width: 400px; height: 200px; background-color: gray; text-align: center; margin: 0 auto;}
            #div2{width: 400px; height: 600px; background 
-color: orange; margin: 0 auto;}
            #div2 div{width: 400px; height: 20px; text-align: center; line-height: 20px; font-size: 16px; border-bottom: 1px dashed black; margin-top: 2px}
            #input1{width: 300px; height: 30px; margin-top: 50px; font-size: 18px}
            #div1 button{width: 100px; height: 30px; font 
-size: 18px}
        </style>
        <script>
            window.onload = function(){
                //獲取元素節點
                var oDiv1 = document.getElementById(‘div1‘);
                var oDiv2 = document.getElementById(‘div2‘);
                var oInput = document.getElementById(‘input1‘);

                 
//獲取三個按鈕
                var aBtns = oDiv1.getElementsByTagName(‘button‘);

                //增加
                aBtns[0].onclick = function(){
                    var node = document.createElement(‘div‘);
                    node.innerHTML = oInput.value;//節點內容等於input輸入框裏的內容
                    node.style.backgroundColor = randomColor();//添加一個隨機顏色
                    oDiv2.appendChild(node);//把節點node插入到oDiv2裏最後
                }

                //刪除
                aBtns[1].onclick = function(){
                    oDiv2.removeChild(oDiv2.lastElementChild);//在oDiv2元素節點裏移除最後一個oDiv節點裏的最後一個子節點
                }

                //拷貝
                aBtns[2].onclick = function(){
                    //拷貝最後一條記錄
                    var node = oDiv2.lastElementChild.cloneNode(true);//傳入參數 true 說明完全克隆拷貝

                    oDiv2.appendChild(node);//把節點node插入到oDiv2裏最後
                }
            }
        
            
            
            /*-------------封裝隨機顏色函數--------*/
            
            
                function randomColor(){
                    var str = "rgba(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ",1)";
                    return str;
                }            
            
            
            
            
            /*-------------封裝隨機顏色函數end--------*/
            
            
        </script>
    </head>
    <body>
        <div id = ‘div1‘>
            <input type="text" placeholder="請輸入文本" id = ‘input1‘ /><br/>
            <button>增加</button>
            <button>刪除</button>
            <button>拷貝</button>
        </div>
        <div id = ‘div2‘>
            <!-- <div>ssss</div>
            <div>ssdadad</div> -->
        </div>
    </body>
</html>

瀏覽器效果：

技術分享圖片

簡單模擬評論效果

click element gin 分享圖片 black info 函數 parse border 簡單模擬評論效果 <!DOCTYPE html> <html lang="en"> <head> <met

jquery簡單幾句代碼實現星級評論效果

簡單的 play ctype 文件的 this url enter oct 引用文件我前面博客寫過一個星級評論的原生寫法，非常復雜，今天就通過jquery來寫一個簡單的星級點亮的效果，來看代碼： <!DOCTYPE html> <html lang="

寫了一個簡單輪播效果實現

char line query span size html ef6 ava top <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

php 使用curl 進行簡單模擬提交表單

8.0 bin field this class chrom 提交表單 bsp alt //初始化curl $ch = curl_init(); $url = ‘xxx‘; $option = [ CURLOPT_URL => $url, CURLO

PHP實現簡單的評論與回復功能還有刪除信息

技術分享 mit [0 ech ges get values width 錯誤我們首先先看一下功能上面黑色的是評論的下面紅色的字體是回復的再來看看怎麽實現的 1.發布評論 <form action="pinglunchili.php" method="po

python簡單模擬：把樹存儲在數據表中

數據庫 __main__ __name__ com clas list lis 數據表 name 在數據庫中建立一個表，有Id, fatherId, value 三個字段，就可以存儲一個樹。如何把該表中的數據以樹的形式呈現出來，下面小弟用python簡單模擬一下。初學p

iOS 實現簡單的毛玻璃效果

rec 毛玻璃效果實現簡單 ges 導航欄 view設置 with 技術簡單最近在整理導航欄的漸隱漸現效果，整理過程中偶然學會了圖片的毛玻璃效果實現，很簡單，不多說了，先上圖看看效果對比，這是原圖，這是加了效果後的，創建圖片的代碼就不上了，下面看下添加效果的代碼

jQuery效果 - 簡單的手風琴效果

lock siblings lin 不同反饋 col box spl 的語音實現效果如圖所示： html結構： <div class="item_box box10"> <div class="item_box_wp">

js網站輪播圖怎麽做如何做？雞哥教你簡單制作效果炫酷

多人 tle 哪裏 round 下載簡單的文件但是 cell 日了狗啦，剛剛雞哥辛苦碼了那麽多字全丟了又要重新寫，這是第二遍寫了...今天雞哥給小白寫個不需要寫js原生代碼，只需要幾個插件和一段通俗易懂得jquery代碼就能搞定的輪播圖，當然js原生代碼寫著也不算很繁

多線程練習（簡單模擬火車站多窗口同時售票）

火車 thread art this 模擬練習 lis span 對象模擬火車站售票窗口同時售票 public class xianchenglianxi { public static void main(String arg[]){

UWP：使用Behavior實現FlipView簡單縮放效果

spl send 應該 code load isp start 個性 source 先上效果圖首先安裝Behavior SDK：在Nuget中搜索安裝 Microsoft.Xaml.Behaviors.Uwp.Managed 。然後新建類，AnimationFlipV

使用css3制作簡單的loading效果

-o frame mov height document load charset key bottom <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">

大魚吃小魚（簡單模擬）

一個入棧 nco http spa println code tar pre 題目：http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1289 從左往右將數字壓入棧裏（想象成一個水平向右的棧），如果

HihoCoder1052基因工程（簡單模擬題）

修改方法 ace lib stream 方法 div 最小 mes 大寫描述小Hi和小Ho正在進行一項基因工程實驗。他們要修改一段長度為N的DNA序列，使得這段DNA上最前面的K個堿基組成的序列與最後面的K個堿基組成的序列完全一致。例如對於序列"ATCGA

7-18 銀行業務隊列簡單模擬（25 分）

時間間隔 int fin scanf 就是偶數 static log 辦理設某銀行有A、B兩個業務窗口，且處理業務的速度不一樣，其中A窗口處理速度是B窗口的2倍 —— 即當A窗口每處理完2個顧客時，B窗口處理完1個顧客。給定到達銀行的顧客序列，請按業務完成的順序輸出

Java簡單模擬Android中Handler-Message機制

就是示例代碼 pri 技術分享 android ble [] handle @override 在Android中主線程與子線程的通信十分重要，Google工程師為我們提供了Handler-Message機制來解決他們之間的交互問題。今天，我們就來簡單理解Handler-

27.jquery模擬滾動效果

頁面 light 一次 win 定時 request slide asc created <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"

spring中的工廠原理簡單模擬

spring中的工廠原理簡單模擬 package service; import dao.User;import factory.Factory; public class Test {// private static User user = new UserImpl();//耦合度太高 private

簡單模擬jQuery創建對象的方法，以及封裝一個js動畫框架

動畫框架 dst nts 創建 pro 以及原型 time parse 今天無事點開了N年未點開的慕課網，看了一個js動畫框架的視頻，心血來潮用jQuery的方法封裝了一下，雖然不如jQuery，但是還是有點點所獲。什麽都不說，直接上代碼: /** * 這是框架的

Windows程序設計之簡單的動畫效果（小球彈一彈）

Windows程序設計之小球彈一彈構造一個矩形位圖，位圖內有一個帶有陰影和紫色間隙的小球，程序使用定時器來控制小球的動作，實際上是每當接收到定時器消息時將位圖通過BitBlt函數復制到客戶區，每當小球碰撞到客戶區上下左右四邊時就反彈回來。下面代碼有本人的理解註釋可供參考，本人才疏學淺，不妥請見諒。效果圖如下：

簡單模擬評論效果

相關推薦