使用Bootstrap v3 在网页中显示当前时间教程

一、准备工作

首先在网页文件中引入bootstrap的三个文件，分别是jquery、js、css这三个文件

<!--注意这里jquery文件一定要放在最前面-->
<script src="bootstrap/js/jquery-3.4.1/jquery-3.4.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">

二、获取当前时间的两种方法

方法一：

在html文件中随便写一个标签用来存放获取到的时间

<h2>这个标签是用来存放获取到的时间的</h2>

然后开始写JavaScript，首先写一个script标签里面放JavaScript代码的内容

1. 先声明一个获取时间的函数，（在这个函数里面写要执行的语句）
2. 创建一个时间对象
3. 通过.toLocaleString()将本地时间Date对象转换为字符串输出
4. 再声明一个变量里面放一个星期天~星期六的数组，用来获取星期
5. 通过week[date.getDay()]获取当前日期的星期
6. 声明一个名称为str_time的变量将当前的本地时间和获取到的星期组合在一起
7. 为存放时间的标签设置一个id属性
8. 使用dom操作通过getElementById('id名称')方法获取id，将获取到的时间显示在对应id的标签中
9. 在函数体外调用函数
10. 通过setInterval(函数名,时间间隔（以毫秒为单位）)方法设置每多少秒刷新一次数据

<h2 id="date"><!--这个标签是用来存放获取到的时间的--></h2>
<script>
    //获取时间的函数体
	function Time() {
        //存放星期天~星期六的数组，用来获取星期
        var week=['星期天','星期一','星期二','星期三','星期四','星期五','星期六']
		//创建一个时间对象
		var date = new Date();
        //将本地时间Date对象转换为字符串输出
	    var time = date.toLocaleString();
        //获取当前日期的星期
        var date_week = week[date.getDay()];
        //将上面获取到的本地时间和星期组合在一起
        var str_time = "当前时间为："+time+"&nbsp;&nbsp;&nbsp;"+date_week;
        //dom操作通过getElementById('id名称')方法获取id，将获取到的时间显示在对应id的标签中
	    document.getElementById('date').innerHTML = str_time;
    }
    //调用函数
	Time();
    //设置每1000秒刷新一个数据
    setInterval(Time,1000)
</script>

 方法二：

在html文件中随便写一个标签用来存放获取到的时间

<h3 id="time">这个标签是用来存放获取到的时间的</h3>

然后开始写JavaScript，首先写一个script标签里面放JavaScript代码的内容

1. 定义一个数字与日期对应关系的对象
2. 先声明一个获取时间的函数，（在这个函数里面写要执行的语句）
3. 创建一个时间对象
4. 获取完整年份、月份、日期、小时、分钟、秒、日期
5. 使用if判断，如果月份和秒的值小于10，则在月份和秒的值的前面加个0
6. 使用三元函数判断分钟的值是否小于10，如果小于10，则在分钟的值的前面加个0
7. 将获取到的全部时间组合在一起变成一个时间串
8. 使用dom操作将时间串显示在对应的id标签里面
9. 在函数体外调用函数，如果不调用的话会没效果
10. 使用setInterval(函数名,时间间隔（以毫秒为单位）)，设置每多少毫秒刷新一次数据

<h3 id="time"></h3>
<script>
	//定义一个数字与星期对应关系的对象
	const WEEKMAP = {
		0:"星期天",
		1:"星期一",
		2:"星期二",
		3:"星期三",
		4:"星期四",
		5:"星期五",
		6:"星期六"
	};
    //声明一个显示时间的函数体
	function showTime() {
        //创建时间对象
	    var d1 = new Date();
        //获取完整年份
	    var year = d1.getFullYear();
        //获取月份
	    var month = d1.getMonth() + 1;  //注意月份是从0~11
		//使用if判断，如果month的值小于10则在month值的前面加个0
		if (month < 10){month = "0"+month;}
        //获取日期
	    var day = d1.getDate();
        //获取小时
	    var hour = d1.getHours();
        //使用三元运算判断分钟的值是否小于10，如果小于10则在前面加个0
	    var minute = d1.getMinutes() < 10?"0"+d1.getMinutes():d1.getMinutes();
        //获取秒
		var seconds = d1.getSeconds();
        //使用if判断，如果seconds的值小于10则在seconds值的前面加个0
        if (seconds < 10){seconds = "0"+seconds;}
        //获取当前日期对应的星期
	    var week = WEEKMAP[d1.getDay()];
		//将获取到的时间组合在一起，变成一个完整的时间串
	    var strTime = `${year}-${month}-${day} ${hour}:${minute}:${seconds} ${week}`;
        //dom操作，将时间串显示在对应的id标签里面
	    document.getElementById('time').innerHTML = strTime;
	};
    //调用函数，如果不调用的话则会没效果
	showTime();
    //设置每1000毫秒刷新一次数据
    setInterval(showTime,1000)
</script>

总体来说第一个方法比较简单节省代码，第二种方法较第一种方法来说比较复杂