0%

Html和Css及Js错误常用集合

car

Photo by Julian Hochgesang on Unsplash

Html

本地网站html图片或链接,跳过,隐藏,,删除,禁用referer

1
2
3
4
5
6
7
8
9
10
11
12
<meta name="referrer" content="never">
值的解释
never
always
origin
default
1.如果 referer-policy 的值为never:删除 http head 中的 referer;
2.如果 referer-policy 的值为default:如果当前页面使用的是 https 协议,而正要加载的资源使用的是普通的 http 协议,则将 http header 中的 referer 置为空;
3.如果 referer-policy 的值为 origin:只发送 origin 部分;
4.如果 referer-policy 的值为 always:不改变http header 中的 referer 的值,注意:这种情况下,如果当前页面使用了 https 协议,而要加载的资源使用的是 http 协议,加载资源的请求头中也会携带 referer。
————————————————
参考链接:https://blog.csdn.net/weixin_43627766/java/article/details/90311889

如何禁止注册表单的自动填写邮箱、密码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
语法
<input autocomplete="on|off">
属性值
值 描述
on 默认。规定启用自动完成功能。
off 规定禁用自动完成功能。
实例
启用自动完成功能的 HTML 表单(其中一个输入字段禁用了自动完成):
<form action="demo_form.html" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
————————————————
参考链接:https://www.runoob.com/tags/att-input-autocomplete.html

Css

文字水平居中

1
<div style="text-align: center;">文字水平居中</div>

文本垂直水平居中

1
<div style="width:200px;height:100px;line-height: 100px;">文本垂直水平居中</div>

div居中的几种方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
/*绝对定位和0*/
.box{
width:50%;
height: 50%;
position: absolute;
background:red;
margin: auto;
top:0;
bottom:0;
left:0;
right:0;
}
/*flex布局*/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆</title>
<style type="text/css">
html{width: 100%;height: 100%;} /*整个页面的居中*/
body{
width: 100%;
height: 100%;
display: flex; /*flex弹性布局*/
justify-content: center;
align-items: center;
}
#login{
width: 300px;
height: 300px;
border: 1px black solid;
display: flex;
flex-direction: column; /*元素的排列方向为垂直*/
justify-content: center; /*水平居中对齐*/
align-items: center; /*垂直居中对齐*/
}
</style>
</head>
<body>
<div id="login">
<h1>登陆</h1>
<input type="text"><br>
<input type="password"><br>
<button>确定</button>
</div>
</body>
</html>
————————————————
参考链接:https://www.cnblogs.com/jing-tian/p/10969887.html

改变input框中placeholder颜色的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
input::-webkit-input-placeholder { /* WebKit browsers 适配谷歌 */
color: #BDCADA;
}
input:-moz-placeholder { /* Mozilla Firefox 4 to 18 适配火狐 */
color: #BDCADA;
}
input::-moz-placeholder { /* Mozilla Firefox 19+ 适配火狐 */
color: #BDCADA;
}
input:-ms-input-placeholder { /* Internet Explorer 10+ 适配ie*/
color: #BDCADA;
}
————————————————
参考链接:https://blog.csdn.net/zeyu1021/article/details/44563393

删除超链接A标签下划线

1
2
3
4
5
6
a:link,a:visited{
text-decoration:none; /*超链接无下划线*/
}
a:hover{
text-decoration:underline; /*鼠标放上去有下划线*/
}

css3圆角

1
2
border-radius:上 右 下 左;
border-radius: 15px 50px 30px 5px:

css3盒子阴影

1
2
3
4
5
6
7
8
9
10
11
值	说明
h-shadow 必需的。水平阴影的位置。允许负值
v-shadow 必需的。垂直阴影的位置。允许负值
blur 可选。模糊距离
spread 可选。阴影的大小
color 可选。阴影的颜色。在CSS颜色值寻找颜色值的完整列表
inset 可选。从外层的阴影(开始时)改变阴影内侧阴影

box-shadow: 10px 10px 5px #888888;
————————————————
参考链接:https://www.runoob.com/cssref/css3-pr-box-shadow.html

rgba

1
2
3
4
5
6
7
8
值	描述
red 定义红色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。
green 定义绿色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。
blue 定义蓝色值,取值范围为 0 ~ 255,也可以使用百分比 0% ~ 100%。

alpha - 透明度 定义透明度 0(透完全明) ~ 1(完全不透明)
————————————————
参考链接:https://www.runoob.com/cssref/func-rgba.html

Js

类型转换,Number() 转换为数字, String() 转换为字符串, Boolean() 转化为布尔值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
//查看类型
// typeof 操作符来查看 JavaScript 变量的数据类型
typeof "John" // 返回 string
typeof 3.14 // 返回 number
typeof NaN // 返回 number
typeof false // 返回 boolean
typeof [1,2,3,4] // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof new Date() // 返回 object
typeof function () {} // 返回 function
typeof myCar // 返回 undefined (如果 myCar 没有声明)
typeof null // 返回 object

