前端基础：通过《趣味测试》实战js基本语句

最新推荐文章于 2021-11-25 10:37:01 发布

play_big_knife

最新推荐文章于 2021-11-25 10:37:01 发布

阅读量237

点赞数 1

分类专栏：前端文章标签：前端 JavaScript js

本文链接：https://blog.csdn.net/play_big_knife/article/details/117111571

版权

前端专栏收录该内容

18 篇文章 6 订阅

订阅专栏

前端基础：通过《趣味测试》实战js基本语句

随着时代的发展及压力的增大，测试类的游戏受到了一些人的青睐，工作闲暇之余测试一下自己的绝望指数，自己迷茫的时候测试一下自己何去何从娱乐一下自己的心情，很多个测试类的游戏标题也应运而生。如下图所示。

一、项目说明

该项目是对js基本语句的应用，如alert、prompt、document.write等，实现的项目是回答一些趣味的问题，最终输出到网页中的是对问题的趣味解读。

二、项目效果图展示

一般网页类的应用都需要布局页面，但这个项目只需要把用户回答的问题回写到网页上，不需要页面的布局效果。提问问题的效果图如下图所示。

问题回答后网页中显示的效果图如下图所示。

三、JavaScript介绍

JavaScript，简称“JS”，是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

谈到JavaScript，不得不提到ECMAScript，描述了JavaScript语言的语法和基本对象。基本对象主要包括：文档对象模型（DOM），描述处理网页内容的方法和接口。浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。

1、JavaScript的引入方式

（1）使用直接编写的方式引入

<script>
    alert('hello yuan')
</script>

这里的alert表示警示框，弹出框。

（2）导入文件

<script src="hello.js"></script>

2、JS的变量声明

JavaScript在声明变量时不用声明变量类型，全部使用var关键字即可。如下面的语句。

var b;
var b=4;

上面两句都是用var关键字来定义变量b。

一行可以声明多个变量.并且可以是不同类型

var username="yuan", password="admin", age=20;

3、JavaScript的数据类型

number     -----  数值
boolean    -----  布尔值
string     -----  字符串
undefined  -----  undefined
null       -----   null 空
object     -----  对象
array      -----  数组
function   -----  function函数

四、JavaScript的基本语句

1、alert ()提示框语句

alert()方法是显示一条弹出提示消息和确认按钮的警告框。

需要注意的是：alert()是一个阻塞的函数，如果我们不点确认按钮，后面的内容就不会加载出来。

如下面的代码。

<html>
    <head>
        <meta charset="utf-8">
        <script>
            alert("弹出一个提示")
        </script>
        <title></title>
    </head>
    <body>
    </body>
</html>

这段代码中标签中定义<script>标签，在script标签中使用alert提示框语句，代码输出结果如下图所示。

2、confirm()

confirm()方法是显示一个含有指定消息和确认和取消按钮的确认框。

如果点击"确定"返回true，否则返回false。

如下面的代码。

<html>
    <head>
        <meta charset="utf-8">
        <script>
            var a=confirm("请确认执行此项操作")
            alert(a)
        </script>
        <title></title>
    </head>
    <body>
    </body>
</html>

代码在<script>标签中使用变量a接收confirm确认框的返回结果，利用alert弹出框显示变量a的值。代码运行时最初在浏览器中显示结果如下。

在上图中点击“确定”后输出结果如下。

3、prompt ()

prompt()方法是显示提示用户进行输入的对话框。

这个方法返回的是用户输入的字符串。

如下面的代码。

<html>
    <head>
        <meta charset="utf-8">
        <script>
            var name=prompt("请输入你的名字","张三"); 
            alert(name)
        </script>
        <title></title>
    </head>
    <body>
    </body>
</html>

代码在<script>标签中使用变量name接收prompt输入框的输入结果，利用alert弹出框显示变量name的值。代码运行时最初在浏览器中显示结果如下。

在输入框中输入新的名字，如“王二”后，在上图中点击“确定”后输出结果如下。

4、document.write()语句

document.write()是Javascript中对document.open()所开启的文档流操作的API方法。

它能够直接在文档流中写入字符串，一旦文档流已经关闭，那么document.write()就会重新运用document.open()打开新的文档流并写入，此时原来的文档流会被清空，已经渲染好的页面就会被覆盖，浏览器将重新构建DOM并渲染新的页面。

如下面的代码：

<html>
    <head>
        <meta charset="utf-8">
        <script>
            document.write("你好，欢迎来到网页的世界")
        </script>
        <title></title>
    </head>
    <body>
    </body>
</html>

代码运行后在网页中的输出如下图所示。

“你好，欢迎来到网页的世界”文字被javascript的document.write方法写入到页面中。

五、《趣味测试》代码

《趣味测试》是典型的顺序结构程序，就是弹出提示框，表示“欢迎进入本程序”，然后不停地利用prompt输入框来获取用户输入的问题答案，把不同的答案用不同的变量来接收，最后调用document.write()方法把文字写到网页中，写入文字的时候也使用了html的标签来限定格式。网页代码在style中定义了网页的背景图片和文字的大小，来提高用户的体验感。

具体代码内容如下。

<html>

<head>

    <title>趣味测试</title>
    <style type="text/css">

        body {
            background-image: url(images/20b8cb0a0e90b428b1351df3.jpg);
        }
        body {
            font-family: 华文新魏;
            font-size: 24px;
        }


    </style>
    <script>


        var xingming=prompt("你叫什么名字","测试游戏")
        var ni=prompt("当你走入一个森林，你希望看到的第一个动物是什么？","测试游戏")
        var ta=prompt("当你走入一个森林，你希望看到的下一个动物是什么？","测试游戏")
        var wuzi=prompt("你继续向森林深处走着，看到一个小屋，你是绕着小屋转转走进去，还是直接推门进去，请输入直接或者绕弯","测试游戏")
        var zuozi=prompt("你走进小屋后，看到了一张桌子，你觉他是方的还是圆的","测试游戏")
        document.write("你的名字叫"+xingming+"<br>");
        document.write("你的前世是"+ni+"<br>");
        document.write("你另一半的前世是"+ta+"<br>");
        document.write("通常情况下，你的做事风格是："+wuzi+",做人风格是："+zuozi+"<br>"+"你与前世相遇的指数是:"+Math.random()*100+"%");




    </script>
</head>


<body>


</body>
</html>

play_big_knife

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
5
评论
前端基础：通过《趣味测试》实战js基本语句

前端基础：通过《趣味测试》实战js基本语句随着时代的发展及压力的增大，测试类的游戏受到了一些人的青睐，工作闲暇之余测试一下自己的绝望指数，自己迷茫的时候测试一下自己何去何从娱乐一下自己的心情，很多个测试类的游戏标题也应运而生。如下图所示。一、项目说明该项目是对js基本语句的应用，如alert、prompt、document.write等，实现的项目是回答一些趣味的问题，最终输出到网页中的是对问题的趣味解读。二、项目效果图展示一般网页类的应用都需要布局页面，但这个项目只需要把用户回答
复制链接

扫一扫