第九周总结

最新推荐文章于 2023-01-15 21:01:28 发布
最新推荐文章于 2023-01-15 21:01:28 发布
阅读量109 收藏
点赞数 1
分类专栏： 总结 文章标签： css html html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51965698/article/details/114791610
版权

总结

  前端考核刚刚结束，发现自身有很多问题。网页制作方面很多能复用的地方都没复用，就硬写，导致代码整体效果不好。JS方面应该多试试写函数和用for循环来简化代码，不经常用函数会导致以后写的不习惯，也会导致代码不够简化。
  https://blog.csdn.net/Flying____fish/article/details/114789389 和这位大佬说的一样，“工欲善其事，必先利其器”。应该用自己顺手的工具，可以提升写代码的速度，也能使逻辑更缜密。
&nesp;&nesp;蓝桥杯马上就要开始了，虽然在寒假期间没怎么练习算法，但是在学校的几天练习真的能感觉到自己的算法有所提升。以前不会的如今也解开了。
&nesp;&nesp;另外在考核期间做了两个3D旋转轮播图。代码奉上：

  • 轮播图一：
    在这里插入图片描述
  • 开启定时器自动旋转
  • 左右切换按钮
    html代码：命名为轮播图.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="轮播图.css">
</head>
<body>
    <table></table>
<div class="cotain_banner">
    <div class="banner">
        <div>
            <h2>小米商城</h2>
            <p>当前时间</p>
            <span class="blackBox mar"></span>
			<span class="fl dian">:</span>
			<span class="blackBox"></span>
			<span class="fl dian">:</span>
			<span class="blackBox"></span>
        </div>
        <div>
            <img src="img/0f5c49925f3a7d5157b8ac7f4f66b34b.webp" alt="" width="auto" height="200">
        </div>
        <div>
            <img src="img/85fe83512254832000635fb15f048df5.webp" alt="" width="auto" height="200">
        </div>
        <div>
            <img src="img/aebcb8f7d8c6ddaa754bfbb701a38cbf.webp" alt="" width="auto" height="200">
        </div>
        <div>
            <img src="img/c7fd00fa846cefaaa73572ea55832854.jpg" alt="" width="auto" height="200">
        </div>
        <div>
            <img src="img/e023dd94c146d0f27f7ae8e98213abff.webp" alt="" width="auto" height="200">
        </div>
    </div>
    <a class="left" href="javascript:;">
        <i></i>
    </a>
    <a class="right" href="javascript:;">
        <i></i>
    </a>
</div>

    <script src="轮播图.js"></script>
</body>
</html>

css代码：命名为轮播图.css

body{
    perspective: 1000px;/*透视效果*/
}
a{
  text-decoration: none;
}
@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?rgq97g');
    src:  url('fonts/icomoon.eot?rgq97g#iefix') format('embedded-opentype'),
      url('fonts/icomoon.ttf?rgq97g') format('truetype'),
      url('fonts/icomoon.woff?rgq97g') format('woff'),
      url('fonts/icomoon.svg?rgq97g#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  i{
    font-family: "icomoon";
    font-style: normal;
  }
.banner{
    width: 300px;
    height:200px;
    margin: 100px auto;
    position: relative;
    transform-style: preserve-3d;/*让父元素里面的盒子以3D效果显示*/
    transition:all 0.3s  linear;/*linear匀速*/
}
.contain_banner{
  width:300px;
  height:200px;
  margin: 0 auto;
	position: relative;
}
.banner div{
	width:300px;
	height:200px;
	position: absolute;
	top: 0;
	left: 0;
}
.banner div:nth-child(1){
  width:450px;
  height:160px;
  margin-top: 10px;
  margin-left: 25px;
  background-color: #f1eded;
  border: 1px solid #ff6700;
	transform: rotateY(0deg) translateZ(500px);/*translateZ使用时要给body添加以上元素*/
    text-align: center;
    color: #ff6700;
    padding: 0 150px;
    box-sizing: border-box;
}
.banner div:nth-child(2){
	
	transform: rotateY(60deg) translateZ(400px);
}
.banner div:nth-child(3){
	
	transform: rotateY(120deg) translateZ(400px);
}
.banner div:nth-child(4){
	
	transform: rotateY(180deg) translateZ(400px);
}
.banner div:nth-child(5){
	
	transform: rotateY(240deg) translateZ(400px);
}
.banner div:nth-child(6){
    
	transform: rotateY(300deg) translateZ(400px);
}
/*轮播图左右按钮*/
.left{
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 40px;
  color: #ff6700;
}
.right{
  position: absolute;
  top: 50%;
  right:0;
  font-size: 40px;
  color: #ff6700;
}
/*当前时间*/
.blackBox{
  display: block;
  width:40px !important;
  height:40px !important;
  background-color: #605751;
  float: left;
  text-align: center;
  line-height: 40px;
}
.fl{
  float: left;
}

