PIXNET Logo登入

Bug倉庫 // 程式日記

跳到主文

Bug倉庫 // 程式日記已經搬家到 https://bugswarehouse.blogspot.tw/ 了喔

部落格全站分類：數位生活

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 9月 14 週四 201719:45

  • Modernizr，確認瀏覽器是否支援


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>
<body>
<script type="text/javascript">
if(Modernizr.geolocation){
document.getElementsByTagName('body')[0].innerHTML+='<h2>支援geolocation</h2>';
}
if(Modernizr.canvas){
document.getElementsByTagName('body')[0].innerHTML+='<h2>支援canvas</h2>';
}
if(Modernizr.flash){
document.getElementsByTagName('body')[0].innerHTML+='<h2>支援flash</h2>';
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Javascript
▲top
  • 9月 14 週四 201719:45

  • Modernizr，確認瀏覽器是否支援


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
</head>
<body>
<script type="text/javascript">
if(Modernizr.geolocation){
document.getElementsByTagName('body')[0].innerHTML+='<h2>支援geolocation</h2>';
}
if(Modernizr.canvas){
document.getElementsByTagName('body')[0].innerHTML+='<h2>支援canvas</h2>';
}
if(Modernizr.flash){
document.getElementsByTagName('body')[0].innerHTML+='<h2>支援flash</h2>';
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(8)

  • 個人分類：Javascript
▲top
  • 9月 14 週四 201719:19

  • 換頁也存著資料，localStorage/sessionSrorage的key、setItem、getItem方法


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">按我</button>
<div id="result"></div>
<a href="http://www.google.com">先去一下google再回來按</a>
<script type="text/javascript">
if(!localStorage['clickcount']){
var i =0;
}else{
i=localStorage['clickcount'];
}
document.getElementById('btn').onclick=function(){
i++;
localStorage.setItem('clickcount',i);
for (var j = 0; j < localStorage.length; j++) {
document.getElementById('result').innerHTML='<h2>localSotorage的「'+localStorage.key(j)+'」欄位紀錄的資料是「'+localStorage.getItem(localStorage.key(j))+'」</h2>';
}
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Javascript
▲top
  • 9月 14 週四 201719:19

  • 換頁也存著資料，localStorage/sessionSrorage的key、setItem、getItem方法


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">按我</button>
<div id="result"></div>
<a href="http://www.google.com">先去一下google再回來按</a>
<script type="text/javascript">
if(!localStorage['clickcount']){
var i =0;
}else{
i=localStorage['clickcount'];
}
document.getElementById('btn').onclick=function(){
i++;
localStorage.setItem('clickcount',i);
for (var j = 0; j < localStorage.length; j++) {
document.getElementById('result').innerHTML='<h2>localSotorage的「'+localStorage.key(j)+'」欄位紀錄的資料是「'+localStorage.getItem(localStorage.key(j))+'」</h2>';
}
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(40)

  • 個人分類：Javascript
▲top
  • 9月 14 週四 201718:43

  • 取的經緯度位置，使用navigator物件的geolocation屬性的getCurrentPosition方法，產生的事件物件的coords屬性產生latitude與longitude屬性


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<button id="btn">取得位置</button>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
document.getElementById('content').innerHTML=
'你的位置緯度是：'+position.coords.latitude+'<br>'+
'你的位置經度是：'+position.coords.longitude;
});
}else{
document.getElementById('content').innerHTML='不支援喔'
}
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：Javascript
▲top
  • 9月 14 週四 201718:43

  • 取的經緯度位置，使用navigator物件的geolocation屬性的getCurrentPosition方法，產生的事件物件的coords屬性產生latitude與longitude屬性


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="content"></div>
<button id="btn">取得位置</button>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(function(position){
document.getElementById('content').innerHTML=
'你的位置緯度是：'+position.coords.latitude+'<br>'+
'你的位置經度是：'+position.coords.longitude;
});
}else{
document.getElementById('content').innerHTML='不支援喔'
}
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(23)

  • 個人分類：Javascript
▲top
  • 9月 14 週四 201717:31

  • 使用jQuery的$.ajax方法，實作載入中、載入成功、載入失敗等狀況


<!-- 檔案：0914-6a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="0914-6.css">
</head>
<body>
<ul>
<li><a href="0914-6a.html">第1頁</a></li>
<li><a href="0914-6b.html">第2頁</a></li>
<li><a href="0914-6c.html">第3頁</a></li>
</ul>
<div id="content">
<div id="container">
<img src="https://api.fnkr.net/testimg/100x100/a00/FFF/?text=A">
</div>
</div>
<script type="text/javascript" src="0914-6.js"></script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：jQuery
▲top
  • 9月 14 週四 201717:31

  • 使用jQuery的$.ajax方法，實作載入中、載入成功、載入失敗等狀況


<!-- 檔案：0914-6a.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="0914-6.css">
</head>
<body>
<ul>
<li><a href="0914-6a.html">第1頁</a></li>
<li><a href="0914-6b.html">第2頁</a></li>
<li><a href="0914-6c.html">第3頁</a></li>
</ul>
<div id="content">
<div id="container">
<img src="https://api.fnkr.net/testimg/100x100/a00/FFF/?text=A">
</div>
</div>
<script type="text/javascript" src="0914-6.js"></script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(871)

  • 個人分類：jQuery
