html+css+js 提示笔记

input 预输入文本

placeholder="Search W3School"

input 字体颜色

input::-webkit-input-placeholder {
/* placeholder颜色 */
color: #fff;
}

input 输入类型:

pattern="[0-9]*" //数字

添加body图片背景图片自动适应整个屏幕

body:before {
　　content: ' ';position: fixed;z-index: -1;top: 0;right: 0;bottom: 0;left: 0;
　　background: url(images/bg.jpg) no-repeat #092138 bottom center;
　　background-size: cover;
}

当背景宽度超出容器的时候，显示背景中间的部分

.cent {
　　background: url(images/shuijiao.jpg) no-repeat rgba(0, 0, 0, 0.5);
　　background-position: center; /*当背景宽度超出容器的时候，显示背景中间的部分*/
　　background-size: coer;
　　vheight: 360px;
}

选中第一个元素

li:first-child{
}

选中最后一个元素

li:last-child{
}

选中第几个元素

li:nth-child(1){
}

阴影

-moz-box-shadow: 0px 2px 5px #E0E0E0; /* 老的 Firefox */
box-shadow: 0px 2px 5px #E0E0E0;

渐变

background: -webkit-linear-gradient(right, #d000b5, #434ae3);
background: -o-linear-gradient(right, #d000b5, #434ae3);
background: linear-gradient(to left, #d000b5, #434ae3);
外发光 box-shadow: 0 0 10px #1af0df;

当输入框的值发生变化

obj.oninput=function(){}
oninput="fn()"

input事件 oninput="huansuan()" 当输入框输入时

<input type='text' oninput='huansuan()'>

文字截断

p{
  　display: -webkit-box;
　　-webkit-box-orient: vertical;
　　-webkit-line-clamp: 2; /*两行*/
　　overflow: hidden;  
}

转整型

parseInt()

转浮点数

parseFloat()

取两位小数

var val = 1.26533；
var s_val = Math.floor(val*100)/100

四舍五入的情况留两位小数

var num =2.446242342;
num = num.toFixed(2); // 输出结果为 2.45

input 禁止输入

readonly="readonly" //只读可复制，颜色不会改变
disabled="disabled" //被禁用的 input 元素可复制，不能接收焦点,设置后文字的颜色会变成灰色

a标签返回上一页

<a href="javascript;" onclick="javaScript:history.go(-1)>

//window各种方法

window.location.href="user.html" //页面跳转
window.location.reload(); //刷新当前页面
parent.location.reload(); //刷新父亲对象（用于框架）
opener.location.reload(); //刷新父窗口对象（用于单开窗口）
top.location.reload(); //刷新最顶端对象（用于多开窗口）
<a href="javascript:location.reload()">刷新当前页面</a>
<a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a>

定时器（只执行一次）

setTimeout(funcName,500);

定时器（循环执行）

s1=setInterval(funcName,500);

超时器（停止循环）

clearInterval(s1);

文字满了才换行，不会因为是不是单词换行

p{
  word-break: break-all;  
}

段落首航缩进

p{
　　text-indent:50px;
}

marquee ios不流畅问题

给滚动元素上添加：

overflow-y: auto; 
-webkit-overflow-scrolling : touch;

html+css+js 提示笔记

猜你喜欢