JS基础函数演示及JS小练习

order libra

已于 2023-10-19 17:02:12 修改

阅读量71

点赞数

文章标签： javascript 前端开发语言网络安全学习方法

于 2023-10-19 15:52:50 首次发布

本文链接：https://blog.csdn.net/qq_58683895/article/details/133928592

版权

JS基础函数演示及JS小练习

JS基础函数演示

自定义函数

函数（Function），有时也被称为方法（Method），或者程序（Procedure）。是一段预定义好的，并且可以被反复使用的代码块，其中可以包含多条可执行语句。

使用关键字function 定义一个函数。在定义函数的时候，要明确函数的主要功能。函数名的定义规则与标识符（变量名）一致，大小写敏感。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    x<input type="text" id="zzz" value="">
    y<input type="text" id="yyy" value="">
    <button onclick="addtest()">求和</button>
    <script>
        
        function addtest(x,y){
            var x=document.getElementById("zzz");
            var y=document.getElementById("yyy");
            document.write(parseInt(x.value)+parseInt(y.value));
        }
    

    </script>
</body>
</html>

document.write()

在页面中输出相关字符串。可以输出HTML 标签，浏览器可以直接渲染。

<script>
     var s = "My name is <span style='color:pink;'>order</span>";
     document.write(s);
</script>

console.log()

在控制台中输出相关内容

<script>
      console.log("My Name is order");
</script>

alert()

弹出一个警告框

alert("666");

confirm()

确认框，返回false 或true

confirm("choose");

prompt()

输入框，可以捕获用户的输入

prompt("please");

eval()

将字符串当做JS 代码来执行

var s = "document.write('My Name is order!');";
eval(s);

substr()

substr(x, y)，x 代表字母的偏移量，y 代表取几个字母

var username = 'order';
var tt = username.substr(1,3);
console.log(tt);

JS小练习

学生成绩评级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS</title>
</head>
<body>
    <script>
        var n=prompt("请输入成绩:");
        if(n>=0 && n<=30){
            document.write("出院");
        }else if(n>30 && n<=60){
            document.write("keep hardworking");

        }else if(n>60 && n<=80){
            document.write("pretty good");
        }else if(n>80 && n<=100){
            document.write("毕业");
        }else{
            alert("wrong,retry");
        }
   
    </script>
</body>
</html>

99乘法表

<html>
    <head>
        <meta charset="utf-8">
        <title>99乘法表</title>
    </head>
    <body>
        <script>
            document.write("99乘法表")
            document.write("<table border = 2>")

            for(var i = 1;i <= 9;i++){
                document.write("<tr>")

                for(var j = 1;j <= i;j++){
                    document.write("<td> " + j + " * " + i + " = " + j * i + "</td>")
                }
            document.write("</tr>")
            }
            document.write("</table>")
        </script>
    </body>
</html>

输出1-10之间的偶数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        for(var i=1;i<=10;i++){
            if(i%2==0){
                document.write(i);
                document.write("<br>");
            }
            
        }
    </script>
</body>
</html>

AJAX异步练习
在这里插入图片描述

访问test
在这里插入图片描述

点击获取五秒后获取flag值
在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      function getit(){

   
        var req = new XMLHttpRequest();
        req.open('get','http://10.4.7.128/JS/flag.php',true);
        req.send();
        req.onreadystatechange = function(){
            if(req.readyState == 4 && req.status == 200){
              document.getElementById('txt').value = req.responseText;
            }
        }
    }
    </script>
</head>
<body>
   <textarea name="" id="txt" cols="30" rows="10"></textarea>
   <button onclick="getit()">获取</button>
</body>
</html>


<?php
sleep(5);
?>
flag{0e5yt89u4h1j5n6hj6r0k1m}

order libra

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