PIXNET Logo登入

Bug倉庫 // 程式日記

跳到主文

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

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

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 9月 07 週四 201711:37

  • 事件物件的timeStamp還有日期物件的todateString


<!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">
#get{
margin: 10px 0;
}
span{
color: darkRed;
}
</style>
</head>
<body>
<div>目前從頁面導入開始到現在總共有<span id="time"></span>豪秒</div>
<div>目前日期是<span id="type"></span></div>
<button id="get">取得秒數</button>
<script type="text/javascript">
$(function(){
$('#get').click(function(e){
var today = new Date();
$('#time').text(e.timeStamp);
$('#type').text(today.toDateString());
});
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 07 週四 201711:37

  • 事件物件的timeStamp還有日期物件的todateString


<!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">
#get{
margin: 10px 0;
}
span{
color: darkRed;
}
</style>
</head>
<body>
<div>目前從頁面導入開始到現在總共有<span id="time"></span>豪秒</div>
<div>目前日期是<span id="type"></span></div>
<button id="get">取得秒數</button>
<script type="text/javascript">
$(function(){
$('#get').click(function(e){
var today = new Date();
$('#time').text(e.timeStamp);
$('#type').text(today.toDateString());
});
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 07 週四 201711:13

  • 一次綁定兩個事件


<!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">
li{
width: 200px;
height: 50px;
background-color: #080;
list-style: none;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: #fff;
}
.deepgreen{
color: #020
}
</style>
</head>
<body>
<ul>
<li data-key='one' data-value='aa'>aa</li>
<li data-key='two' data-value='bb'>bb</li>
<li data-key='three' data-value='cc'>cc</li>
<li data-key='four' data-value='dd'>dd</li>
<li data-key='five' data-value='ee'>ee</li>
</ul>
<script type="text/javascript">
$('li').on('click mouseover',function(){
$(this).text($(this).data('key'));
$(this).addClass('deepgreen');
});
$('li').on('mouseout',function(){
$(this).text($(this).data('value'));
$(this).removeClass('deepgreen');
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 07 週四 201711:13

  • 一次綁定兩個事件


<!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">
li{
width: 200px;
height: 50px;
background-color: #080;
list-style: none;
margin: 10px;
text-align: center;
line-height: 50px;
font-size: 30px;
color: #fff;
}
.deepgreen{
color: #020
}
</style>
</head>
<body>
<ul>
<li data-key='one' data-value='aa'>aa</li>
<li data-key='two' data-value='bb'>bb</li>
<li data-key='three' data-value='cc'>cc</li>
<li data-key='four' data-value='dd'>dd</li>
<li data-key='five' data-value='ee'>ee</li>
</ul>
<script type="text/javascript">
$('li').on('click mouseover',function(){
$(this).text($(this).data('key'));
$(this).addClass('deepgreen');
});
$('li').on('mouseout',function(){
$(this).text($(this).data('value'));
$(this).removeClass('deepgreen');
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 07 週四 201700:16

  • css函式的兩種用法


<!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">
#content{
width: 100px;
height: 100px;
background-color: cadetblue;
transition: 0.5s;
margin-left: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="content"></div>
<button id="wider">變大</button>
<button id="goright">往右</button>
<script type="text/javascript">
$('#wider').click(function(){
$('#content').css({
'width':'200px',
'height':'200px'
});
});
$('#goright').click(function(){
$('#content').css('margin-left','+=50')
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 07 週四 201700:16

  • css函式的兩種用法


<!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">
#content{
width: 100px;
height: 100px;
background-color: cadetblue;
transition: 0.5s;
margin-left: 20px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="content"></div>
<button id="wider">變大</button>
<button id="goright">往右</button>
<script type="text/javascript">
$('#wider').click(function(){
$('#content').css({
'width':'200px',
'height':'200px'
});
});
$('#goright').click(function(){
$('#content').css('margin-left','+=50')
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 07 週四 201700:03

  • before、prepend、append、after大比較


<!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">
div{
display: inline-block;
padding: 20px;
}
#content{
background-color: #fa0;
}
#before{
background-color: #c00;
}
#prepend{
background-color: #f60;
}
#append{
background-color: #090;
}
#after{
background-color: #09c;
}
</style>
</head>
<body>
<div id="content">我是內容</div>
<script type="text/javascript">
$('#content').before('<div id="before">用before插進來的</div>');
$('#content').prepend('<div id="prepend">用prepend插進來的</div>');
$('#content').append('<div id="append">用append插進來的</div>');
$('#content').after('<div id="after">用after插進來的</div>');
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 07 週四 201700:03

  • before、prepend、append、after大比較


<!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">
div{
display: inline-block;
padding: 20px;
}
#content{
background-color: #fa0;
}
#before{
background-color: #c00;
}
#prepend{
background-color: #f60;
}
#append{
background-color: #090;
}
#after{
background-color: #09c;
}
</style>
</head>
<body>
<div id="content">我是內容</div>
<script type="text/javascript">
$('#content').before('<div id="before">用before插進來的</div>');
$('#content').prepend('<div id="prepend">用prepend插進來的</div>');
$('#content').append('<div id="append">用append插進來的</div>');
$('#content').after('<div id="after">用after插進來的</div>');
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 05 週二 201718:53

  • 內容選取器contains還有function搭配return值的寫法


<!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>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
$('li:contains("3")').html(function(){
return $('li').length+$(this).index();
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：jQuery
▲top
  • 9月 05 週二 201718:53

  • 內容選取器contains還有function搭配return值的寫法


<!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>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script type="text/javascript">
$('li:contains("3")').html(function(){
return $('li').length+$(this).index();
});
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

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

文章搜尋

文章搜尋

文章分類

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

熱門文章

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

最新留言

    最新留言

      動態訂閱

      動態訂閱

      誰來我家

      誰來我家

      參觀人氣

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

      參觀人氣

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