【消灭代办】第5周 - null拷贝,input自适应,进度条加载,颜色随机值

2018.12.10 代办一:javascript中js怎么拷贝null的值

null属于简单类型的数值,直接进行拷贝即可:

【消灭代办】第5周 - null拷贝,input自适应,进度条加载,颜色随机值

2018.12.11 代办二:怎么让input自适应宽度?

这样是写下代办不久后看到的一个面试题

解法一:flex:

【消灭代办】第5周 - null拷贝,input自适应,进度条加载,颜色随机值

<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;
}

 

解法二、float布局

【消灭代办】第5周 - null拷贝,input自适应,进度条加载,颜色随机值

<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;
}

 

解法三、float+margin负边距

【消灭代办】第5周 - null拷贝,input自适应,进度条加载,颜色随机值

<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是为了留出按钮的位置,不让按钮挡住文字。

【消灭代办】第5周 - null拷贝,input自适应,进度条加载,颜色随机值

解法四、定位布局

【消灭代办】第5周 - null拷贝,input自适应,进度条加载,颜色随机值

<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,原理是定时器+递归。觉得很不错,整理到这里:

 <div class="demo">
<form name=loading>
<p style="font-size:18px;"> 欢迎访第九站长!<a style="color:#3366cc;" href="http://www.dijiuzhanzhang.com">http://www.dijiuzhanzhang.com</a></p>
<p><input name="chart" size="46" style="color:#ff897c;" /></p>
<p><input name="percent" size="46" style="color:gray;text-align:center;" /></p>
</form>
</div>
 *{margin:;padding:;list-style-type:none;}
a,img{border:;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";} .demo{width:750px;margin:40px auto;text-align:center;}
.demo p{height:38px;line-height:28px;}
.demo p input{border:none;background:none;font-family:arial;font-weight:bolder;}
 <script type="text/javascript">
var bar = 0
var line = "||"
var amount ="||"
count()
function count(){
bar= bar+2
amount =amount + line
document.loading.chart.value=amount
document.loading.percent.value=bar+"%"
if(bar<99){
setTimeout("count()",100);
}else{
window.location = "http://www.dijiuzhanzhang.com";
}
}
</script>

转自:http://www.dijiuzhanzhang.com

1、他是通过js一次性定时器+递归不断向percent结构中添加"|"元素:

【消灭代办】第5周 - null拷贝,input自适应,进度条加载,颜色随机值

2、标签上有name属性,然后通过

document.loading.chart.value

这种形式,获取input的value的方式也是很别致。  

3、input内部创建了一个div的场景也是第一次遇见。

看来第2条那种写法,还很值得研究啊。

 

2018.12.13 代办四:随机生成颜色值

第一种

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

第二种

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

说明:
1、16777215为16进制的颜色ffffff转成10进制的数字
2、>>数字取整
3、转成16进制不足6位的以0来补充

上一篇:CSS3 Loading进度条加载动画特效


下一篇:Bootstrap3.0学习第二十二轮(JavaScript插件——弹出框)