<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
// 用for循环和switch循环,判断7月份周一至周日各有几天,并输出
var week=[0,0,0,0,0,0,0];
for(var i=1;i<=31;i++){
switch(i%7){
case 0:
week[i%7+6]++;
break;
case 1:
week[i%7-1]++;
break;
case 2:
week[i%7-1]++;
break;
case 3:
week[i%7-1]++;
break;
case 4:
week[i%7-1]++;
break;
case 5:
week[i%7-1]++;
break;
case 6:
week[i%7-1]++;
break;
default:
break;
}
}
// console.log(week[6]);
for(var j=0;j<week.length;j++){
console.log("周"+(j+1)+"共有"+week[j]+"天");
}
</script>
</body>
</html>
 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0px;
padding: 0px;
}
#show{
width: 500px;
overflow: hidden;
margin:200px auto;
/*border: 3px solid black;*/
position: relative;
}
div ul{
list-style: none;
width: 3000px;
overflow: hidden;
}
div ul li{
float:left;
}
div span{
position: absolute;
width:40px;
height: 40px;
background: rgba(0,0,0,0.5);
top:50%;
margin-top: -20px;
font-size:30px;
text-align: center;
line-height: 37px;
color: white;
cursor: pointer;
}
div #btn_left{
left: -10px;
border-radius: 0px 20px 20px 0px ;
}
div #btn_right{
right:-10px;
border-radius: 20px 0px 0px 20px ;
}
#ol1{
list-style: none;
overflow: hidden;
background: #ccc;
height: 20px;
width: 88px;
border-radius: 10px;
position: absolute;
left:50%;
margin-left: -44px;
bottom: 30px;
}
#ol1 li{
float:left;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
margin-right:7px;
margin-top: 5px;
cursor: pointer;
}
#ol1 li:nth-of-type(5){
margin-right: 0px;
}
#ol1 li:nth-of-type(1){
margin-left: 5px;
background: #f60;
}
</style>
</head>
<body>
<div id="show">
<ul id="ul1">
<li><img src="img/bg01.jpg" alt="" width="500px"/></li>
<li><img src="img/bg02.jpg" alt="" width="500px"/></li>
<li><img src="img/bg03.jpg" alt="" width="500px"/></li>
<li><img src="img/bg04.jpg" alt="" width="500px"/></li>
<li><img src="img/bg05.jpg" alt="" width="500px"/></li>
</ul>
<span id="btn_left"> < </span>
<span id="btn_right"> > </span>
<ol id="ol1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script>
var ul1=document.getElementById('ul1');
var show=document.getElementById('show');
var btn_l=document.getElementById('btn_left');
var btn_r=document.getElementById('btn_right');
// document.getElementsByTagName('li');
var ol1=document.getElementById('ol1').children;
// 运用.children获取下来的标签,也是一个数组 使用时必须要带下标
var i=0;
var timer;
timer=setInterval(function(){
for(var g=0;g<ol1.length;g++){
ol1[g].style.background='white';
}
i++;
// ul1.style.transition='all 1s';
if(i==5){
i=0;
ul1.style.transition='none';
}
ul1.style.marginLeft=-500*i+"px";
ol1[i].style.background='#f60';
// ul1.style.marginLeft=-i+"px";
},1000);
show.onmouseover=function(){
clearInterval(timer);
}
show.onmouseout=function(){
clearInterval(timer);
timer=setInterval(function(){
for(var g=0;g<ol1.length;g++){
ol1[g].style.background='white';
}
i++;
if(i==5){
i=0;
ul1.style.transition='none';
}
ul1.style.marginLeft=-500*i+"px";
ol1[i].style.background='#f60';
},1000);
}
btn_l.onclick=function(){
i--;
if(i==-1){
i=4;
}
ul1.style.marginLeft=-500*i+"px";
}
btn_right.onclick=function(){
i++;
if(i==5){
i=0;
}
ul1.style.marginLeft=-500*i+"px";
}
for(var j=0;j<ol1.length;j++){
// 1,先给所有的li标签设置下标值 setAttribute方法
// 2,点击之后,获取当前点击中的li标签的index值
// 3,把获取到的index值,用于ul1
// this:当前操作的对象
ol1[j].setAttribute('index',j);
ol1[j].onclick=function(){
var index=this.getAttribute('index');
i=index;
console.log(index);
for(var k=0;k<ol1.length;k++){
ol1[k].style.background='white';
}
this.style.background='#f60';
ul1.style.marginLeft=-500*index+"px";
}
}
</script>
</body>
</html>
 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
