ife-task0001暂存

最新推荐文章于 2020-04-29 14:43:17 发布
最新推荐文章于 2020-04-29 14:43:17 发布
阅读量384 收藏
点赞数
分类专栏： HTML+CSS+JScprit java/python
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hexon804/article/details/51124113
版权 
<pre name="code" class="javascript"><pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="css/task0002_3.css">
	<script type="text/javascript" src="js/task0002_3.js" defer="defer"></script>	
	<title>task0002_3</title>
</head>
<body>
 	<div id="task3">
 		<span class="tip">任务3：轮播图</span>
 		<div id="contains">
 			<div id="img-wrap" style="left: 0px">
 				<img src="img/slide-1.png" alt="1">
 				<img src="img/slide-2.png" alt="2">
 				<img src="img/slide-3.png" alt="3">
 				<img src="img/slide-4.png" alt="4">
 				<img src="img/slide-5.png" alt="5">
 				<img src="img/slide-6.png" alt="6">
 			</div>
<div id="fp-nav">
 				<ul>
		 			<li class="light" index="0"><a href="#"></a></li>
		 			<li index="1"><a href="#"></a></li>
		 			<li index="2"><a href="#"></a></li>
		 			<li index="3"><a href="#"></a></li>
		 			<li index="4"><a href="#"></a></li>
	 			</ul>
 			</div>
	 		
 		</div>
 		<div id="setting">
 			<div class="order">				
 				<input type="radio" name="order" value="positive">正序</input>
 				<input type="radio" name="order" value="opposite">反序</input>
 			</div>
<div class="circle">
 				<input type="radio" name="circle" value="yes">循环</input>
 				<input type="radio" name="circle" value="No">单次</input>
 			</div>
 			<div class="time">
 				<input type="text" name="time" placeholder="请输入时间间隔" id="time">s</input>
 			</div>
			
			<div class="execute">
				<input type="button" name="btn" id="start" value="开始"></input>
				<input type="button" name="btn" id="stop" value="停止"></input>
			</div>	
 		</div>
 		
 	</div>

</body>
</html>



#task3 {
width: 980px;
margin: 20px auto;
}
#task3 span{
font-size: 1.2em;
font-weight: bold;
}


#contains {
width:600px;
height: 375px;
border: 1px solid black;
position: relative;
overflow: hidden;
} 
 

#fp-nav {
<span style="white-space:pre">	</span>position: absolute;
<span style="white-space:pre">	</span>z-index: 2;
<span style="white-space:pre">	</span>top: 355px;
<span style="white-space:pre">	</span>left: 250px;
}




#fp-nav ul li{
 <span style="white-space:pre">	</span>width: 10px;
 <span style="white-space:pre">	</span>height: 10px;
 <span style="white-space:pre">	</span>color: white;
 <span style="white-space:pre">	</span>display:inline-block;
 <span style="white-space:pre">	</span>margin-right: 5px;
 <span style="white-space:pre">	</span>border: 2px solid #C0BDBD;
 <span style="white-space:pre">	</span>border-radius: 50%;
 <span style="white-space:pre">	</span>cursor: pointer;


}


#fp-nav ul .light {
<span style="white-space:pre">	</span>background: #976F6F;
}


#img-wrap {
<span style="white-space:pre">	</span>width: 3600px;
<span style="white-space:pre">	</span>font-size: 0px;
<span style="white-space:pre">	</span>z-index: -1;
<span style="white-space:pre">	</span>position:absolute;
}

 



 

#img-wrap img{
<span style="white-space:pre">	</span>width: 600px;
<span style="white-space:pre">	</span>display:inline-block;




}


#setting div {
<span style="white-space:pre">	</span>margin: 5px 0;
}


#setting div {
<span style="white-space:pre">	</span>color: #7470AC;
}
#setting .execute input{
<span style="white-space:pre">	</span>width: 50px;
<span style="white-space:pre">	</span>height: 20px;
<span style="white-space:pre">	</span>background: #D0D3E4;
<span style="white-space:pre">	</span>color: #BF8888;
<span style="white-space:pre">	</span>border-radius: 5px;
<span style="white-space:pre">	</span>border: 1px solid  #BAB4B4;
<span style="white-space:pre">	</span>margin-right: 30px;
<span style="white-space:pre">	</span>padding: 10px auto;
<span style="white-space:pre">	</span>cursor: pointer;
}


#setting .execute input:hover {
<span style="white-space:pre">	</span>background: #6C789B;
<span style="white-space:pre">	</span>color: white;
}

 



 

