JavaScript Web API案例2

图片放大与缩小

<button id="big">放大</button>
<button id="small">缩小</button>
<img src="./images/1.jpg" id="tu">
<script>
    let big = document.querySelector('#big')
    let small = document.querySelector('#small')
    let tu = document.querySelector('#tu')
    
    let width = 160
    big.onclick = function () {
        width += 50
        tu.style.width = `${width}px`
    }
    small.onclick = function () {
        width -= 50
        tu.style.width = `${width}px`

    }
</script>

点击切换验证码

<b style="font-size:20px;">点击生成随机验证码</b>
<div>

</div>
<script>
    let div = document.querySelector('div')
    div.onclick = function () {
        function getNum() {
            let num = Math.floor(Math.random() * (9999 - 1000 + 1)) + 1000
            return num
        }            
        div.innerHTML = getNum()
    }
</script>

操作表格

<table border="1">
    <thead>
        <tr>
            <th>用户名</th>
            <th>密码</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            
        </tr>
    </tbody>

</table>
<button>添加</button>

<script>
    let tbody = document.querySelector('tbody')
    let tr = tbody.querySelectorAll('tr')
    let btn = document.querySelector('button')

    btn.onclick = function(){
        for(let i=0;i<tr.length;i++){
            let tr1 = document.createElement('tr')
            tbody.appendChild(tr1).innerHTML = `<td><input type='text'></td><td><input type='password'></td><td><button>确定</button></td>`
        }    
    }
</script>

禁止选中文字、禁用右键菜单栏

这是一段文字

<script>
    document.addEventListener('contextmenu',function(e){
        e.preventDefault();
    })

    document.addEventListener('selectstart',function(e){
        e.preventDefault();
    })

</script>