PIXNET Logo登入

Bug倉庫 // 程式日記

跳到主文

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

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

  • 相簿
  • 部落格
  • 留言
  • 名片
  • 9月 01 週五 201716:33

  • 不太熟的switch用法，不同數字出現不同結果


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>不同數字出現不同結果</h2>
<input type="number" name="" max='5' min="0" id="number">
<button id="btn">按我</button>
<h2 id="result"></h2>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
var number=document.getElementById('number').value;
number=parseInt(number);
var result='';
switch(number){
case 1:
result='一號餐是麥克炸機喔';
break;
case 2:
result='二號不是噩耗啦';
break;
case 3:
result='三號外傳天之痕';
break;
case 4:
result='四號位置要找速度快的';
break;
case 5:
result='五號有效喔';
break;
default:
result='輸入1-5之間吧';
break;
}
document.getElementById('result').textContent=result;
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 01 週五 201716:33

  • 不太熟的switch用法，不同數字出現不同結果


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>不同數字出現不同結果</h2>
<input type="number" name="" max='5' min="0" id="number">
<button id="btn">按我</button>
<h2 id="result"></h2>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
var number=document.getElementById('number').value;
number=parseInt(number);
var result='';
switch(number){
case 1:
result='一號餐是麥克炸機喔';
break;
case 2:
result='二號不是噩耗啦';
break;
case 3:
result='三號外傳天之痕';
break;
case 4:
result='四號位置要找速度快的';
break;
case 5:
result='五號有效喔';
break;
default:
result='輸入1-5之間吧';
break;
}
document.getElementById('result').textContent=result;
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 01 週五 201714:08

  • getTime出來的單位是毫秒數（某日期離現在共幾天）


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>輸入<input type="date" id="usertype"><button id="btn">所以結果是</button>
<br>
這天離現在共有</h2>
<h2><span id="differday"></span>天</h2>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
var usertype=document.getElementById('usertype').value;
var usertypetoobj=new Date(usertype);
var today=new Date();
var difference=today.getTime()-usertypetoobj.getTime();
/*毫秒數換算*/
var howManyDay=Math.floor(difference/(1000*60*60*24));
document.getElementById('differday').textContent=howManyDay;
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 01 週五 201714:08

  • getTime出來的單位是毫秒數（某日期離現在共幾天）


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>輸入<input type="date" id="usertype"><button id="btn">所以結果是</button>
<br>
這天離現在共有</h2>
<h2><span id="differday"></span>天</h2>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
var usertype=document.getElementById('usertype').value;
var usertypetoobj=new Date(usertype);
var today=new Date();
var difference=today.getTime()-usertypetoobj.getTime();
/*毫秒數換算*/
var howManyDay=Math.floor(difference/(1000*60*60*24));
document.getElementById('differday').textContent=howManyDay;
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 01 週五 201713:32

  • 輸入最大值與最小值亂數抽出之間整數


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
color: steelBlue;
}
.process{
color: black;
font-size: 20px;
}
li{
margin: 10px 0;
}
.processValue{
color: darkRed;
}
</style>
</head>
<body>
<h2>亂數抽出<br>
<input type="number" min="0" id="min">
到<input type="number" min="0" id="max"><br>之間的數字</h2>
<button id="btn">我抽</button>
<h2>結果是<span class="result"></span></h2>
<hr>
<h2>這都是過程</h2>
<ol>
<li>
<span class="process">Math.random()產出後：
<span class="processValue" id="afterrandom"></span></span>
</li>
<li>
<span class="process">然後乘以
{[最大值<span class="showmax"></span>
減最小值<span class="showmin"></span>
也就是<span class="maxMinusmin"></span>}
後：<span class="processValue" id="aftermultiply"></span>
</span>
<br>（這個值一定會小於<span class="maxMinusmin"></span>）
</li>
<li>
<span class="process">加上
最小值 <span class="showmin"></span> 後：
<span class="processValue" id="afterplus"></span>
</span>
</li>
<li>
<span class="process">
Math.floor後：<span class="processValue result"></span>
</span>
</li>
</ol>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
var min=document.getElementById('min').value;
var max=document.getElementById('max').value;
document.getElementsByClassName('showmax')[0].textContent=max;
document.getElementsByClassName('showmin')[0].textContent=min;
document.getElementsByClassName('showmin')[1].textContent=min;
min=parseFloat(min);
max=parseFloat(max);
var rand=Math.random();
var maxMinusmin=max-min;
document.getElementById('afterrandom').textContent=rand;
document.getElementsByClassName('maxMinusmin')[0].textContent=maxMinusmin;
document.getElementsByClassName('maxMinusmin')[1].textContent=maxMinusmin;
var randmuti=Math.random()*maxMinusmin;
document.getElementById('aftermultiply').textContent=randmuti;
var andplusmin=randmuti+min;
document.getElementById('afterplus').textContent=andplusmin;
var gofloor=Math.floor(andplusmin);
document.getElementsByClassName('result')[0].textContent=gofloor;
document.getElementsByClassName('result')[1].textContent=gofloor;
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 01 週五 201713:32

  • 輸入最大值與最小值亂數抽出之間整數


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
span{
color: steelBlue;
}
.process{
color: black;
font-size: 20px;
}
li{
margin: 10px 0;
}
.processValue{
color: darkRed;
}
</style>
</head>
<body>
<h2>亂數抽出<br>
<input type="number" min="0" id="min">
到<input type="number" min="0" id="max"><br>之間的數字</h2>
<button id="btn">我抽</button>
<h2>結果是<span class="result"></span></h2>
<hr>
<h2>這都是過程</h2>
<ol>
<li>
<span class="process">Math.random()產出後：
<span class="processValue" id="afterrandom"></span></span>
</li>
<li>
<span class="process">然後乘以
{[最大值<span class="showmax"></span>
減最小值<span class="showmin"></span>
也就是<span class="maxMinusmin"></span>}
後：<span class="processValue" id="aftermultiply"></span>
</span>
<br>（這個值一定會小於<span class="maxMinusmin"></span>）
</li>
<li>
<span class="process">加上
最小值 <span class="showmin"></span> 後：
<span class="processValue" id="afterplus"></span>
</span>
</li>
<li>
<span class="process">
Math.floor後：<span class="processValue result"></span>
</span>
</li>
</ol>
<script type="text/javascript">
document.getElementById('btn').onclick=function(){
var min=document.getElementById('min').value;
var max=document.getElementById('max').value;
document.getElementsByClassName('showmax')[0].textContent=max;
document.getElementsByClassName('showmin')[0].textContent=min;
document.getElementsByClassName('showmin')[1].textContent=min;
min=parseFloat(min);
max=parseFloat(max);
var rand=Math.random();
var maxMinusmin=max-min;
document.getElementById('afterrandom').textContent=rand;
document.getElementsByClassName('maxMinusmin')[0].textContent=maxMinusmin;
document.getElementsByClassName('maxMinusmin')[1].textContent=maxMinusmin;
var randmuti=Math.random()*maxMinusmin;
document.getElementById('aftermultiply').textContent=randmuti;
var andplusmin=randmuti+min;
document.getElementById('afterplus').textContent=andplusmin;
var gofloor=Math.floor(andplusmin);
document.getElementsByClassName('result')[0].textContent=gofloor;
document.getElementsByClassName('result')[1].textContent=gofloor;
}
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 01 週五 201712:39

  • 數字的isNaN、toFixed、toPrecision、toExponential


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#number{
color: steelBlue;
}
span{
color: darkRed;
}
</style>
</head>
<body>
<h2 id="number">87.6899487</h2>
<h2>你是數字嗎：<span id="isNaN"></span></h2>
<h2>四捨五入到小數點後第二位：<span id="toFixed"></span></h2>
<h2>四捨五入（從整數第一位開始數）：<span id="toPrecision"></span></h2>
<h2>以指數方式顯示：<span id="toExponential"></span></h2>
<script type="text/javascript">
var number=document.getElementById('number').textContent;
document.getElementById('isNaN').textContent=isNaN(number);
number=parseFloat(number);
document.getElementById('toFixed').textContent=number.toFixed(2);
document.getElementById('toPrecision').textContent=number.toPrecision(2);
document.getElementById('toExponential').textContent=number.toExponential();
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 01 週五 201712:39

  • 數字的isNaN、toFixed、toPrecision、toExponential


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#number{
color: steelBlue;
}
span{
color: darkRed;
}
</style>
</head>
<body>
<h2 id="number">87.6899487</h2>
<h2>你是數字嗎：<span id="isNaN"></span></h2>
<h2>四捨五入到小數點後第二位：<span id="toFixed"></span></h2>
<h2>四捨五入（從整數第一位開始數）：<span id="toPrecision"></span></h2>
<h2>以指數方式顯示：<span id="toExponential"></span></h2>
<script type="text/javascript">
var number=document.getElementById('number').textContent;
document.getElementById('isNaN').textContent=isNaN(number);
number=parseFloat(number);
document.getElementById('toFixed').textContent=number.toFixed(2);
document.getElementById('toPrecision').textContent=number.toPrecision(2);
document.getElementById('toExponential').textContent=number.toExponential();
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 01 週五 201712:03

  • 字串的charAt、indexOf、substring、replace等


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#imastring{
color: steelBlue;
}
span{
color: darkRed;
}
</style>
</head>
<body>
<h2 id="imastring">我是一個字串I am a string 串</h2>
<h2>我的長度：<span id="length"></span></h2>
<h2>把我弄成大寫：<span id="toUpperCase"></span></h2>
<h2>把我弄成小寫：<span id="toLowerCase"></span></h2>
<h2>我的第三個字是：<span id="charAt3"></span></h2>
<h2>「串」在第幾個字（從0開始算）：<span id="indexOf"></span></h2>
<h2>「串」在第幾個字（從結尾開始算）：<span id="lastIndexOf"></span></h2>
<h2>從0開始切出6個字：<span id="substring"></span></h2>
<h2>把其中的字取代掉：<span id="replace"></span></h2>
<script type="text/javascript">
var imastring=document.getElementById('imastring').textContent;
document.getElementById('length').innerHTML=imastring.length;
document.getElementById('toUpperCase').innerHTML=imastring.toUpperCase();
document.getElementById('toLowerCase').innerHTML=imastring.toLowerCase();
document.getElementById('charAt3').innerHTML=imastring.charAt(3);
document.getElementById('indexOf').innerHTML=imastring.indexOf('串');
document.getElementById('lastIndexOf').innerHTML=imastring.lastIndexOf('串');
document.getElementById('substring').innerHTML=imastring.substring(0,6);
document.getElementById('replace').innerHTML=imastring.replace('字','串');
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

  • 個人分類：Javascript