nction animate() {
	// 设置动画失效
	var isAnimate = false;	
	var dispSeq = 0;				//是否是正序
	var dispCircle = 0;				//是否循环	
	var dispTime = 2;				// 如果使用自动切换，该时间表示一张图片显示的时间

	// 取得fa-nav下的li标签
	var lis = document.getElementById("fp-nav").getElementsByTagName("li");
	// 获得显示图片的id
	var img = document.getElementById("img-wrap");
	var dispIndex = 0;				//	当前正显示的图片索引
	var timerHandler ;				// 自动播放时，定时器的句柄

	function showSel(sel) {
		// 先移除包含有light类名的对象， 然后根据sel对对象添加类名为light的类
		for (var i = 0; i < lis.length; i++) {
			if (lis[i].getAttribute("class") === "light") {
				lis[i].removeAttribute("class");
			}
		}
		// 添加类名为light的类
		lis[sel].setAttribute("class", "light");
	}
       function run(offset) {
		isAnimate = true;
		var newleft = parseInt(img.style.left) + offset;
		var speed = offset / (5);
		console.log("运行run函数")
		function go() {		 
			if (parseInt(img.style.left) != newleft) {
				img.style.left = parseInt(img.style.left) + speed + 'px';
				setTimeout(go, 50);
			} else {
				isAnimate = false;
				showSel(dispIndex);
				console.log("isAnimate = " + isAnimate);
			}
		}
		go();
	}
       // 添加手动移动照片
	function manualOperate() {
		for (var i = 0; i < lis.length; i++) {
			EventUtil.addHandler(lis[i], "click", function(){
				if (!isAnimate) {

					var toIndex = this.getAttribute("index");

					if (toIndex === dispIndex) {
						return ;
					}
					run((toIndex - dispIndex) * (-600));
					dispIndex = toIndex;

				}
			});
		}
	}
       // 获得参数
	function getParameter() {
		// 先清除正反序,和循环
		dispSeq = 0;
		dispCircle = 0;

		var order = document.getElementsByName("order");
		var circle = document.getElementsByName("circle");
		// 获得显示时间间隔
		dispTime = (document.getElementById("time").value > 0)?(document.getElementById("time").value):2;
		dispTime *= 1000;
		// 获得显示的正反序
		for (var i = 0; i < order.length; i++) {
			if (order[i].checked) {
				if (order[i].value == "positive") {
					dispSeq = -1;			// 正序
				} else if (order[i].value == "opposite") {	
					dispSeq = 1;			// 反序
				} 
			} 
		}
// 获得显示是否循环
		for (var i = 0; i < circle.length; i++) {
			if (circle[i].checked) {
				if (circle[i].value == "yes") {
					dispCircle = 1;				// 循环
				} else {
					dispCircle = 2;				// 不循环
				}
			}
		}
		
	}
	// 开始和停止
	function startAndStop() {
		var start = document.getElementById("start");
		var stop  = document.getElementById("stop");
// 添加开始按钮事件
		EventUtil.addHandler(start, "click", function() {
			var startKey = false;
			// 当点击开始时，先获取参数
			getParameter();			
			// 判断是否设置了参数
			if ((dispSeq != 0) && (dispCircle != 0) && (dispTime != 0)) {
				console.log("dispSeq = " + dispSeq);
				console.log("dispCircle = " + dispCircle);
				console.log("dispTime = " + dispTime);
				if (((dispSeq === -1) && (dispIndex === 4)) || 
					 ((dispSeq === 1) && (dispIndex === 0))) {
					startKey = true;
				} else {
					startKey = false;
				}
				// 只有当图片没有处于运行状态，按开始键才有效
				if (!isAnimate) {
					timerHandler = setInterval(function(){
						isAnimate = true;
 var offset;
						if (dispCircle === 1) {			// 循环
							if (dispSeq === -1) {			// 正序
								if (dispIndex === 4) {		// 到达边界
									offset = 2400;
									dispIndex = 0;
								} else {
									offset = -600;
									dispIndex++;
								}
							} else {						//反序
								if (dispIndex === 0) {		// 到达边界
									offset = -2400;
									dispIndex = 4;
								} else {
									offset = 600;
									dispIndex--;
								}
							}
						} else { 
if (dispSeq === -1) {			// 正序
								if (dispIndex === 4) {		// 到达边界
									if (startKey == true) {
										startKey = false;
										offset = 2400;
										dispIndex = 0;	
									} else {
										isAnimate = false;
										clearInterval(timerHandler);
										return ;
									}
								} else {
									offset = -600;
									dispIndex++;
									console.log(offset);
								}
							} else {
if (dispIndex === 0) {		// 到达边界
									if (startKey == true) {
										startKey = false;
										offset = -2400;
										dispIndex = 4;	
									} else {
										isAnimate = false;
										clearInterval(timerHandler);
										return ;
									}
								} else {
									offset = 600;
									dispIndex--;
								}
							}
						}
						run(offset);
					}, dispTime);
				}
			}
			// 没有设置参数，提示设置参数
			else {
				alert("请先设置参数")
			}
		});
		EventUtil.addHandler(stop, "click", function() {
			clearInterval(timerHandler);
		});
	}
	manualOperate();
	startAndStop();
}
window.onload = animate();

 

 

 

 

 

 


                

        

        

    




    

      

        

            

              
                
                  放风筝的小小马
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
ife-task9暂存

				
			

			

				

					09-20
				

			

		

		

			
				
