input自带小×；点击按钮返回顶部；工作总结
2018-08-15 本文已影响0人
雅雅的前端工作学习
- ie10以上版本浏览器input框输入文字后出现小×，便于用户删除内容，但实际开发时，我们往往会自定义小×（自带的往往和我们做的input框很不搭），这时候需要清除 ：
/*--清除谷歌浏览器下的 search 叉号*/
input::-webkit-search-cancel-button{
display: none;
}
/*--清除IE下的 search 叉号*/
input::-ms-clear{display: none;}
-
发现在ie浏览器的input框输入的内容总是靠向input框的下面，而谷歌就垂直居中。
解决方法：给input一个行高（height：30px; line-height: 30px;）即可，因为谷歌直接给个height就能居中，我就没加行高，没想到在ie测试的时候发现了兼容问题 -
Math.floor() 返回小于或等于一个给定数字的最大整数。
-
css3的换行：单词中间没有空格而且有很长，会在div中溢出（只在一行显示超出盒子）。
这时候可以css3中的新属性：允许长文本换行：
p {word-wrap:break-word;}
单词在换行时，整个单词不会拆开，css3中新增了单词强制拆分换行（用途不明白）
p.test1 {
word-break: keep-all;
}//单词不拆分
p.test2 {
word-break: break-all;
}//单词强制拆分
虽然不明白他的意义，但我在工作中还真用到了这个霸道的方法，同事调取的后台数据（纯英文）单词之间的空格全部由 表示了，如图：
2018-08-15_204414.png
导致这所有的文本全部在一行显示了，我的想法是：在浏览器眼里这是一个长单词，一个单词就无法使用word-break: keep all;只能使用word-wrap:break-word;使长文本换行，不过换行处的单词全被强行拆分了，图片上的问题我蛮奇怪的，是后台调取数据的问题？
- css3设置多个背景图片叠放，
2018-08-15_210448.png
css3设置背景图像的位置区域：
2018-08-15_211714.png
2018-08-15_211524.png
- 点击按钮返回顶部效果（js）：用了一个定时器，每30ms滚动条的位置上移一点，上移的距离越来越小，越靠近顶部上移的速度越慢，当滚动条距离顶部为0 ，删除定时器；或者在返回顶部的过程中用户移动滚动条，结束返回顶部效果，删除定时器，在当前页面停下来。
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
<style>
div.a{
width:300px;
height:10000px;
}
div.b{
width:100%;
height:950px;
position:relative;
background:yellow;
}
#btn{
position: fixed;
bottom:20px;
right:20px;
width:100px;
height:100px;
border:1px solid red;
display: none;
}
</style>
</head>
<body>
<div class='a'>
<div class='b'></div>
</div>
<div id="btn">返回顶部</div>
<script>
window.onload = function(){
var btn = document.getElementById('btn');
var timer = null;
var isTop = true;
//获取页面可视区高度
var clientHeight = document.documentElement.clientHeight;
console.log(clientHeight)
//滚动条滚动时触发
window.onscroll = function() {
//显示回到顶部按钮
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
if (osTop >= clientHeight) {
btn.style.display = "block";
} else {
btn.style.display = "none";
};
//回到顶部过程中用户滚动滚动条，停止定时器
if (!isTop) {
clearInterval(timer);
};
isTop = false;
};
btn.onclick = function() {
//设置定时器
timer = setInterval(function(){
//获取滚动条距离顶部高度
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log('osTop '+osTop);
var ispeed = Math.floor(-osTop / 7);
console.log('ispeed '+ispeed);
document.documentElement.scrollTop = document.body.scrollTop = osTop+ispeed;
//到达顶部，清除定时器
if (osTop == 0) {
clearInterval(timer);
};
isTop = true;
},30);
};
};
</script>
</body>
</html>
