發表文章

目前顯示的是有「jquery」標籤的文章

「jquery.timers」jquery定時器

有時settimout跟setinterval會發生越來越快問題,或是設定多組settimout跟setinterva,時間間隔會錯亂。我推薦使用jquery.timers,定時器能正常的每秒執行一次。 /************************************************************* * everyTime(時間間隔, [計時器名稱], 函式名稱, [次數限制], [等待函式程序完成]) *************************************************************/ //每1秒執行函式test() function test(){ //do something... } $('body').everyTime('1s',test); //每1秒執行 $('body').everyTime('1s',function(){ //do something... }); //每1秒執行,並命名計時器名稱為A $('body').everyTime('1s','A',function(){ //do something... }); //每20秒執行,最多5次,並命名計時器名稱為B $('body').everyTime('2das','B',function(){ //do something... },5); //每20秒執行,無限次,並命名計時器名稱為C //若時間間隔抵到,但函式程序仍未完成則需等待執行函式完成後再繼續計時 $('body').everyTime('2das','C',function(){ //執行一個會超過20秒以上的程式 },0,true); /*********************************************************** * oneTime(時間間隔, [計時器名稱], 呼叫的函式) ***************************************...

jquery翻卡牌小遊戲

寫了一個翻卡牌小遊戲的原型,來試試看吧~ ▼網址: https://www.ok.jackie.com.tw/source/webgame-front-end/card_game/index.html

使陣列裡的數值隨機重新排序

.▼放置全域 var new_arr = [];//定義一個新陣列,作為產生亂數時存放用 . . . . . ▼function內 var arr = [1,2,3,4,1,2,3,4,1,2,3,4];       arr.sort(randomSort);        new_arr.push(arr);//塞入陣列裡 . . . . .▼取得隨機號碼給sort()重新排列 function randomSort(a, b) { return Math.random() > 0.5 ? -1 : 1; } . . . . .▼清空陣列 new_arr.length = 0;

boostrap判斷當前slider的index

