swith-case 日历
<!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 日历的更多相关文章
- swith case判断
swith case是js中的一种判断方式 应用于变量或表达式在不同值情况下的不同操作,每一种case结束都要加break结束整个判断 var num = 2; switch(num){ case 0 ...
- C# 利用键值对取代Switch...Case语句
swich....case 条件分支多了之后,会严重的破坏程序的美观性. 比如这个 上述代码是用于两个进程之间通信的代码,由于通信的枚举特别的多,所以case的分支特别的多.导致了代码的可读性,可维护 ...
- SQL case when else
先占个坑,sql 版本的swith case SELECT Oldvote, (CASE THEN (SELECT NOW() from dual) END) as "number" ...
- 使用策略模式重构switch case 代码
目录 1.背景 2.案例 3.switch…case…方式实现 4.switch…case…带来的问题 5.使用策略模式重构switch…case…代码 6.总结 1.背景 之前在看<重构 ...
- C++基础--if/else和switch/case的区别
if和switch的区别: 一.语句的格式: if/else的写法格式如下: int nA, nB; scanf_s("%d", &nA); //输入整数并赋值给变量a s ...
- Android应用的安全的攻防之战
一.前言 在前两篇破解的文章中,我们介绍了如何使用动态调试来破解apk,一个是通过调试smali源码,一个是通过调试so代码来进行代码的跟踪破解,那么今天我们就这两篇文章的破解方法,来看看Androi ...
- Storm-源码分析- Storm中Zookeeper的使用
在backtype.storm.cluster.clj中, 定义了storm对于Zookeeper的使用 ClusterState 首先定义操作Zookeeper集群的interface (def ...
- C# Enum 进行逻辑运算
Enum定义 enum 全称(Enumeration),即一种由一组称为枚举数列表的命名常量组成的独特类型. 通常情况下,最好是在命名空间內直接定义 enum,以便该命名空间中所有的类都能够同样方便地 ...
- MYSQL数据库的操作
Mysql的连接方式: 1.原生函数:mysql_connect($server,$username,$password); //打开一个到Mysql服务器的连接 mysql_select_db( ...
- Android四大组件
Activity 概念 活动是一种可以包含用户界面的组件,主要用于和用户交互.一个应用程序可以包含零个或多个活动. 基本用法 手动创建活动 1. 创建或加载布局 2. 在AndroidManifest ...
随机推荐
- 015-命令行下载安装brew
一.brew 1.安装Homebrew 安装命令: ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/inst ...
- es6 关于map和for of的区别有哪些？
1.es6 关于map和for of的区别有哪些? ——主要想了解一下性能方面的
- 统一建模语言UML
目录 1. UML定义 2. UML结构 2.1 视图(View) 2.2 图(Diagram) 2.3 模型元素(Model element) 2.4 通用机制(General mechanism) ...
- Docker从入门到动手实践
一些理论知识,我这里就不累赘了 docker 入门资料,参考:https://yeasy.gitbooks.io/docker_practice/content/ Dockerfile常用命令,图片来 ...
- FlappyBird
学习CocosCreator有段时间了,现在花了两天时间写了个像素鸟的小游戏,这个游戏之前又看到过,但是不知道怎么又下架了,之前还是蛮火的游戏,想起来后去网上看了看,原来是因为侵犯了 超级玛丽 的游戏 ...
- python全栈索引
书签 python基础 太白金星 TigerLee python基础一 pytcharm安装详细教程 python基础二 python基础数据类型 Python最详细,最深入的代码块小数据池剖析 深浅 ...
- 【C/C++开发】C++队列缓存的实现
C++队列缓存的实现 为什么使用队列缓存 c++的队列缓存主要用于解决大数据量并发时的数据存储问题,可以将并发时的数据缓存到队列中,当数据量变小时再匀速写入硬盘中. 引用queue队列 在头文件中引用 ...
- Shiro加盐加密
接本人的上篇文章<Shiro认证.角色.权限>,这篇文章我们来学习shiro的加盐加密实现 自定义Realm: package com.czhappy.realm; import org. ...
- Selenium绕过登录的实现
1.使用命令行启动Chrome:Mac:/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome -remote-debugging ...
- Java基础---Java 开发工具IntelliJ IDEA 安装
1.1 开发工具概述IDEA是一个专门针对Java的集成开发工具(IDE),由Java语言编写.所以,需要有JRE运行环境并配置好环境变量.它可以极大地提升我们的开发效率.可以自动编译,检查错误.在公 ...