js代码：命名为轮播图.js

/*获取轮播图的元素*/
var banner=document.getElementsByClassName("banner")[0];
/*定时器*/
timer();
timert();
/*左右点击*/
var left=document.getElementsByClassName("left")[0];
var right=document.getElementsByClassName("right")[0];
right.onclick=function(){
    clearInterval(timere);
    clearInterval(timer_t);
    index+=60;
    banner.style.transform="rotateY("+index+"deg)";
    timer();
    timert();
}
left.onclick=function(){
    clearInterval(timere);
    clearInterval(timer_t);
    index-=60;
    banner.style.transform="rotateY("+index+"deg)";
    timer();
    timert();
}
/*当前时间*/
var blackBox=document.getElementsByClassName("blackBox");
setInterval(function() {
	var dater = new Date();
	var hours = dater.getHours();
	var minutes = dater.getMinutes();
	var seconds = dater.getSeconds();
	if( minutes < 10) {
		blackBox[1].innerHTML = "0" +  minutes;
	} else {
		blackBox[1].innerHTML =  minutes;
	}
	if(seconds < 10) {
		blackBox[2].innerHTML = "0" + seconds;
	} else {
		blackBox[2].innerHTML = seconds;
	}
	if(hours < 10) {
		blackBox[0].innerHTML = "0" +  hours;
	} else {
		blackBox[0].innerHTML = hours;
	}
	//    miao.innerHTML=60-seconds;
}, 1000);
/*定时器function*/
var index=0;
var timere;
var timer_t;
function timer(){
    timere=setInterval(function(){
        index+=60;
        banner.style.transform="rotateY("+index+"deg)";
        clearInterval(timere);
    },2000);
}
function timert(){
    timer_t=setInterval(function(){
        banner.style.transform="rotateY("+index+"deg)";
        timer();
    },4000);
}
  • 轮播图二
    html文件：命名为轮播图.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图</title>
    <link rel="stylesheet" href="轮播图.css">
</head>
<body>
    <table></table>
<div class="cotain_banner">
    <div class="banner">
        <div>
            <h2>小米商城</h2>
            <p>当前时间</p>
            <span class="blackBox mar"></span>
			<span class="fl dian">:</span>
			<span class="blackBox"></span>
			<span class="fl dian">:</span>
			<span class="blackBox"></span>
        </div>
        <div>
            <img src="img/0f5c49925f3a7d5157b8ac7f4f66b34b.webp" alt="" width="300" height="200">
        </div>
        <div>
            <img src="img/85fe83512254832000635fb15f048df5.webp" alt="" width="300" height="200">
        </div>
        <div>
            <img src="img/aebcb8f7d8c6ddaa754bfbb701a38cbf.webp" alt="" width="300" height="200">
        </div>
        <div>
            <img src="img/c7fd00fa846cefaaa73572ea55832854.jpg" alt="" width="300" height="200">
        </div>
        <div>
            <img src="img/e023dd94c146d0f27f7ae8e98213abff.webp" alt="" width="300" height="200">
        </div>
    </div>
    <a class="left" href="javascript:;">
        <i></i>
    </a>
    <a class="right" href="javascript:;">
        <i></i>
    </a>
</div>

    <script src="轮播图.js"></script>
</body>
</html>

css文件：命名为轮播图.css

