JS小案例

最新推荐文章于 2024-11-05 15:26:40 发布

芜湖芜湖

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量112

点赞数

文章标签： javascript servlet 前端

本文链接：https://blog.csdn.net/tonysxiaobao/article/details/126573904

版权

1、通过请求百度的接口，模拟请求的时间，如果浏览器（谷歌）出现了：No 'Access-Control-Allow-Origin'这种错误，说明浏览器需要降级点击浏览器鼠标右键属性：在地址的最后面空格再添加--disable-web-security --user-data-dir=c:\

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div id="box">
            
        </div>
        <script type="text/javascript">
            var box = document.getElementById('box');
            // 1.声明
            var xhr=new XMLHttpRequest();
            // 2.发射器(参数1：发送数据的方式，参数2：接口地址，参数3：false(同步),true(异步))
            xhr.open('get','http://wwww.baidu.com',true);
            // 3.设置请求头类型
            //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            // 4.发送数据
            xhr.send();
            // 5.状态
            box.innerHTML='加载中...'
            xhr.onreadystatechange=function(){
                setInterval(function(){
                if(xhr.status==200&&xhr.readyState==4){
                    //(readyState)五种准备状态 0:未发送 1:已发送 2:已收到 3:正在处理 4:处理结束
                    //(status)三种结果状态 200:成功 0:失败 404:服务器未找到
                    box.innerHTML='加载完毕'
                }    
                },1000);
            }
            
        </script>
    </body>
</html>

2、通过event.clientX和event.clientY来获取鼠标移动的坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动图片</title>
    <style>
        img{
            position: absolute;
            top:0px;
            left: 0px;
        }
    </style>
</head>
<body>

<img id="light" src="img/69.png">

<script>
    imgobj=document.getElementById('light');
    //document.οnmοusemοve=function(){
    //    document.title='你还好吗';
    //}
    //document.οnmοusemοve=function(event){
    //    x=event.clientX;
    //    y=event.clientY;
    //    document.title=x+"-"+y;
    //}
    document.onmousemove=function(event){
        x=event.clientX;
        y=event.clientY;
        imgobj.style.top=x+"px";
        imgobj.style.left=y+"px";
    }
    
</script>
</body>
</html>

3、接收用户输入的用户名和密码

<script>
        var user = prompt('请输入用户名')
        var password = prompt('请输入密码')
        while (user != 'admin' && password != '123456') {
            alert('账号或者密码错误，请重新输入')
            var user = prompt('请输入用户名')
            var password = prompt('请输入密码')
        }
        alert('登陆成功' +'当前用户名是' + user +  '当前密码是' + password)

    </script>