<!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. VCTravel

    #pragma once #include <osgViewer/Viewer> #include <osgViewer/ViewerEventHandlers> #inclu ...

  2. iOS 当键盘覆盖textFiled时简单的处理方法

    //方法1--- - (void)textFieldDidBeginEditing:(UITextField *)textField { if (iPhone5) { return; } else { ...

  3. git 关于Git每次进入都需要输入用户名和密码的问题解决

    解决办法: git bash进入你的项目目录,输入: git config --global credential.helper store 然后你会在你本地生成一个文本,上边记录你的账号和密码.当然 ...

  4. Casbin 使用记录

    Casbin 是什么? 官方解释:Casbin是一个强大的.高效的开源访问控制框架,其权限管理机制支持多种访问控制模型. Casbin只负责访问控制.身份认证 authentication(即验证用户 ...

  5. PHP和MySQL.Web开发(原书第4版)学习盲点笔记

    1.浏览器输出中文乱码解决: <?php header("Content-type: text/html; charset=utf-8"); ?> 相当于html中的: ...

  6. 解决 Ceph v14.2.1 RGW使能压缩时遇到不生效的问

    根据常规方法部署Ceph(14.2.1 or 14.2.2)集群+rgw后,通过命令“radosgw-admin zone placement modify --rgw-zone=default -- ...

  7. go基础系列 第二章 go指针

    一. 指针 先来看一段代码 var pa *int pa = &a *pa = fmt.Println(a) 这里定义了一个int类型的变量a, 有定义了一个指针类型的变量pa, 让pa指向了 ...

  8. 最新 蚂蚁金服java校招面经 (含整理过的面试题大全)

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.蚂蚁金服等10家互联网公司的校招Offer,因为某些自身原因最终选择了蚂蚁金服.6.7月主要是做系统复习.项目复盘.Leet ...

  9. Spring + Atomikos 分布式事务实现方式

    不同的数据库一定要分包建立 引用:http://blog.csdn.net/benluobobo/article/details/49818017 http://blog.csdn.net/yds49 ...

  10. Java check是否是日期类型

    boolean checkFormate(string parm){ Pattern pattern = Pattern.compile("([0-9]{4})(0[1-9]|1[0-2]) ...