發表文章

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;

jackie 網頁設計 RWD 響應式網頁 網頁設計 ok.jackie

圖片
hello!我是一名網頁設計師,這是我的作品集網站 https://ok.jackie.com.tw/ ,若有案子發包也歡迎找我合作唷! 聯絡方式: jackietsai.design@gmail.com / 或在我的官網上留言 jackie的作品集網站: https://ok.jackie.com.tw/

用 CSS 讓過長溢出的字省略變 ...

用 CSS 讓過長溢出的字省略變 ... CSS div { /*紅色三個設定都要有*/ overflow : hidden; text-overflow : ellipsis; white-space : nowrap; width : 240px; } 參考資料: https://blog.xuite.net/vexed/tech/22596484-%E7%94%A8+CSS+%E8%AE%93%E9%81%8E%E9%95%B7%E6%BA%A2%E5%87%BA%E7%9A%84%E5%AD%97%E7%9C%81%E7%95%A5%E8%AE%8A+?fbclid=IwAR0GdiY8UYqsHD6bf_Lq7u-5nPFjBih-ZbxVSiM0ZpaFY8dtIA2e5Rxvzxk

js替數字左邊自動補0

//左邊自動補0 function paddingLeft(str,lenght){ if(str.length >= lenght) return str; else return paddingLeft("0" +str,lenght); }

刪除電話號碼樣式

<meta name = "format-detection" content = "telephone=no" > 刪除電話號碼樣式在header添加上面程式碼

埋GA

<script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-145700324-1'); </script> <a href="#" class="btn-join pull-center" data-toggle="modal" data-target="#butnInfo" onclick="GAEvent('公會長-報名公會長點擊');"></a> function GAEvent(label, category, action){ if(category==undefined){ category='Button'; } if(action==undefined){ action='Action'; } // console.log('label:', label, ' category:', category, ' action:', action); gtag('event', action, {   'event_category' : category,   'event_label' : label     }); }

javascript比對日期時間

var currDate = Date.parse(new Date()).valueOf(); //今天時間 var starttime = '2019/9/27 14:09:00'; //設定開始時間格式 var startDate = Date.parse(starttime).valueOf(); var endtime = '2019/10/17 23:59:00'; //設定結束時間格式 var endDate = Date.parse(endtime).valueOf(); if(currDate>startDate){//今天大於開始日             if(currDate>endDate){//今天大於結束日                 //投票已結束                 $('#voteOff').modal('show');             }else{                 //確認投票                 $('#butnSure'+this_butnSure).modal('show');             }         }else{             //投票尚未開啟             $('#voteNone').modal('show'); } p.s 凌晨12點為: 上午12:00:00

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);     });

html錨點

html錨點說明▼ https://kknews.cc/zh-tw/tech/ena88ry.html

Mysqli query LIKE

$search_text = '%'.$_GET['search_text'].'%'; $rs = $mysqli->query("SELECT * FROM `user` WHERE $search_category LIKE '$search_text' "); search 用百分比把物件包起來,再到LIKE 用引號 ' ' 把變數包起來。

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

Bootstrap Modal 禁用空白處點擊關閉

模态框(Modal)是覆盖在父窗体上的子窗体。通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等。bootstrap的模态框在默认情况下,点击其他空白区域(通常是遮罩层),模态框会被关闭,那么以下方法就是禁止点击其他区域关闭模态框。 $( '#myModal').modal({backdrop:  'static', keyboard:  false}); backdrop:static时,空白处不关闭. keyboard:false时,esc键盘不关闭. 上述代码也用于打开模态框。 也可以使用以下方法: <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">   <div class="modal-dialog custom-dialog succ-dialog">     <div class="modal-content">       <div class="modal-header">         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>         <h4>提示信息</h4>       </div>       <div...