#show{
width: 250px;
margin: 200px auto;
overflow: hidden;
position: relative;
}
#pic{
width: 2000px;
list-style: none;
overflow: hidden;
transition: all 1s;
}
#show #pic li{
float: left;
}
#show span{
width: 36px;
height: 36px;
position: absolute;
top: 50%;
margin-top: -18px;
font-size: 28px;
color: white;
text-align: center;
line-height: 36px;
background: rgba(0,0,0,0.5);
cursor: pointer;
}
#show #btn_left{
left: -8px;
border-radius:0px 18px 18px 0px ;
}
#show #btn_right{
right: -8px;
border-radius:18px 0px 0px 18px ;
}
#show ol{
list-style: none;
position: absolute;
text-align: center;
font-size: 0px;
bottom: 13px;
margin-left: -30px;
left: 50%;
border-radius: 10px;
background: rgba(255,255,255,.3);
}
#show ol li{
display: inline-block;
margin: 3px;
border-radius: 50%;
width: 8px;
height: 8px;
color: #3C3C3C;
cursor: pointer;
background: #FFFFFF;
}
#show #ol1 li:nth-of-type(1){
background: #f60;
}
</style>
</head>
<body>
<div id="show">
<ul id="pic">
<li><img src="data:images/pic25.jpg"/></li>
<li><img src="data:images/pic24.jpg"/></li>
<li><img src="data:images/pic23.jpg"/></li>
<li><img src="data:images/pic22.jpg"/></li>
<li><img src="data:images/pic21.jpg"/></li>
</ul>
<span id="btn_left">
<
</span>
<span id="btn_right">
>
</span>
<ol id="ol1">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
<script type="text/javascript">
var ul=document.getElementById('pic');
var show=document.getElementById('show');
var le=document.getElementById('btn_left');
var ri=document.getElementById('btn_right');
var ol=document.getElementById('ol1').children;
var i=0;
var timer;
timer=setInterval(function(){
for(var q=0;q<ol.length;q++){
ol[q].style.background='#FFFFFF';
}
i++;
ul.style.transition='all 1s';
if(i==5){
ul.style.transition='none';
i=0;
}
ul.style.marginLeft=-250*i+"px";
ol[i].style.background='#FF6600';
},1000);
show.onmouseover=function(){
clearInterval(timer);
}
show.onmouseout=function(){
clearInterval(timer);
timer=setInterval(function(){
for(var q=0;q<ol.length;q++){
ol[q].style.background='#FFFFFF';
}
i++;
ul.style.transition='all 1s';
if(i==5){
ul.style.transition='none';
i=0;
}
ul.style.marginLeft=-250*i+"px";
ol[i].style.background='#FF6600';
},1000);
}
le.onclick=function(){
i--;
console.log(i);
if(i<0){
i=4;
}
for(var g=0;g<ol.length;g++){
ol[g].style.background='#FFFFFF';
}
ol[i].style.background='#FF6600';
ul.style.marginLeft=-250*i+"px";
}
ri.onclick=function(){
i++;
if(i==4){
i=0;
}
for(var n=0;n<ol.length;n++){
ol[n].style.background='#FFFFFF';
}
ol[i].style.background='#FF6600';
ul.style.marginLeft=-250*i+"px";
}
for(var d=0;d<ol.length;d++){
ol[d].setAttribute('index',d); ol[d].onclick=function(){
var index=this.getAttribute('index');
i=index;
for(var j=0;j<ol.length;j++){
ol[j].style.background='#FFFFFF';
}
this.style.background='#FF6600';
ul.style.marginLeft=-250*index+"px";
}
}
</script>
</body>
</html>

chendemo轮播图