body{
    perspective: 1000px;/*透视效果*/
}
a{
  text-decoration: none;
}
@font-face {
    font-family: 'icomoon';
    src:  url('fonts/icomoon.eot?rgq97g');
    src:  url('fonts/icomoon.eot?rgq97g#iefix') format('embedded-opentype'),
      url('fonts/icomoon.ttf?rgq97g') format('truetype'),
      url('fonts/icomoon.woff?rgq97g') format('woff'),
      url('fonts/icomoon.svg?rgq97g#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  }
  i{
    font-family: "icomoon";
    font-style: normal;
  }
.banner{
    width: 300px;
    height:200px;
    margin: 100px auto;
    position: relative;
    transform-style: preserve-3d;/*让父元素里面的盒子以3D效果显示*/
    transition:all 0.3s  linear;/*linear匀速*/
}
.contain_banner{
  width:300px;
  height:200px;
  margin: 0 auto;
	position: relative;
}
.banner div{
	width:300px;
	height:200px;
	position: absolute;
	top: 0;
	left: 0;
}
.banner div:nth-child(1){
  width: 300px;
  height:200px;
  background-color: #f1eded;
  border: 1px solid #ff6700;
	transform: rotateY(0deg) translateZ(500px);/*translateZ使用时要给body添加以上元素*/
    text-align: center;
    color: #ff6700;
    padding: 0 80px;
    box-sizing: border-box;
}
.banner div:nth-child(2){
	
	transform: rotateY(60deg) translateZ(400px);
}
.banner div:nth-child(3){
	
	transform: rotateY(120deg) translateZ(400px);
}
.banner div:nth-child(4){
	
	transform: rotateY(180deg) translateZ(400px);
}
.banner div:nth-child(5){
	
	transform: rotateY(240deg) translateZ(400px);
}
.banner div:nth-child(6){
    
	transform: rotateY(300deg) translateZ(400px);
}
/*轮播图左右按钮*/
.left{
  position: absolute;
  top: 50%;
  left: 0;
  font-size: 40px;
  color: #ff6700;
}
.right{
  position: absolute;
  top: 50%;
  right:0;
  font-size: 40px;
  color: #ff6700;
}
/*当前时间*/
.blackBox{
  display: block;
  width:40px !important;
  height:40px !important;
  background-color: #605751;
  float: left;
  text-align: center;
  line-height: 40px;
}
.fl{
  float: left;
}

js文件：命名为轮播图.js

/*获取轮播图的元素*/
var banner=document.getElementsByClassName("banner")[0];
/*定时器*/
timer();
timert();
/*左右点击*/
var left=document.getElementsByClassName("left")[0];
var right=document.getElementsByClassName("right")[0];
right.onclick=function(){
    clearInterval(timere);
    clearInterval(timer_t);
    index+=60;
    banner.style.transform="rotateY("+index+"deg)";
    timer();
    timert();
}
left.onclick=function(){
    clearInterval(timere);
    clearInterval(timer_t);
    index-=60;
    banner.style.transform="rotateY("+index+"deg)";
    timer();
    timert();
}
/*当前时间*/
var blackBox=document.getElementsByClassName("blackBox");
setInterval(function() {
	var dater = new Date();
	var hours = dater.getHours();
	var minutes = dater.getMinutes();
	var seconds = dater.getSeconds();
	if( minutes < 10) {
		blackBox[1].innerHTML = "0" +  minutes;
	} else {
		blackBox[1].innerHTML =  minutes;
	}
	if(seconds < 10) {
		blackBox[2].innerHTML = "0" + seconds;
	} else {
		blackBox[2].innerHTML = seconds;
	}
	if(hours < 10) {
		blackBox[0].innerHTML = "0" +  hours;
	} else {
		blackBox[0].innerHTML = hours;
	}
	//    miao.innerHTML=60-seconds;
}, 1000);
/*定时器function*/
var index=0;
var timere;
var timer_t;
function timer(){
    timere=setInterval(function(){
        index+=60;
        banner.style.transform="rotateY("+index+"deg)";
        clearInterval(timere);
    },2000);
}
function timert(){
    timer_t=setInterval(function(){
        banner.style.transform="rotateY("+index+"deg)";
        timer();
    },4000);
}

一起加油吧！！！

抓住鼹鼠不撒手
关注
专栏目录
Java学习第九周笔记总结
11-20
内容包括客户端与服务器端之间的交互，正则表达式，Junit，Maven
优秀资料（2021-2022年收藏）小学教师开学第一周值周总结范文.doc
09-29
【教育精品资料】这篇文档是小学教师对开学第一周值周情况的总结，主要强调了学生行为习惯的培养和校园文明建设。以下是其中涉及的重要知识点： 1. **卫生习惯**：教师强调各班级学生的卫生习惯良好，每日室内外...
大二下第九周总结
weixin_45040144的博客
04-18 44
第九周总结与计划
coder370的博客
11-03 103
总结：本周两场教育场比赛： 教育场62 和 教育场69 ， 第一次组队一起打，感觉解题和读题效率变快了很多（果然是众人拾柴火焰高） 这周还学了一点最小生成树：最小生成树 下周计划：这周本来想学一下最短路的，但是后来觉得最小生成树好像比较入门就先从最小生成树入手，下周继续学习最短路。 ...
2019第9周知识总结
annuobin1120的博客
03-03 140
1 node 爬虫 https://juejin.im/post/5c75fa4af265da2d84109219 2 转载于:https://www.cnblogs.com/WhiteHorseIsNotHorse/p/10465850.html
第九周工作总结
eswang的CSDN博客
07-15 597
不知道说啥 突如其来的开学打乱了节奏，原本预计最少三个月的实习时间，大概离定格到了63天这个数字， 回顾整个过程，从对整个流程的懵懵懂懂，到后来渐渐熟悉，妥善安排；对git，vue，甚至ts都有了更深刻的认识。同时，由于涉及到很多C端对业务，从CSS自身或者是涉及到Andr webview的一些UI的嘈点都有了一些自己的认识。 两个月的时间说长不长，说短不短， 收获还是满满的，当然也有些遗憾，比如自己很少抽时间把这段时间学到的东西好好总结一下，因为感觉每天写的东西都有一部分是在不断的复习，仿佛没有了记录下来
【大三上学期实训】第九周总结
ITString的博客
01-11 410
这周是最后一周，我们下周就要答辩了。最后做一次工作总结，这个项目从暑假开始，然后开学之后坐了一个模型出来，模型有很多问题，但是核心算法已经重要的xml建模部分已经做好了。而且我不会前端，所以这个项目的前端写的十分混乱，在实训的过程中，我们就是主要进行前端的优化以及后端的完善，比如pdf导出的完善，数据库的完善，中间有很多问题，但是最终都解决了。但是最后仍然不完美，虽然实训已经结束，但是这个项目没有
第九周学习总结
weixin_30475039的博客
04-30 91
20162315 2016-2017-2 《程序设计与数据结构》第9周学习总结 教材学习内容总结 数据库是为其他程序提供数据的应用软件 常用语句： JDBC API建立到数据库的连接 CREATE TABLE SQL创建新的数据库表 ALTER TABLE SQL修改已有的数据库表 SHOW COLUMNS SQL获取表的各列和结构设置 INSERT SQL向数据库表中添加新数据 SELECT...
前端实习第五周总结
qq_43957263的博客
12-21 4934
经过一个多月的打磨，我现在基本上算是已经稳定下来并且习惯了现在的生活。每天朝九晚六，算是体会到了什么叫做社畜。 由于这几天我负责的小程序前端项目要上线，所以就一直在提交测试、修改，再提交、再修改；一直过了几天这样的日子。然后终于在昨天第一次被迫加班到九点的情况下，这个项目终于是部署上线了。所以才有时间更新这篇博客，原本是上周就应该分享更新的。 这两天还有上周，由于项目上线，要改的还有要交流的比较多；我算是深深的感受到了交流的重要性。真的是太难了。。。和大家...
第九周java周总结
IT_demon的博客
04-19 385
本周java课由于运动会就没上!!!
第十九周总结
最新发布
m0_63594467的博客
01-15 93
第十九周总结
第九周值周工作总结.doc
01-27
【第九周值周工作总结】 第九周的工作总结涵盖了学校日常管理的多个方面，旨在提升学生的行为规范，维护良好的学习环境，并强调了健康与安全的重要性。以下是对各知识点的详细阐述： 1. 学生行为规范：班主任对...
优秀资料（2021-2022年收藏）小学第十九周值周总结.doc
09-29
教育精品资料
第三十七周总结——大二下学期开学总结
1514的博客
03-07 7741
    上一周末总结没写，今天实在不想写项目了，就来划下水吧。     从大二上学期最后一段时间开始，到现在大二下学期刚开始，几乎都没停过，一直都是写项目，有点麻木了。总结起来有一下几点。 一系列问题 在写项目中复习以前不熟悉的知识点较少，收获的东西较少，主要是不清楚是不是写的对。就拿vue来举例子，前几天别的组考核时我才知道，vue里面的token最好是存到store中，但是我存到了cookie里面。其实刚开始我也是尝试着存到store里面的，只不过一刷新页面，store里面的数据就清空了，导致我以为不
第三十一周总结——js数组
1514的博客
11-20 4750
生活   这一学期过的是真的快，可能是因为疫情在家待了一月。感觉还没多长时间就快要期末考试了。说实话，大二学的东西是真的难，到现在还没咋看书。等这个项目写的差不多了，要抽出时间来看看专业课的书了，不能挂科了。还有四级，估计是过不了了，放平心态就好。 学习(js数组) 感觉自己基础知识不会，难的又搞不明白，唉，废了。现从基础的学起。 1.创建和赋值 let array=new Array(1,2,3,4,5) let array=[1,2,3,4,5] let array=new Array() 1. ar
第三十四周总结——复习
1514的博客
12-12 3692
    今天周日，又该写每周总结了，现在正在看复变函数的视频，看的困死了，来写写博客精神一下。今天跟学长换的键盘，好键盘就是手感不一样。这一周真的没学到什么，尚且说说生活上的小事吧。     还有两周的时间，真的该抓紧时间复习了，好多专业课还不会，这次期末有七门专业课，太多了，两天复习一门（/doge）。今晚看看能不能把复变函数学懂一点吧。下午被学长催交互登陆页面了，让我今晚必须交互完，哪有那么简单，还是明天交互吧，我今晚要学习复变函数。     昨晚学校举办“发现杯”比赛，共9题，真的难，最后两题的正确率
第四十二周总结——今后计划
1514的博客
04-28 3503
今后计划     马上就要大三了，等暑假也就该面试了吧，但是感觉自己还有好多东西没了解过，还有的即使了解过也是似懂非懂，了解的只是表面，没有更深层的挖掘，没多少时间了，也给该简单的规划一下接下来的一段时间做什么了，最好时间紧一点。回想起来大一的时候，那学习计划真的就是一个接着一个，不带停的，那时间紧总让我觉得只要浪费一点就完不成任务了。当时的压力就是做梦都能梦见自己在改bug。现在大二了，马上大三，反而没有大一的时候自律了。大二了，学长学姐也不怎么管了，就松懈了一点吧。从今天看是吧，我想和大一的时候一样，布
第十三周总结——认清自己
1514的博客
04-10 2442
第十周总结     这，这一周忽然明白一句话，就是当自己真正知道学了，赶上来还是很快的（吧）。你看吧，现在我菜的一批，网页网页做不好，蓝桥杯快开始了，自己还是不怎么会，今天一上午就写出来一题，还有就是专业课，这专业课咋怎么难啊（无语的眼神）。本来觉得等快考试时复习以下应该就行了吧，结果……还是不要太高估自己的好，现在补应该不晚（吧）。还有就是，自己自律能力是真的差，都说好了不要熬夜的，你咋怎么不争气呢？明天就要九韶杯了，已经准备好经历残酷的现实了，能写几题是几题吧，反正这是免费的，慌蓝桥啊，毕竟三百呢，不能
广电股份咨询项目第一周总结：业务组合与组织结构探讨
该文档是关于企业管理咨询公司在对广电股份进行的一项全面咨询项目的第一周工作回顾。咨询团队在第一周的主要任务是对高层管理人员进行访谈，了解公司的业务组合、组织结构和管理体系现状，以便识别存在的主要问题并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值