【前端11】两个数的置换、浮点数取整、表格插入、内嵌页、旋转

本文链接：https://blog.csdn.net/u010263423/article/details/101196797

文章目录

杂项

杂项

两个数的置换

在算法里呢！

取整（骚操作）

取反取反

var a = 1.999;
    /*取整*/
console.log(~~a);

表格中插入

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

<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

//这里做几个按钮切换网页的效果
<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>

旋转

有几个

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