avatar

目录
【前端11】国庆后的复习:两个数的置换、浮点数取整、表格插入、内嵌页、旋转

国庆后的复习

两个数的置换

在算法里呢!


取整 (骚操作)

取反取反

Javascript
1
2
3
var a = 1.999;
/*取整*/
console.log(~~a);

表格中插入

前提:body 中已经写好了 tr 和 td
重要知识点:

Javascript
1
2
3
4
5
6
7
8
9
10
< script>
for(var i = 0;i < $("tr").length;i++){
var obj = Object.keys(arr[i]);
/*tr[0].children.length();这个是找到此节点中的所有元素*/
for(var j = 0;j < $("tr")[i].children.length;j++){
/*这个是Object.keys(obj) 这个是提取出来所有 key 并且是数组*/
$("tr")[i].children[j].innerText = arr[i][obj[j]];
}
}
< /script>

iframe内嵌页

a 标签相类似,最重要的属性还是 src
frameborder 规定是否显示框架周围的边框,值为 1 或 0

html
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
//这里做几个按钮切换网页的效果
< body>
< div class="one">
< button>change0< /button>
< button>change1< /button>
< button>change2< /button>
< /div>
< iframe src="" frameborder="0" width="100%" height="560">< /iframe>
< div class="two">< /div>
< /body>

< script>
var btn = document.querySelectorAll("button");
var ifr = document.querySelector("iframe");
var arr = ["demo1.html","demo2.html","https://www.baidu.com"];
btn[0].onclick = function () {
ifr.src = arr[0];
};
btn[1].onclick = function () {
ifr.src = arr[1];
};
btn[2].onclick = function () {
ifr.src = arr[2];
}
< /script>

旋转

有几个

html
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
< head>
< meta charset="UTF-8">
< title>旋转< /title>
< style>
.box{
width: 300px;
height: 300px;
position: absolute;
top: 50%;
left: 50%;
border-radius: 10px;
transform: translate(-50%,-50%);
}
.item{
width: 300px;
height: 300px;
position: absolute;
left: 0;
top: 0;
border-radius: 10px;
/*背面隐藏*/
backface-visibility: hidden;

cursor: pointer;
/*只要变化的就能设置,比如:宽高透明度等
设置多个就用all*/
transition: transform 3s;
}
.div1{
background:-webkit-linear-gradient(orange,red) no-repeat;
transform: rotateY(180deg);
}
.div2{
background:-webkit-linear-gradient(#6441A5,#2a0845) no-repeat;
}
< /style>
< /head>

< body>
< div class="box">
< div class="div1 item">< /div>
< div class="div2 item">< /div>
< /div>
< /body>

< script>

var div1 = document.querySelector(".div1");
var div2 = document.querySelector(".div2");
div1.onclick = function () {
div1.style.transform = "rotateY(180deg)";
div2.style.transform = "rotateY(0deg)";
};
div2.onclick = function () {

div2.style.transform = "rotateY(180deg)";
div1.style.transform = "rotateY(0deg)";
}
< /script>
文章作者: Lovely Ruby
文章链接: https://wangzhongqing.xyz/p/5660.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Ruby の いえ
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论