IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 1+X Web前端(初级)实操题考试样题(含答案)01 -> 正文阅读

[JavaScript知识库]1+X Web前端(初级)实操题考试样题(含答案)01

一、题目要求

阅读下列说明、效果图和代码,进行静态网页开发,填写(1)至(12)代码。

二、说明

用html+css+js制作了一个简易时钟效果图如5-1,可以通过获取当前时间实时更新时钟的刻度及时间显示。

项目名称为clock,包含首页clock.html、css文件夹、js文件夹,其中,css文件夹包含style.css文件; js文件夹包含script.js。

三、效果图

在这里插入图片描述

四、代码填空

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>clock</title>

<link rel="stylesheet" href="css/style.css" type="text/css" />

</head>
<body>

<div class="container">
	
	<div class="clock">
		<div id="date" class="date box"></div>
		<div class="clock-face">
			<div class="marker twelve"></div>
			<div class="marker three"></div>
			<div class="marker six"></div>
			<div class="marker nine"></div>
		<div id="minute-hand" class="hand minute-hand"></div>
		<div id="hour-hand" class="hand hour-hand"></div>
		<div id="second-hand" class="hand second-hand"></div>
		<div id="centre" class="centre"></div>
		<div id="digital-time" class="digital-time box"></div>
		</div>
	</div>
	
</div>

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

</body>
</html>

script.js

//声明一个7个长度的数组days
__(1)__
days[0]= '星期日';
days[1]= '星期一';
days[2]= '星期二';
days[3]= '星期三';
days[4]= '星期四';
days[5]= '星期五';
//往数组days后面添加一个元素,值为星期六;
__(2)__
var dateDisplay = document.getElementById('date');
var hourHand = document.getElementById('hour-hand');
var minuteHand = document.getElementById('minute-hand');
var secondHand = document.getElementById('second-hand');
var digitalTime = document.getElementById('digital-time');

var clock = function() {
	//获取当前时间
	var timeNow = __(3)__;
	
	var day = timeNow.getDay();
	dateDisplay.innerHTML = days[day];
	
	//获取当前时间的秒
	var seconds =__(4)__;
	var sRot = seconds * 6 - 90;
//获取当前时间的分钟
	var minutes = __(5)__;
	var mRot = (minutes * 6) + (seconds / 10) - 90;
	
	//获取当前时间的小时
	var hours = __(6)__;
	var hRot = (hours % 12 * 30) + (minutes / 2) - 90;
	
	hourHand.style.transform = "rotate("+hRot+"deg)";
	minuteHand.style.transform = "rotate("+mRot+"deg)";
	secondHand.style.transform = "rotate("+sRot+"deg)";
	//给digitalTime的内容赋值
	digitalTime.__(7)__= format(hours)+":"+format(minutes)+":"+format(seconds);
	
}

function format(num) {
	//三元运算符,如果小于10则在num前面加个0,否则返回num
	return __(8)__;
}

(function run() {
	//调用clock方法
	__(9)__;
	//定义定时器1秒后执行调用自己
	__(10)__(function() { __(11)__(); }, __(12)__);
})();

五、参考答案

(1)var days=new Array(7);
(2)days.push(‘星期六’);
(3)new Date()
(4)timeNow.getSeconds()
(5)timeNow.getMinutes()
(6)timeNow.getHours()
(7)innerHTML
(8)num<10?(“0”+num):num
(9)clock()
(10)setTimeout
(11)run
(12)1000

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-06-01 15:07:38  更:2022-06-01 15:11:30 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 17:22:41-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码