欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

Web前端——JavaScript扩展补充

程序员文章站 2022-05-29 10:19:55
JS补充 document也是windows的一个子对象 a标签点击事件 要想设置点击a标签，执行某种方法，推荐在a标签的herf属性使用JavaScript伪协议，实现点击之后执行的js方法，而不是设置click 例如： windows对象对话框 windows自带的几个弹出对话框方法 可输入内容 ......

js补充

document也是windows的一个子对象

a标签点击事件

要想设置点击a标签，执行某种方法，推荐在a标签的herf属性使用javascript伪协议，实现点击之后执行的js方法，而不是设置click

例如：

alertwin()是一个方法
<a href="javascript:alertwin()">hello</a>

windows对象对话框

windows自带的几个弹出对话框方法

  • 可输入内容的对话框 alert(message)
  • 只含确定按钮的对话框 prompt(message) 返回输入string
  • 含确定和取消的对话框 confirm(message) 返回一个boolean
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>对话框</title>
        <script type="text/javascript">
            function alertwin() {
                alert('信息');
            }
            function promptwin() {
                //prompt()弹出一个输入对话框
                //如果输入,prompt()方法就会返回用户输入信息
                var inputmsg = prompt('请输入名字');
                console.log(inputmsg);
            }
            function confirmmsg(){
                //confirm()返回一个boolean
                var flag = confirm("确定删除？");
                console.log(flag);
            }
        </script>
        
    </head>
    <body>

        <button type="button" onclick="alertwin()">对话框</button>
        <button type="button" onclick="promptwin()">输入对话框</button>
        <button type="button" onclick="confirmmsg()">确认对话框</button>
        <br /><br />
        
    </body>
</html>

location对象

  • location.href = ''; 会使浏览器留下历史记录
  • location.replace(); 浏览器不会留下历史记录
  • location.reload(); 刷新效果

编码和解码uri

function encode_decode() {
        var uri = '19_encodeuri_decodeuri.html?name1=老王&name2=如花&key=jack marry john';
        
        //编码
        var encodeuri1 = encodeuri(uri);
        //结果为name1=%e8%80%81%e7%8e%8b&name2=%e5%a6%82%e8%8a%b1&key=jack%20marry%20john
        console.log(encodeuri1);
        //解码
        var decodeuri1 = decodeuri(encodeuri1);
        console.log(encodeuri1);

}

json工具类

  • stringify json数据转为string
  • parse 把string类型的json数据转为一个object
let json = {empno: 1000, ename: "scott", job: "clerk"};
var stringify = json.stringify(json);
var otherjson = json.parse(stringify);
//通过"."来获取内容
console.log(otherjson.empno, otherjson.ename, otherjson.job);

模拟进度条

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>模拟进度条</title>
        <style>
            .processbar{
                overflow: hidden;/*超出的自动隐藏*/
                width: 800px;
                height: 20px;
                border: 1px solid skyblue;
                border-radius: 5px;
            }
            .block{
                float: left;/*从左到右排列*/
                height: 20px;
                width: 0px;
                background-color: skyblue;
            }
        </style>
        <script>
            var length=0;//进度条的长度
            function startdownload(){

                const processbar =document.queryselector(".processbar");
                let width = math.random()*30;//随机获取宽度
                //创建一个div元素
                let block = document.createelement("div");
                
                length += width;
                
                //当前的进度长度是否大于800
                if(length>800){
                    //获取最后剩余的宽度
                    width =800-(length-width);
                    block.classlist="block";
                    block.style.width = width+"px";
                    processbar.appendchild(block);
                    return;//停止
                }else{
                    block.style.width = width+"px";
                    block.classlist="block";//设置类样式为block
                    processbar.appendchild(block);//添加元素
                    settimeout(startdownload,100);//每400毫秒执行一次startdownload方法
                }
                
            }
            
        </script>
    </head>
    <body>

        <button type="button" onclick="startdownload()">开始下载</button>
        <br /><br />
        <div class="processbar">

        </div>
    </body>
</html>

上一篇： mysql 多表查询

下一篇： Python3 - 字符串

推荐阅读