swith-case 日历的更多相关文章

  1. swith case判断

    swith case是js中的一种判断方式 应用于变量或表达式在不同值情况下的不同操作,每一种case结束都要加break结束整个判断 var num = 2; switch(num){ case 0 ...

  2. C# 利用键值对取代Switch...Case语句

    swich....case 条件分支多了之后,会严重的破坏程序的美观性. 比如这个 上述代码是用于两个进程之间通信的代码,由于通信的枚举特别的多,所以case的分支特别的多.导致了代码的可读性,可维护 ...

  3. SQL case when else

    先占个坑,sql 版本的swith case SELECT Oldvote, (CASE THEN (SELECT NOW() from dual) END) as "number" ...

  4. 使用策略模式重构switch case 代码

    目录 1.背景 2.案例 3.switch…case…方式实现 4.switch…case…带来的问题 5.使用策略模式重构switch…case…代码 6.总结 1.背景 之前在看<重构    ...

  5. C++基础--if/else和switch/case的区别

    if和switch的区别: 一.语句的格式: if/else的写法格式如下: int nA, nB; scanf_s("%d", &nA); //输入整数并赋值给变量a s ...

  6. Android应用的安全的攻防之战

    一.前言 在前两篇破解的文章中,我们介绍了如何使用动态调试来破解apk,一个是通过调试smali源码,一个是通过调试so代码来进行代码的跟踪破解,那么今天我们就这两篇文章的破解方法,来看看Androi ...

  7. Storm-源码分析- Storm中Zookeeper的使用

    在backtype.storm.cluster.clj中, 定义了storm对于Zookeeper的使用   ClusterState 首先定义操作Zookeeper集群的interface (def ...

  8. C# Enum 进行逻辑运算

    Enum定义 enum 全称(Enumeration),即一种由一组称为枚举数列表的命名常量组成的独特类型. 通常情况下,最好是在命名空间內直接定义 enum,以便该命名空间中所有的类都能够同样方便地 ...

  9. MYSQL数据库的操作

    Mysql的连接方式: 1.原生函数:mysql_connect($server,$username,$password);   //打开一个到Mysql服务器的连接 mysql_select_db( ...

  10. Android四大组件

    Activity 概念 活动是一种可以包含用户界面的组件,主要用于和用户交互.一个应用程序可以包含零个或多个活动. 基本用法 手动创建活动 1. 创建或加载布局 2. 在AndroidManifest ...

随机推荐

  1. ubuntu14.04 rabbitmq重启丢失用户信息

    一.rabbitmq数据是根据当前hostname作为node节点作为数据名保存 二.添加rabbimq用户sudo rabbitmqctl add_user tlwlmy tlwlmysudo ra ...

  2. 使用C语言 判断当前网络是否联通

    方式一: int GetNetStat( ) { char buffer[BUFSIZ]; FILE *read_fp; int chars_read; int ret; try { memset( ...

  3. java数据类型,取值范围,引用类型解析

      与javascript不同,Java是强类型语言,在定义变量前需要声明数据类型.主要分两种数据类型:基本数据类型和引用数据类型. 1.基本数据类型分析: 基本数据类型 数值型 整数型 byte字节 ...

  4. 【Leetcode_easy】599. Minimum Index Sum of Two Lists

    problem 599. Minimum Index Sum of Two Lists 题意:给出两个字符串数组,找到坐标位置之和最小的相同的字符串. 计算两个的坐标之和,如果与最小坐标和sum相同, ...

  5. iOS-UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影

    iOS UIWebView去掉滚动条和黑色背景即拖拽后的上下阴影 隐藏滚动条和上下滚动时出边界的后面的黑色的背景 webView.backgroundColor=[UIColor clearColor ...

  6. jenkins+sonar发送结果邮件的状态问题修复

    在我的这篇博文中:使用jenkins+sonar进行代码扫描,并发送自定义邮件 邮件的配置为默认的$PROJECT_DEFAULT_SUBJECT 所以发送的邮件标题中的状态是jenkins构建的状态 ...

  7. KMeans聚类

    常用的聚类方法: ①分裂方法: K-Means算法(K-平均).K-MEDOIDS算法(K-中心点).CLARANS算法(基于选择的算法) ②层次分析方法: BIRCH算法(平衡迭代规约和聚类).CU ...

  8. sql 索引【转】

    T-SQL查询进阶--理解SQL Server中索引的概念,原理以及其他   简介 在SQL Server中,索引是一种增强式的存在,这意味着,即使没有索引,SQL Server仍然可以实现应有的功能 ...

  9. Mysql统计每年每个月的数据——详细教程

    Mysql统计每年每个月的数据(前端页面统计图实现) 最终想实现的效果图,在这里就不多废话了,直接上效果图,由于测试数据有几个月是为0的,所以数据图看着会有点怪怪. 接下来是数据库的两个表,这里直接给 ...

  10. Bandicam录制三大神器之一

    链接: http://pan.baidu.com/s/1bnDIUOv 密码: etge