C1任务04-计算机程序逻辑

最新推荐文章于 2023-06-28 18:14:54 发布

AL爱丽

最新推荐文章于 2023-06-28 18:14:54 发布

阅读量1.5k

点赞数 4

本文链接：https://blog.csdn.net/qq_53906718/article/details/119543410

版权

文章目录

挑战

说明

任务

总结

1、挑战

进制及其运算确立了计算机科学中最基本的数据格式、记录方式；掌握了编程语言，工程师就可以让计算机按自己的想法运行程序了。但做到这些这就够了吗？

为什么有些同学虽然找到了工作，但一直都只能做简单的CRUD呢？为什么大厂面试的时候都喜欢考算法？为什么有些开源的中间件能支撑很大的并发流量，而另外一些功能相同的中间件性能却非常差呢？

2 、说明

大多数小公司的工程师需要处理的数据量很少，只要完成业务功能就可以，学不学数据结构和算法没有任何差别。大厂就完全不同了--大厂的工程师可能会面对几千万甚至几亿的注册用户，开发的是TB、PB级别的数据处理系统，需要利用各种中间件整合衔接多个上下游系统--可用性、健壮性、响应速度这些最基本的性能指标是工程师时时刻刻都要关注和解决的问题。一个看似简单的使用ArrayList还是LinkedList的决定，就可能会造成系统几千倍的性能差别--这既是整个计算机科学最让人着迷的地方，也是最能体现思维模式、开发水平、动手能力的领域。

任务详解：（https://mp.weixin.qq.com/s/Gq4rrDNtZQHOVglqpMoNw)

3、任务

任务一：生成图片广告

任务过程：

1、首先，能够用HTML+CSS+JavaScript在页面正中生成一幅广告图片。

2、其次，用JavaScript数组在页面上放置多张广告图片，同时动态计算不同广告位之间的布局，实现水平等间距布局。

3、最后用JavaScript代码实现多张广告图片轮播效果：在页面正中每隔3秒切换不同的广告图片，多张图片轮流显示。

1、生成广告图片

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>广告</title>
<link rel="stylesheet" type="text/css"  />
</head>

<body>
<div class="tupian">
<img src="图片5.jpg" alt="1" width="800" height="400" hspace="325" vspace="150" align="absmiddle" />
</div>
<style type="text/javascript">
</style>
</body>
</html>

.tu{
position:fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
}
img{
max-width:100%;
height:auto;
}/* CSS Document */

生成效果：

2、图片排布

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>广告</title>
<link rel="stylesheet" herf="style.css" >
</head>

<body>
<img src="图片6.jpg" width="200" height="200" alt="2" />
<img src="图片7.jpg" alt="1" width="200" height="200" hspace="100" /><img src="图片8.jpg" alt="3" width="200" height="200" />
<img src="图片5.jpg" alt="4" width="200" height="200" hspace="100" />
<style type="text/javascript">
</style>
</body>
</html>

生成效果：

3、轮播效果

代码：

var address = ["images/图片6","images/图片7"，"images/图片8"，"images/图片5"];
var imgs = document.querySelector("img");//轮播图
var shu= address.length;
var x = 0;
str = function(){
 x++;
 if(x>5){
  x=0;
 }
 imgs.src=address[x];
}
setInterval(str,3600)

4、总结

完成整个任务需要我们掌握HTML+CSS+JavaScript，所以我们要牢牢掌握它。同时在任务过程中，我们要好好完成每一步。以上就是这篇博客的全部内容。

AL爱丽

关注

4
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
C1任务04-计算机程序逻辑

文章目录挑战说明任务总结1、挑战进制及其运算确立了计算机科学中最基本的数据格式、记录方式；掌握了编程语言，工程师就可以让计算机按自己的想法运行程序了。但做到这些这就够了吗？为什么有些同学虽然找到了工作，但一直都只能做简单的CRUD呢？为什么大厂面试的时候都喜欢考算法？为什么有些开源的中间件能支撑很大的并发流量，而另外一些功能相同的中间件性能却非常差呢？2 、说明大多数小公司的工程师需要处理的数据量很少，只要完成业务功能就可以，学不学数据结构和算法没有任何差别。大厂
复制链接

扫一扫