ife task9暂存

			
		

	



                

              
                



	

		

			

				
					
(HTML+CSS基础)ife-task0001 总结！

				
			

			

				

					岁暮少年玻璃心
				

				

					11-13
					
					610
					
				

			

		

		

			
				
第一次写这样的总结，轻喷！！！写写这个任务里面遇到的自己遇到的问题和解决办法！！
因为不是边写代码边写总结的，所以想到什么写什么了！！

			
		

	



                


  
              

                


	

		

			

				
					
ife-task0003学习收获总结

				
			

			

				

					weixin_34289744的博客
				

				

					11-07
					
					86
					
				

			

		

		

			
				
+ 编写可维护的css原则是，尽量减少改动时要编辑的地方（减少代码重复）。
+ CSS布局奇淫技巧之-高度自适应
 高度自适应：通过绝对定位来解决高度自适应的问题，元素不设置高度，设置绝对定位，将top、bottom设置为0，可以设置自适应高度。
 
 额外补充： 通过绝对定位解决宽度自适应的问题
 
 
 不设置right的...

			
		

	





	

		

			

				
					
ife2015spring-task0001笔记总结

				
			

			

				

					Capgras的博客
				

				

					04-29
					
					326
					
				

			

		

		

			
				
盒模型及定位

6.1 任务描述
Q1. 用两种方法来实现一个背景色为红色、宽度为960px的DIV在浏览器中居中
效果图：

方法一：巧用margin
<div id="method1"></div> <!--方法一：巧用margin-->

div#method1 {
    background-color: red;
    width:960px;
...

			
		

	



		

			
		



	

		

			

				
					
ife-task0002-4

				
			

			

				

					hexon804的专栏
				

				

					06-21
					
					395
					
				

			

		

		

			
				
仿百度搜索栏
	
	


	
		
		
			
				a
				b
			
		 -->
		
	




#search {
	width: 980px;
	margin: 30px auto;
}

#inputText {
	width: 540px;
	height: 35px;
	border: 1px solid #D6CFCF;
}

#inputText:hover {

			
		

	





	

		

			

				
					
baidu-ife-task

				
			

			

				

					05-05
				

			

		

		

			
				
2015_spring 任务 1.task0001 任务要求： 2.task0002 任务要求： 3.task0003 任务要求： 4.移动杨帆 任务要求：

			
		

	





	

		

			

				
					
ife-task9 HTML暂存

				
			

			

				

					09-20
				

			

		

		

			
				
ife-task9 HTML暂存

			
		

	





	

		

			

				
					
2016ife-task:2016百度前端技术学院任务

				
			

			

				

					05-11
				

			

		

		

			
				
任务Part1 Demo(html及css不含js代码) 任务Part2 Demo JS基础 任务Part3 Demo 综合练习HTML，CSS，JavaScript

			
		

	





	

		

			

				
					
ife-ria-task1

				
			

			

				

					05-18
				

			

		

		

			
				
IWA-team.github.io ##队员介绍下自己吧 昵称 github帐号 QQ 鸣鸣 957041561 111 111 111 ...我们是参加2015年百度暑期前端学习夏令营的WebApp杨帆班的一支队伍 ...建立一个Github的项目仓库，在这个项目中建立一个自己...

			
		

	





	

		

			

				
					
JavaScript学习过程

				
			

			

				

					hexon804的专栏
				

				

					02-12
					
					1100
					
				

			

		

		

			
				
1.注意：在js文件中，不需要标签，直接编写JavaScript代码即可；
Js文件不能直接运行，需嵌入到HTML文件中执行，我们需在HTML中添加如下代码，就可将JS文件嵌入HTML文件中。
如：
2.我们可以将JavaScript代码放在html文件中任何位置，但是我们一般放在网页的
head或者body部分
a. 放在部分
最常用的方式是在页面中head部分放置元素，浏览器解析h

			
		

	





	

		

			

				
					
