JS 單擊複製，複製後變為已複製

標籤：style   blog   http   color   os   io   ar   cti   

這段代碼是在新浪網站上找到的。先放出CSS代碼：

.focus a.arrow,.card_con4 li i,.cm1_menu_wrap a.cm1_menu_box,.cm1_img span,.cm1_item1 a{ background: url(http://www.sinaimg.cn/gm/xsk/gaiban/card_sprite.png) no-repeat;}.cm1_item_wrap{ padding-top: 9px; margin-top: 20px; position: relative;zoom:1;}.cm1_item_wrap .toparrow{ width: 0; height: 0; border-color: #fff #fff #f0f0f0; border-style: solid; border-width: 0 9px 9px; position: absolute; top: 0px; overflow: hidden;}.tarrl1{ left:65px;}.tarrl2{ left:193px;}.cm1_item_wrap .cm1_item{ width: 545px; padding: 18px 25px; background-color: #f0f0f0; color: #666; position: relative;}.cm1_item .copy_wrap{ margin-bottom: 10px;}.cm1_item .copy_box{ width: 310px; height: 30px; line-height: 30px; border: 1px solid #e3e3e3; background-color: #fff; padding-left: 10px; overflow: hidden; float: left;}.cm1_item p.cm1_p{ margin-bottom: 18px;}.cm1_item p.cm1_p1{ width: 370px; line-height: 32px; padding: 24px 0 24px 140px; }.cm1_item img.sorry{ position: absolute; left: 78px; top: 27px;}.cm1_item .copy_box input{ width: 240px; height: 30px; line-height: 30px; border: none; background: none; margin-left: 22px; vertical-align: middle;}.cm1_item input.copy_btn{ float: left; width: 87px; height: 32px; border: 1px solid #e3e3e3; margin-left: 10px; text-align: center; line-height: 30px; cursor: pointer;vertical-align: middle;}.cm1_item input.copy_btn1{ background-color: #fff;}.cm1_item input.copy_btn2{ background-color: #474747; color: #fff;}.cm1_item_wx{ width: 100px; position: absolute; right: 25px; top: 20px;}.cm1_item_wx p{ padding: 5px; line-height: 24px;}

 

然後放出html代碼：

<div class="cm1_item">                            <p class="cm1_p">恭喜您獲得禮包，<span class="red">1小時</span>後將進入淘號庫,請儘快啟用</p>                            <div class="copy_wrap clear" id="kahao">                                <div class="copy_box">                                    卡號：                                    <input type="text" name="" value="" readonly/>                                </div>                                <input type="button" name="" value="複製" class="copy_btn copy_btn1" onmousemove="copythis(‘kahao123‘,$(‘#kahao .copy_box input‘).val())" id="kahao123" />                                <!-- 複製完成後切換為 已複製 -->                                <input type="button" name="" value="已複製" class="copy_btn copy_btn2" style="display:none;" />                            </div>                            <div class="copy_wrap clear" id="kami" style="display:none">                                <div class="copy_box">                                    密碼：                                    <input type="text" name="" value="" readonly/>                                </div>                                <input type="button" name="" value="複製" class="copy_btn copy_btn1" onmousemove="copythis(‘kami123‘,$(‘#kami  .copy_box input‘).val())" id="kami123" />                                <!-- 複製完成後切換為 已複製 -->                                <input type="button" name="" value="已複製" class="copy_btn copy_btn2" style="display:none;" />                            </div>                        </div>

 

最後是我們的JS代碼：

        function copythis(id,val){            ZeroClipboard.setMoviePath("http://ka.sina.com.cn/ka/js/ZeroClipboard10.swf");            var clip = new ZeroClipboard.Client();                 clip.setHandCursor(true);                     clip.setText(val);              clip.glue(id);            //這個是複製成功後的提示              clip.addEventListener( "complete", function(){                  alert(‘複製成功！‘);                 $(‘#‘ + id).hide().next(‘.copy_btn2‘).show();                clip.hide();            });         }