web页面设计实训——3.12

最新推荐文章于 2021-08-03 21:20:16 发布

刺槐。

最新推荐文章于 2021-08-03 21:20:16 发布

阅读量565

点赞数

本文链接：https://blog.csdn.net/zwdm945/article/details/88428107

版权

JavaScript基本语法：

JavaScript是基于对象和事件驱动的客户端脚本语言。

调试：

Chrome浏览器，按F12 按钮。可以弹出调试js的程序框
通过console可以调试js代码。（console.log(“”)）

JavaScript基本语法：

1.脚本的基本结构
2.输入输出语句
3.数据类型
4.变量定义
5.分支语句
6.表达式操作符运算符

需求一：
需求说明：
根据客户时间，输出问候语
简化：根据用户输入的时间给出问候语

1.输入时间
2.用变量存储
3.根据时间判断
4.给用户输出结果
转换：
1.用JS中如何让用户输入数据即输入方法

prompt("请输入时间：")

2.如何存储数据即变量存储

a = prompt("请输入时间：")

3.判断即分支语句

if (a < 12) {

        } else if (a < 18) {

        } else if (a < 24) {

        }

4.如何输出数据即输出方法

document.write("上午好")

总体代码：

<script>
        a = prompt("请输入时间:(eg:下午16点 即输入16）时间为0-24：")
        if (a < 12) {
            document.write("上午好")
        } else if (a < 18) {
            document.write("中午好")
        } else if (a < 24) {
            document.write("晚上好")
        }

    </script>

JavaScript数据类型：

1.布尔类型
2.字符串类型
3.布尔类型
4.字符串类型
5.数值类型
6.null和undefined
7.对象类型
8.function

三大流程语句：

分支语句（单分支和多分钟）
顺序语句
循环语句

document对象：

getElementByID（）可以准确获取文档中指定元素
getElementByName（）
getElementByTagName（）可以获取指定标签名称的所有元素
write（）

变量的命名：

JavaScript中变量的命名规则与其它的语言的命名规则类似，需要遵循以下规则：
变量名必须以字母或下划线开头，后面可以是数字、字母或下划线；
变量名中不能包含不允许使用的特殊字符，例如空格及用于定义运算符的符号等；
变量名严格匹分大小写；
变量名不能使用关键字或保留字；
变量名最好包含变量的类型信息；

JavaScript显示数据：

1.alert(“”) :弹出警告框
2.document.write(“内容”) : 将内容写到HTML页面当中
3.使用innerHTML：将内容写到HTML元素当中
4.console.log(“ 内容”) ：将内容写到浏览器的控制台

需求二：

需求说明：根据客户电脑时间，在指定位置输出问候语（<div>________好</div>）
简化:
1.根据电脑时间，我们需要获取电脑时间，获取时间方法
2.需要变量来存储
3.判断分支语句
4.获取指定div的ID或class。获取元素方法
5.然后用变量存储获取的元素
6.通过元素来添加时间内容

总体代码：

<body>
<div id="one" style="color: #255e95;width: 100px;height: 100px;border: 1px solid red"></div>
<script>
    var date = new Date();
    var hours = date.getHours();
    var text = document.getElementById("one");
    if (hours <= 12) {
        text.innerHTML = "上午好"
    } else if (hours <= 18) {
        text.innerHTML = "下午好"
    } else if (hours <= 24) {
        text.innerHTML = "晚上好"
    }
</script>
</body>

需求三：

需求说明：练习date内置函数

var today = new Date();获取当前时间
        var hh=today.getHours();(获得小时,分钟,秒)
        var mm=today.getMinutes();
        var ss = today.getSeconds();
        document.getElementById("myclock").innerHTML=hh+":"+mm+":"+ss;

总体代码：

<body>
<div id="myclock" style="color: #255e95;"></div>
<script>
    var today = new Date();
    var hh=today.getHours();
    var mm=today.getMinutes();
    var ss = today.getSeconds();
    document.getElementById("myclock").innerHTML=hh+":"+mm+":"+ss;
</script>
</body>