▲top
  • 9月 01 週五 201712:03

  • 字串的charAt、indexOf、substring、replace等


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#imastring{
color: steelBlue;
}
span{
color: darkRed;
}
</style>
</head>
<body>
<h2 id="imastring">我是一個字串I am a string 串</h2>
<h2>我的長度：<span id="length"></span></h2>
<h2>把我弄成大寫：<span id="toUpperCase"></span></h2>
<h2>把我弄成小寫：<span id="toLowerCase"></span></h2>
<h2>我的第三個字是：<span id="charAt3"></span></h2>
<h2>「串」在第幾個字（從0開始算）：<span id="indexOf"></span></h2>
<h2>「串」在第幾個字（從結尾開始算）：<span id="lastIndexOf"></span></h2>
<h2>從0開始切出6個字：<span id="substring"></span></h2>
<h2>把其中的字取代掉：<span id="replace"></span></h2>
<script type="text/javascript">
var imastring=document.getElementById('imastring').textContent;
document.getElementById('length').innerHTML=imastring.length;
document.getElementById('toUpperCase').innerHTML=imastring.toUpperCase();
document.getElementById('toLowerCase').innerHTML=imastring.toLowerCase();
document.getElementById('charAt3').innerHTML=imastring.charAt(3);
document.getElementById('indexOf').innerHTML=imastring.indexOf('串');
document.getElementById('lastIndexOf').innerHTML=imastring.lastIndexOf('串');
document.getElementById('substring').innerHTML=imastring.substring(0,6);
document.getElementById('replace').innerHTML=imastring.replace('字','串');
</script>
</body>
</html>
(繼續閱讀...)
文章標籤

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

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

文章搜尋

文章搜尋

文章分類

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.自定義

最新留言

    最新留言

      動態訂閱

      動態訂閱

      誰來我家

      誰來我家

      參觀人氣

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

      參觀人氣

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