1+X Web前端(初级)实操题考试样题(含答案)01

这篇具有很好参考价值的文章主要介绍了1+X Web前端(初级)实操题考试样题(含答案)01。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、题目要求

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

二、说明

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

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

三、效果图

1+X Web前端(初级)实操题考试样题(含答案)01

四、代码填空

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文章来源地址https://www.toymoban.com/news/detail-490459.html

到了这里,关于1+X Web前端(初级)实操题考试样题(含答案)01的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 低代码开发师中级实操题

    目录 实操题一 1.创建空白应用 2.创建普通表单仓库库存表 3.创建客户信息表 4.创建进货登记表 5.创建出货登记表 6.设置数据联动 1)进货登记表 2)出货登记表数据联动 实操题二 1.提前下载好数据 2.新建空白应用 3.创建表单-员工信息录入名单 4.新建报表-员工详细信息报表

    2024年02月11日
    浏览(31)
  • 【宜搭】低代码开发师高级认证实操题2指导

    知识点: 云原生 宜搭自动化 java 云部署 FaaS连接器配置 流程表单 难度: 中等 在本文中,我将根据题目的每一点要求,对于我在实操过程中遇到的难点进行比较详细的介绍,供大家参考,希望能够对大家有所帮助。 解题步骤: 表单的创建 三个普通表单,密钥维护页 敏感信

    2023年04月13日
    浏览(38)
  • 宜搭低代码高级认证实操题1 todolist

    进行中待办 已完成待办 待办事项 待办事项远程api和变量配置 回调函数 回调函数 页面js 数据绑定表 todoList doneList 动作设置 操作列 顶部操作:新增待办

    2024年04月09日
    浏览(65)
  • 【宜搭】低代码开发师高级认证实操题1难点指导

    难度: 较难 知识点: 远程数据源 表单创建 表格组件使用 js增删改查功能代码编写 在本文中,我将根据题目的每一点要求,对于我在实操过程中遇到的难点进行比较详细的介绍,供大家参考,希望能够对大家有所帮助。 解题步骤: 创建页面 根据要求创建两个普通表单和一

    2024年01月25日
    浏览(34)
  • 前端浏览器缓存知识梳理,前端工程师面试题目和答案

    所谓浏览器缓存其实就是指在本地使用的计算机中开辟一个内存区,同时也开辟一个硬盘区作为数据传输的缓冲区,然后用这个缓冲区来暂时保存用户以前访问过的信息。 浏览器缓存过程:  强缓存,协商缓存。 浏览器缓存位置一般分为四类:  Service Worker–Memory Cache–Di

    2024年04月15日
    浏览(52)
  • 阿里云宜搭低代码开发师(中级)实操题一:仓库库存管理系统

    创建客户信息表 创建进货登记表 创建出货登记表 创建仓库库存表 然后,回到进货登记表的表单,设置数据联动,也就是进货数量加入到仓库库存表对应物品上。 1 2 3 去出货登记表的表单,同理。 1 2 3 OK,大功告成!

    2024年02月17日
    浏览(51)
  • 阿里云宜搭低代码开发师(中级)实操题二:会员住房信息统计系统

    会员信息表 1、首先在“会员信息表”中组建所需的表单元素: 2、在“数据管理”中批量导入提供的Excel数据: 多图混合报表 新建报表,命名为“多图混合报表”: 顶部筛选栏中,新建四个筛选项:小区档次、职业、教育水平、创建时间区间: 新建“人群人数分布图”柱状

    2024年02月07日
    浏览(131)
  • 前端期末考试试题及参考答案(01)

    本文原创作者:谷哥的小弟 作者博客地址:http://blog.csdn.net/lfdfhl ______表示页面中一个内容区块或整个页面的标题。 ______表示页面中一块与上下文不相关的独立内容,比如一篇文章。 CSS的引入方式有3种,分别是行内式、内嵌式和______。 CSS的浮动可以通过______属性进行设置。

    2024年02月08日
    浏览(53)
  • 初级web前端开发工程师的岗位职责描述(合集)

      初级web前端开发工程师的岗位职责描述1 职责: 1. 根据功能需求设计编写页面原型; 2. 前后端联调保证功能流畅; 3. 提高页面易用性、美观提出合理建议。 4、与后台工程师配合开发联调并交付产品; 5、持续优化前端页面体验和访问速度,保证页面精美高效。 任职要求 1、

    2024年02月14日
    浏览(45)
  • Web前端面试题目汇总

    HTML/CSS部分 1、什么是盒子模型? 在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只

    2024年02月10日
    浏览(43)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包