$('#carousel-id').on('slide.bs.carousel', function (e) {       var active = $(e.target).find('.carousel-inner > .item.active');       var from = active.index();       var next = $(e.relatedTarget);       var to = next.index();       to=to+1;       // console.log(from + ' => ' + to);     });

PHP+ajax+jquery猜謎遊戲

寫了一個 PHP+ajax+jquery猜謎遊戲。來猜謎吧~ http://towertest2019.000webhostapp.com/

fabric.js 拍貼機

使用fabric.js+php所製作的拍貼機,使用者可合成相片並下載。 PC版: https://fgophoto12.000webhostapp.com/ 手機版: https://fgophoto12.000webhostapp.com/mobile.php

jquery 射擊遊戲

寫了一個jquery射擊遊戲原型,玩玩看巴。 http://jackietsaitsai.000webhostapp.com/source/webgame-front-end/shoot_game/index.html

boostrap 判斷目前第幾個(index)

var idx = $ ( '.carousel-inner li.active' ). index (); <script> $(function(){ $('#myCarousel').on('slide.bs.carousel', function () { var idx = $('.carousel-inner div.active').index(); alert(idx+"当调用 slide 实例方法时立即触发该事件。"); }); }); </script>

fabric.js 教學 (隨便紀錄)

範例網址: https://fgophoto12.000webhostapp.com 1.創建一個canvas畫板並加上背圖 //preserveObjectStacking: true - 選中的物件不會置頂 var canvas = new fabric.Canvas('draw',{ backgroundImage: "assets/img/fgo-card.jpg",preserveObjectStacking: true});//創建一個canvas畫板並加上背圖 2.在畫布新增一個圖片 fabric.Image.fromURL('assets/img/patten/hreat1.png', function(img) {     img.scale(1).set({       left: 150,       top: 150,       angle: 0,       lockRotation: true,//旋轉控制失效       type:'st'//可用來替物件命名     });       canvas.add(img); }); 3.下載canvas圖片(搭配php) $('.download').click(function(){ //取消选择画布上的一个或多个对象 // canvas.deactivateAll().renderAll(); var fullQuality = canvas.toDataURL("image/png").replace("image/png","image/octet-stream"); var type = 'png';//图片导出为 png 格式 // console.log(fullQuality); var saveFile = function(data, filename){//這段一定要放前面     var save_link...

FACEBOOK 自訂分享圖片及內容至塗鴉牆

1.先至  https://developers.facebook.com  申請APP應用程式,並設定好基本資料再按開啟鈕。 2.引入SDK          window.fbAsyncInit = function() {     FB.init({       appId      : '你的APPID',       xfbml      : true,       version    : 'v3.2'     });     FB.AppEvents.logPageView();   };   (function(d, s, id){      var js, fjs = d.getElementsByTagName(s)[0];      if (d.getElementById(id)) {return;}      js = d.createElement(s); js.id = id;      js.src = "https://connect.facebook.net/en_US/sdk.js";      fjs.parentNode.insertBefore(js, fjs);    }(document, 'script', 'facebook-jssdk')); 3.自訂分享內容程式碼 var img = "https://fgophoto12.000webhostapp.com/"+data; var desc = "your caption here"; var link = 'https://fgophoto12.000webhostapp.com'; // Open F...

用 jQuery 控制 button 的 enabled/disabled

$ ( "#delete" ) . attr ( "disabled" , false ) ; $ ( "#delete" ) . attr ( "disabled" , true ) ; 玩家點了按鈕後 要先disable按鈕,完成ajex後再解開 參考網址: https://sam.liho.tw/2009/06/03/%E7%94%A8-jquery-%E6%8E%A7%E5%88%B6-button-%E7%9A%84-enableddisabled-demo/

ul li 點擊不到子層,如何解決冒泡事件

在jquery中,已经帮助我们实现了事件委托,并且帮我们解决掉了这些坑。我们只需要按照一定语法使用即可,而我们不用再自己去进行条件判断,比如我们要给所有的li.item元素绑定事件,写法如下 // on中的第二参数就是我们的目标元素的选择器 $ ( 'ul.container' ) . on ( 'click' , 'li.item' , function ( event ) {      // dosomething } ) 參考網址: http://web.jobbole.com/86584/

jQuery – 在 header 修改,解決跨網域 JSON、JSONP 的方法

參考網址: http://jsnwork.kiiuo.com/archives/2510/jquery-%E5%9C%A8-header-%E4%BF%AE%E6%94%B9%EF%BC%8C%E8%A7%A3%E6%B1%BA%E8%B7%A8%E7%B6%B2%E5%9F%9F-json%E3%80%81jsonp-%E7%9A%84%E6%96%B9%E6%B3%95/

jquery 判斷元素是否隱藏

Jquery 通過判斷元素display屬性狀態值來實現"判斷當前操作元素是否顯示還是隱藏",主要使用jquery的基本選取器:visible或:hidden方法。 if ($( '.test' ).is( ':visible' )){ $( '.test' ).text( 'div被隱藏了!' ); } else { $( '.test' ).text( 'div顯示' ); } 參考文章: https://blog.csdn.net/sinolzeng/article/details/40112973

jquery 找父層、找子層

找父元素: parent() 方法: 找第一個父元素 ,例:「 .parent(".selected")」。 ◆  http://www.w3school.com.cn/jquery/traversing_parent.ASP parents() 方法: 往上找父層class,例:「 .parents('.item-ii')」。 ◆  http://www.w3school.com.cn/jquery/traversing_parents.asp closest() 方法: 向上找父層的第一個節點。 ◆  http://www.w3school.com.cn/jquery/traversing_closest.asp 找子元素: find() 方法: 向下找子元素 ,例:「 .find("span")」。 ◆  http://www.w3school.com.cn/jquery/traversing_find.ASP children() 方法: 向下找子元素的第一個節點。 ,例:「 .children(".selected")」。 ◆  http://www.w3school.com.cn/jquery/traversing_children.asp