css

				
			

			

				

					hexon804的专栏
				

				

					01-13
					
					1095
					
				

			

		

		

			
				
一、
1.CSS = 层叠样式表
2.HTML表达结构，CSS表达样式
3.样式和内容/结构是分离的
二、
 1. 
   
   body里面背景色设置为默认颜色：透明色；transparent表示透明色；这里的颜色可以RGB表示
 如：； 或者 ；  
还有 ；这里的rgba中的a表示透明度，其范围为：0~1之间
2.   ；

表示在body里面以first.jpg这

			
		

	





	

		

			

				
					
学习html&css&JavaScript记录

				
			

			

				

					hexon804的专栏
				

				

					02-18
					
					790
					
				

			

		

		

			
				
1. window.onload()函数
作用：等待html文档加载完毕后就执行..
例如我们要初始化一些东西..比如说我们要把文档中的div的颜色都改变了
那么在文档加载完毕后 在这个onload调用的函数里面我们就可以操作文档结构了..
如果不是在onload 里面调用的话。那么在文档还没有加载完毕 我们就调用文档元素师不可以的...换句话说 东西要先存在 我才拿来用.
onload

			
		

	





	

		

			

				
					
HTML+CSS+JScript

				
			

			

				

					hexon804的专栏
				

				

					01-06
					
					571
					
				

			

		

		

			
				
编辑器：PSpad
1. HTML 是一种超文本标记语言
2.html文件
注意：
1. html的标记仅仅是告诉浏览器它是什么；它长成什么样是根据样式表CSS来决定的，如果没有样式表，则使用的是浏览器的默认样式表
2.标记是有它的实际意义的


标记一、
以开始   结束
     与 之间是头部
    与 之间存放的是正文
   与之间存放的是标题
    html

			
		

	





	

		

			

				
					
关于CSS外边距叠加问题

				
			

			

				

					hexon804的专栏
				

				

					04-17
					
					487
					
				

			

		

		

			
				
小桂子：皇上，为何您笑的这么淫荡？
朕：呵呵呵




听闻HTML+CSS甚是简单，谁知这么多坑要爬；
1. 外边距叠加1
对于两个相邻元素的margin-bottom和margin-top会叠加，大家应该很熟悉（好像很多观众的样子，你这装逼犯，哈哈哈哈！）；也就是说当一个元素出现在另一个元素上面时，第一个元素的底外边距与第二个元素的顶外边距发生叠加，他们之间的外边距为两个元素外

			
		

	





	

		

			

				
					
使用github和jekyll搭建博客过程

				
			

			

				

					hexon804的专栏
				

				

					02-06
					
					362
					
				

			

		

		

			
				
一、软件安装
至于git安装以及github账号注册就不说了
1.安装jekyll
参考：http://blog.csdn.net/kong5090041/article/details/38408211
二、搭建博客
1.参考：http://www.ruanyifeng.com/blog/2012/08/blogging_with_jekyll.html
先不需要将其上传到githu

			
		

	





	

		

			

				
					
js 小功能函数

				
			

			

				

					hexon804的专栏
				

				

					06-13
					
					332
					
				

			

		

		

			
				
1. JS判断是否为一个有效日期






1

2

3

4




function check(date){

    return (new Date(date).getDate()==date.substring(date.length-2));

}

//参数date可以格式化为xx-xx-xx或xxxx-xx-xx或用/分割



			
		

	





	

		

			

				
					
开发工具设置

				
			

			

				

					hexon804的专栏
				

				

					04-11
					
					241
					
				

			

		

		

			
				
一、sublime text3的tab键设置
Preferences----Settings——User 添加如下代码：
      "tab_size": 4,
"translate_tabs_to_spaces": true,
"trim_trailing_white_space_on_save": true注意后面要有逗号隔开；然后点击sublime Text3界面的右下角“tab si

			
		

	





	

		

			

				
					
钢筋混凝土污水池及提升泵站施工方案.doc

					
最新发布

				
			

			

				

					05-03
				

			

		

		

			
				
课程设计污水处理

			
		

	





	

		

			

				
					
html右边折叠面板,2017IFE-使用CSS实现折叠面板

				
			

			

				

					05-13
				

			

		

		

			
				
折叠面板是一个常见的 UI 组件，可以在 Web 页面上实现内容的展开与收缩。... ... ...<div class="panel-container">  <div class="panel-header">  折叠面板标题  <span class="panel-arrow"> ... <div class="panel-content"> ...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值