【消滅代辦】第5周 - null拷貝,input自適應,進度條加載,顏色隨機值

 

2018.12.10 代辦一：javascript中js怎麼拷貝null的值

null屬於簡單類型的數值，直接進行拷貝便可：

2018.12.11 代辦二：怎麼讓input自適應寬度？

這樣是寫下代辦不久後看到的一個面試題

 解法一：flex：

<div class="box">
  <input type="text">
  <button>按鈕</button>
</div>

　　

.box{
  background: rgb(218, 255, 184);
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
input{
  flex: 1;
}
button{
  width: 80px;
}

　

解法2、float佈局

<div class="box">
  <button>按鈕</button>
  <div class="input-box">
    <input type="text">
  </div>
</div>

.box{
  background: rgb(218, 255, 184);
  padding: 5px;
  /* display: flex;
  align-items: center;
  justify-content: space-between; */
}
.input-box{
  width: 100%;
  margin-left: 80px;
}
input{
  width: 100%;
  /* flex: 1; */
}
button{
  width: 80px;
  float: left;
}

　

解法3、float+margin負邊距

<div class="box">
  <div class="input-box">
    <input type="text">
  </div>
  <button>按鈕</button>
</div>

　　

.box{
  background: rgb(218, 255, 184);
  padding: 5px;
  /* display: flex;
  align-items: center;
  justify-content: space-between; */
}
.input-box{
  float: left;
  width: 100%;
  margin-right: -80px;
}
input{
  width: 100%;
  border: 1px solid #eee;
  padding: 5px 90px 4px 10px;
  box-sizing: border-box;
  /* flex: 1; */
}
button{
  width: 80px;
}

padding-right： 90是爲了留出按鈕的位置，不讓按鈕擋住文字。

解法4、定位佈局

<div class="box">
  <div class="input-box">
    <input type="text">
  </div>
  <button>按鈕</button>
</div>

.box{
  background: rgb(218, 255, 184);
  padding: 5px;
  /* display: flex;
  align-items: center;
  justify-content: space-between; */
  position: relative;
  height: 40px;
}
.input-box{
  /* float: left;
  width: 100%;
  margin-right: -80px; */
  position: absolute;
    left: 0;
    right: 80px;
}
input{
  width: 100%;
  border: 1px solid #eee;
  /* padding: 5px 90px 4px 10px; */
  padding: 5px 10px;
  box-sizing: border-box;
  /* flex: 1; */
}
button{
  width: 80px;
  position: absolute;
  right: 0;
}

　　

2018.12.12 代辦三：原生js實現進度條加載 - 數字逐步變化的那種

看到一個demo，原理是定時器+遞歸。以爲很不錯，整理到這裏：

1 <div class="demo">
2     <form name=loading>
3     <p style="font-size:18px;"> 歡迎訪第九站長！<a style="color:#3366cc;" href="http://www.dijiuzhanzhang.com">http://www.dijiuzhanzhang.com</a></p>
4     <p><input name="chart" size="46" style="color:#ff897c;" /></p>
5     <p><input name="percent" size="46" style="color:gray;text-align:center;" /></p>
6     </form>
7 </div>

 

1 *{margin:0;padding:0;list-style-type:none;}
2 a,img{border:0;}
3 body{font:12px/180% Arial, Helvetica, sans-serif, "新宋體";}
4 
5 .demo{width:750px;margin:40px auto;text-align:center;}
6 .demo p{height:38px;line-height:28px;}
7 .demo p input{border:none;background:none;font-family:arial;font-weight:bolder;}

 

 1 <script type="text/javascript">
 2 var bar = 0 
 3 var line = "||" 
 4 var amount ="||" 
 5 count() 
 6 function count(){ 
 7     bar= bar+2 
 8     amount =amount + line 
 9     document.loading.chart.value=amount 
10     document.loading.percent.value=bar+"%" 
11     if(bar<99){
12         setTimeout("count()",100);
13     }else{
14         window.location = "http://www.dijiuzhanzhang.com";
15     } 
16 }
17 </script>

轉自：http://www.dijiuzhanzhang.com

一、他是經過js一次性定時器+遞歸不斷向percent結構中添加"|"元素：

 

二、標籤上有name屬性，而後經過

document.loading.chart.value

 

這種形式，獲取input的value的方式也是很別緻。　　

 

三、input內部建立了一個div的場景也是第一次碰見。

看來第2條那種寫法，還很值得研究啊。

　

2018.12.13 代辦四：隨機生成顏色值

第一種

 1 function randomColor() {
 2   let colorArr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f'],
 3     newColor = '#';
 4   for (var i = 0; i < 6; i++) {
 5     newColor += colorArr[Math.floor(Math.random() * 15)]
 6   }
 7   console.log(newColor);
 8   return newColor
 9 }
10 randomColor()

 

第二種

1 function getRandomColor() {
2   return "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
3 }

 

說明： 一、16777215爲16進制的顏色ffffff轉成10進制的數字 二、>>數字取整 三、轉成16進制不足6位的以0來補充