▲top
  • 9月 14 週四 201717:17

  • 使用jQuery的$.getJSON方法，配合done()、each()、fail()、always()因應各種資料載入狀況


<!-- 檔案：0914-5.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
a{
cursor: pointer;
}
</style>
</head>
<body>
<div id="content"></div>
<div id="reloadbox"></div>
<script type="text/javascript">
function getData(){
var content='';
$.getJSON('data/0914-5.json').done(function(data){
$.each(data,function(index,value){
content+='<h2>'+index+'：'+value+'</h2>'
});
$('#content').html(content).hide().fadeIn();
}).fail(function(){
$('#content').text('沒有資料');
}).always(function(){
$('#reloadbox').html('<a id="reload">重新整理</a>');
$('#reload').on('click',function(e){
e.preventDefault();
getData();
});
});
}
getData();
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(0)

  • 個人分類：jQuery
▲top
  • 9月 14 週四 201717:17

  • 使用jQuery的$.getJSON方法，配合done()、each()、fail()、always()因應各種資料載入狀況


<!-- 檔案：0914-5.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style type="text/css">
a{
cursor: pointer;
}
</style>
</head>
<body>
<div id="content"></div>
<div id="reloadbox"></div>
<script type="text/javascript">
function getData(){
var content='';
$.getJSON('data/0914-5.json').done(function(data){
$.each(data,function(index,value){
content+='<h2>'+index+'：'+value+'</h2>'
});
$('#content').html(content).hide().fadeIn();
}).fail(function(){
$('#content').text('沒有資料');
}).always(function(){
$('#reloadbox').html('<a id="reload">重新整理</a>');
$('#reload').on('click',function(e){
e.preventDefault();
getData();
});
});
}
getData();
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

Jerry 發表在 痞客邦 留言(0) 人氣(385)

  • 個人分類：jQuery
▲top
«1...14151637»

文章搜尋

文章搜尋

文章分類

toggle 伺服器架設 (1)
  • AWS (2)
toggle 伺服器架設 (1)
  • AWS (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle 後端框架 (1)
  • Laravel (26)
toggle 後端框架 (1)
  • Laravel (26)
  • 自學資源 (1)
  • 自學資源 (1)
  • 未分類文章 (1)

文章分類

toggle 伺服器架設 (1)
  • AWS (2)
toggle 伺服器架設 (1)
  • AWS (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle 前端框架 (2)
  • Vue.js (26)
  • Angular.js (2)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle HTML與開發工具 (2)
  • HTML (2)
  • 開發工具相關 (8)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle CSS與framework (4)
  • CSS (9)
  • Bootstrap (26)
  • CSS插件 (1)
  • CSS工具 (3)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle JS與函式庫 (3)
  • js套件 (1)
  • jQuery (28)
  • Javascript (46)
toggle 後端框架 (1)
  • Laravel (26)
toggle 後端框架 (1)
  • Laravel (26)
  • 自學資源 (1)
  • 自學資源 (1)
  • 未分類文章 (1)

最新文章

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 使用laravel內建的vue componet
  • 使用laravel內建的vue componet
  • Vuetify
  • Vuetify
  • VS code安裝後相關
  • VS code安裝後相關

最新文章

  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 部落格搬家囉！ 網址：https://bugswarehouse.blogspot.tw/
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 用vue寫出：有頁碼表格，可排序，搜尋，限制出現之資料
  • 使用laravel內建的vue componet
  • 使用laravel內建的vue componet
  • Vuetify
  • Vuetify
  • VS code安裝後相關
  • VS code安裝後相關

個人資訊

Jerry
暱稱：
Jerry
分類：
數位生活
好友：
累積中
地區：

個人資訊

Jerry
暱稱：
Jerry
分類：
數位生活
好友：
累積中
地區：

文章精選

文章精選

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (474)用js寫一個時鐘，用Date物件
  • (388)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (44)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (43)createElement、createTextNode、appendChild，動態新增元素組合技
  • (13)Laravel，view視圖
  • (9)面試會考：寫出5的倍數的乘法表
  • (8)counter-increment與counter-rest，文章分段可用
  • (7)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (3)on綁定傳入四個參數，事件物件的type和data.自定義

熱門文章

  • (1,572)用vue寫購物車（小計、總計、數量計算）
  • (474)用js寫一個時鐘，用Date物件
  • (388)Autoprefixer CSS 自動加前綴工具（以符合各瀏覽器）
  • (44)過濾器，排列方式依據名稱字首，1與-1切換升冪與降冪
  • (43)createElement、createTextNode、appendChild，動態新增元素組合技
  • (13)Laravel，view視圖
  • (9)面試會考：寫出5的倍數的乘法表
  • (8)counter-increment與counter-rest，文章分段可用
  • (7)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (3)on綁定傳入四個參數，事件物件的type和data.自定義

最新留言

    最新留言

      動態訂閱

      動態訂閱

      誰來我家

      誰來我家

      參觀人氣

      • 本日人氣：
      • 累積人氣：

      參觀人氣

      • 本日人氣：
      • 累積人氣：