// constructor 属性返回所有 JavaScript 变量的构造函数。
"John".constructor // 返回函数 String() { [native code] }
(3.14).constructor // 返回函数 Number() { [native code] }
false.constructor // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor // 返回函数 Array() { [native code] }
{name:'John', age:34}.constructor // 返回函数 Object() { [native code] }
new Date().constructor // 返回函数 Date() { [native code] }
function () {}.constructor // 返回函数 Function(){ [native code] }

//将数字,布尔值转换为字符串
// 全局方法 String() 可以将数字转换为字符串。
// 该方法可用于任何类型的数字,字母,变量,表达式:
//实例
String(x) // 将变量 x 转换为字符串并返回
String(123) // 将数字 123 转换为字符串并返回
String(100 + 23) // 将数字表达式转换为字符串并返回
String(false) // 返回 "false"
String(true) // 返回 "true"
Date() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)
String(new Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

//将数字,布尔值,日期转换为字符串
x.toString()
(123).toString()
(100 + 23).toString()
false.toString() // 返回 "false"
true.toString() // 返回 "true"
(new Date()).toString() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

//方法 描述
toExponential() 把对象的值转换为指数计数法。
toFixed() 把数字转换为字符串,结果的小数点后有指定位数的数字。
toPrecision() 把数字格式化为指定的长度。

//Date方法
//方法 描述
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 197011 日至今的毫秒数。

//将字符串转换为数字
Number("3.14") // 返回 3.14
Number(" ") // 返回 0
Number("") // 返回 0
Number("99 88") // 返回 NaN

//方法 描述
parseFloat() 解析一个字符串,并返回一个浮点数。
parseInt() 解析一个字符串,并返回一个整数。

//将布尔值转换为数字
//全局方法 Number() 可将布尔值转换为数字。
Number(false) // 返回 0
Number(true) // 返回 1

//将日期转换为数字
// 全局方法 Number() 可将日期转换为数字。
d = new Date();
Number(d) // 返回 1404568027739

// 日期方法 getTime() 也有相同的效果。
d = new Date();
d.getTime() // 返回 1404568027739

————————————————
参考链接:https://www.runoob.com/js/js-type-conversion.html

JavaScript 刷新当前页面

1
2
3
4
5
6
7
8
location.reload();

window.location.replace("https://nobige.cn")

//页面自动刷新:把如下代码加入<head>区域中,content为要等待刷新的秒数
<meta http-equiv="refresh" content="5">
————————————————
参考链接:https://www.runoob.com/w3cnote/js-refresh-current-page.html

JavaScript获取时间戳与时间戳转化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
Javascript 获取当前时间戳(毫秒级别):
第一种方法:
var timestamp1 = Date.parse( new Date());
结果:1470220594000

第二种方法:
var timestamp2 = ( new Date()).valueOf();
结果:1470220608533

第三种方法:
var timestamp3 = new Date().getTime();
结果:1470220608533
第一种获取的时间戳是精确到秒,第二种和第三种是获取的时间戳精确到毫秒。
获取指定时间的时间戳:
new Date("2016-08-03 00:00:00");

时间戳转化成时间:
function timetrans(date){
var date = new Date(date*1000);//如果date为13位不需要乘1000
var Y = date.getFullYear() + '-';
var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
var m = (date.getMinutes() <10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
var s = (date.getSeconds() <10 ? '0' + date.getSeconds() : date.getSeconds());
return Y+M+D+h+m+s;
}
————————————————
参考链接:https://segmentfault.com/a/1190000006160703

JS设置CSS样式的几种方式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//1. 直接设置style的属性  某些情况用这个设置 !important值无效
如果属性有'-'号,就写成驼峰的形式(如textAlign) 如果想保留 - 号,就中括号的形式 element.style['text-align'] = '100px';
element.style.height = '100px';

//2. 直接设置属性(只能用于某些属性,相关样式会自动识别)
element.setAttribute('height', 100);
element.setAttribute('height', '100px');

//3. 设置style的属性
element.setAttribute('style', 'height: 100px !important');

//4. 使用setProperty 如果要设置!important,推荐用这种方法设置第三个参数
element.style.setProperty('height', '300px', 'important');

//5. 改变class 比如JQ的更改class相关方法
// 因JS获取不到css的伪元素,所以可以通过改变伪元素父级的class来动态更改伪元素的样式
element.className = 'blue';
element.className += 'blue fb';

//6. 设置cssText
element.style.cssText = 'height: 100px !important';
————————————————
参考链接:https://www.cnblogs.com/LiuWeiLong/p/6058059.html

Layui

layui清空,重置表单数据的数据

1
layui.form.render();