潭州课堂25班：Ph201805201 周五 (课堂笔记)

小三角：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border-top:  30px solid transparent;            /**透明色*/
            border-right: 30px solid gray;
            border-bottom: 30px solid transparent ;         /**透明色*/
            border-left: 30px solid transparent;
            display: inline;block;                          /*块级拥有行类特性*/
        }
        div:hover{
            border: 30px solid transparent;
            border-left: 30px solid navy;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

控制背景图移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            height: 350px;
            width: 350px;
            background: url("21.jpg") no-repeat;        /* no-repeat 不平铺*/
        }
    </style>
</head>
<body>
    <div></div>
    <p>
        <input type="button" value="上">
        <input type="button" value="下">
        <input type="button" value="左">
        <input type="button" value="右">
    </p>

    <script>
        var btn = document.getElementsByTagName('input');
        var box = document.getElementsByTagName('div')[0];
        btn[0].onclick = function () {
            // console.log('1')
            box.style.backgroundPositionX = '0px';                      // 背景图 X
            box.style.backgroundPositionY = '0px';                   // 背景图 Y
        };
        btn[1].onclick = function () {
            // console.log('2')
            box.style.backgroundPositionX = '0px';                      // 背景图 X
            box.style.backgroundPositionY = '-350px';                   // 背景图 Y
        };
        btn[2].onclick = function () {
            // console.log('3')
            box.style.backgroundPositionX = '-350px';                      // 背景图 X
            box.style.backgroundPositionY = '0px';                   // 背景图 Y
        };
        btn[3].onclick = function () {
            // console.log('4')
            box.style.backgroundPositionX = '-350px';                      // 背景图 X
            box.style.backgroundPositionY = '-350px';                   // 背景图 Y
        }
    </script>
</body>
</html>

　　以这整张为背景，在 div 开4分之1 图大小窗口，控制背景图的 X/Y 的移动，

在输入框中的数据 + 1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="-">
    <input type="text" name="num">
    <input type="button" value="+">

    <script>
        var obj = document.getElementsByTagName('input')
        obj[0].onclick = function () {
            obj[1].value -= 1
        }
         obj[2].onclick = function () {                 // 在 js 中 + 号表示字符串合并，这里 obj[1].value 是 str  
           obj[1].value =  Number(obj[1].value) +1
        }
    </script>
</body>
</html>

潭州课堂25班：Ph201805201 周五 (课堂笔记)

猜你喜欢