PIXNET Logo登入

Bug倉庫 // 程式日記

跳到主文

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

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

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 9月 02 週六 201711:17

  • onblur事件與e.target，判斷使用者輸入是否小於五


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="account">
<h2 id="result"></h2>
<script type="text/javascript">
document.getElementById('account').onblur=function(e){
if(e.target.value.length<5){
document.getElementById('result').innerHTML='不得小於五';
}else{
document.getElementById('result').innerHTML='';
}
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 02 週六 201711:17

  • onblur事件與e.target，判斷使用者輸入是否小於五


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text" id="account">
<h2 id="result"></h2>
<script type="text/javascript">
document.getElementById('account').onblur=function(e){
if(e.target.value.length<5){
document.getElementById('result').innerHTML='不得小於五';
}else{
document.getElementById('result').innerHTML='';
}
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 02 週六 201700:59

  • insertBefore用法


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
<li>ee</li>
</ol>
<input type="number" id="number" min='0' max="5">
<button id="btn">按我插進去這個數字之前</button>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
var number=document.getElementById('number').value;
number=parseInt(number);
var createElement=document.createElement('li');
createElement.appendChild(document.createTextNode('呵呵'));
var nowgoto=document.getElementsByTagName('li').item(number-1);
document.getElementsByTagName('ol')[0].insertBefore(createElement,nowgoto);
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 02 週六 201700:59

  • insertBefore用法


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
<li>ee</li>
</ol>
<input type="number" id="number" min='0' max="5">
<button id="btn">按我插進去這個數字之前</button>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
var number=document.getElementById('number').value;
number=parseInt(number);
var createElement=document.createElement('li');
createElement.appendChild(document.createTextNode('呵呵'));
var nowgoto=document.getElementsByTagName('li').item(number-1);
document.getElementsByTagName('ol')[0].insertBefore(createElement,nowgoto);
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 02 週六 201700:49

  • hasAttribute、setAttribute、getAttribute、removeAttribute，html屬性操作方法


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: darkRed;
}
</style>
</head>
<body>
<img>
<button id="btn">按我就不同</button>
<h2 >有src這個屬性嗎<span id="now"></span></h2>
<h2>有的話，屬性值是<span id="value"></span></h2>
<script type="text/javascript">
var img=document.getElementsByTagName('img')[0];
document.getElementById('now').innerHTML=img.hasAttribute('src');
document.getElementById('btn').onclick=function(){
if(img.hasAttribute('src')){
img.removeAttribute('src');
}else{
img.setAttribute('src','https://api.fnkr.net/testimg/50x50/00CED1/FFF/?text=img');
}
document.getElementById('now').innerHTML=img.hasAttribute('src');
document.getElementById('value').innerHTML=img.getAttribute('src');
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 02 週六 201700:49

  • hasAttribute、setAttribute、getAttribute、removeAttribute，html屬性操作方法


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
span{
color: darkRed;
}
</style>
</head>
<body>
<img>
<button id="btn">按我就不同</button>
<h2 >有src這個屬性嗎<span id="now"></span></h2>
<h2>有的話，屬性值是<span id="value"></span></h2>
<script type="text/javascript">
var img=document.getElementsByTagName('img')[0];
document.getElementById('now').innerHTML=img.hasAttribute('src');
document.getElementById('btn').onclick=function(){
if(img.hasAttribute('src')){
img.removeAttribute('src');
}else{
img.setAttribute('src','https://api.fnkr.net/testimg/50x50/00CED1/FFF/?text=img');
}
document.getElementById('now').innerHTML=img.hasAttribute('src');
document.getElementById('value').innerHTML=img.getAttribute('src');
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 02 週六 201700:38

  • removeChild，刪掉我的孩子吧


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul><li>aa</li><li>bb</li><li>cc</li><li>dd</li><li>ee</li></ul>
<button id="btn">刪掉我的孩子吧</button>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
var killthechild=document.getElementsByTagName('li')[0];
document.getElementsByTagName('ul')[0].removeChild(killthechild);
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 02 週六 201700:38

  • removeChild，刪掉我的孩子吧


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul><li>aa</li><li>bb</li><li>cc</li><li>dd</li><li>ee</li></ul>
<button id="btn">刪掉我的孩子吧</button>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
var killthechild=document.getElementsByTagName('li')[0];
document.getElementsByTagName('ul')[0].removeChild(killthechild);
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 02 週六 201700:31

  • createElement、createTextNode、appendChild，動態新增元素組合技


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
<li>ee</li>
</ul>
<script type="text/javascript">
var createElement=document.createElement('li');
createElement.appendChild(document.createTextNode('呵呵'));
document.getElementsByTagName('ul')[0].appendChild(createElement);
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 02 週六 201700:31

  • createElement、createTextNode、appendChild，動態新增元素組合技


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>aa</li>
<li>bb</li>
<li>cc</li>
<li>dd</li>
<li>ee</li>
</ul>
<script type="text/javascript">
var createElement=document.createElement('li');
createElement.appendChild(document.createTextNode('呵呵'));
document.getElementsByTagName('ul')[0].appendChild(createElement);
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
«1...31323337»

文章搜尋

文章搜尋

文章分類

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的倍數的乘法表
  • (7)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (7)counter-increment與counter-rest，文章分段可用
  • (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的倍數的乘法表
  • (7)childNode和nodeValue，我的html是一棵樹，啊哩啊紮都是節點
  • (7)counter-increment與counter-rest，文章分段可用
  • (3)on綁定傳入四個參數，事件物件的type和data.自定義

最新留言

    最新留言

      動態訂閱

      動態訂閱

      誰來我家

      誰來我家

      參觀人氣

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

      參觀人氣

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