Web-案例整合（一）

最新推荐文章于 2022-07-05 12:48:09 发布

Half_orc

最新推荐文章于 2022-07-05 12:48:09 发布

阅读量511

点赞数 1

本文链接：https://blog.csdn.net/Half_orc/article/details/79684639

版权

1. 输入的若为数字输出其平方

function isNumber(num){
    if(typeof(num)==='number'){  //注意number首字母为小写
        console.log(num*num)
    }else{
        console.log('无法计算')
    }
}

isNumber(2)  //4

2.输入的若为字符串转化为数字输出其平方

function changeNumber(numb){
    if(typeof(numb)==='Number'){
        console.log(numb*numb)
    }else if(typeof(parseInt(numb))==='number'){
        console.log(numb*numb)
    }else{
        console.log('不可计算')
    }
}

changeNumber('123')

3.创建100个button并命名点击弹出对应名称

<script>
        for(var i=0;i<100;i++){
            var btn= document.createElement('button')
            btn.innerText='按钮'+i
            document.body.appendChild(btn)
        }
        var btns=document.getElementsByTagName('button')
        for(var i=0;i<btns.length;i++){
            //btns[i].index=i
            btns[i].onclick=function(){
                //this 指的是触发事件的元素
                alert(this.innerText)
            }
        }
    </script>

这里写图片描述

4.点击开始时页面任意位置出现任意大小的图片点击图片消失

var timer;
    function imgStart(){
        timer= setInterval(function(){
        var img=document.createElement('img');
        img.src='../imgs/1.jpg'
        img.width=Math.random()*450+50
        img.style.top=Math.random()*400+50+'px'
        img.style.left=Math.random()*1000+50+'px'
        document.body.appendChild(img)
        delImg()
        },3000)
    }
    imgStart()
        var imgs = document.getElementsByTagName('img')
            for(var i=0;i<imgs.length;i++){
                imgs[i].onclick=function(){
                    document.body.removeChild(this)
                }
            }
        }

这里写图片描述

5.在ul中添加li

<body>
    <ul>
        <li>1  <button>删除</button> </li>
    </ul>
    <input/> <button onclick="addItem()">确定</button>
    <script>
        function addItem () {
            var ul = document.getElementsByTagName('ul')[0];
            var  val = document.getElementsByTagName('input')[0].value

            var li = document.createElement('li')
            li.innerHTML = val + '&nbsp;&nbsp;<button>删除</button>';
            ul.appendChild(li)
            document.getElementsByTagName('input')[0].value = ''
            del()
        }
        function del () {
            var ul = document.getElementsByTagName('ul')[0];
            var btns = ul.getElementsByTagName('button'); 

            for (var i=0;i<btns.length;i++) {
                    btns[i].index = i; 
                    btns[i].onclick=function() {

                        var li = document.getElementsByTagName('li')[this.index];
                        ul.removeChild(li)
                    }
            }
        }

        del()

    </script>

6.控制图片大小

<body>
    <div>
       <input type="range" onchange="rangeChange(this)" min="10" max="1000" >
    </div>
    <img src="../../imgs/1.jpg" alt="">

    <script>
        var img = document.querySelector('img')
        function rangeChange(obj){
            img.width=obj.value
            console.log(img.width)
        }
    </script>
</body>
```![这里写图片描述](https://img-blog.csdn.net/20180325215151169?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hhbGZfb3Jj/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)

7.storage实例





<div class="se-preview-section-delimiter"></div>

账号：

密码：

去登录

    <div style="margin-top:800px">
       账号：<input type="text" name="user" class="ipt1"><br/>
       密码：<input type="password" class="ipt2">
    </div>
    <button class="button">登录</button>
    <a href="" name="note"></a>

<script>
    var btn = document.querySelector('button')
    btn.onclick = function(){
        var str = document.querySelector('input').value
        var pass = document.getElementsByTagName('input')[1].value
        localStorage.setItem('user',str)
        localStorage.setItem('password',pass)
        console.log(localStorage.getItem('user'))
    }


    var ipt1 = document.querySelector('.ipt1')
    var ipt2 = document.querySelector('.ipt2')
    var button = document.querySelector('.button')
    button.onclick = function(){
        if(localStorage.getItem('user') == ipt1.value && (localStorage.getItem('password') == ipt2.value)){
            alert('登录成功')
        }else{alert('账号或密码输入不正确')}
    }

</script>

“`