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 ...
随机推荐
- IIS添加对ashx文件的支持
IIS添加对ashx文件的支持 第一步:每个网站都有个“处理程序映射”,用于添加对各种文件的处理程序 第二步:进入“处理程序映射",可以看到对各种文件的处理程序列表,其中就有对ashx文件的 ...
- 【Leetcode_easy】633. Sum of Square Numbers
problem 633. Sum of Square Numbers 题意: solution1: 可以从c的平方根,注意即使c不是平方数,也会返回一个整型数.然后我们判断如果 i*i 等于c,说明c ...
- 折线图值和坐标轴y轴不对应问题记录
这个问题的产生是由于,在代码中加入了累加算法导致, series: lineObject.sort.map(item => { return ( { name: item, type: 'lin ...
- 关于LSTM的输入和训练过程的理解
1.训练的话一般一批一批训练,即让batch_size 个样本同时训练: 2.每个样本又包含从该样本往后的连续seq_len个样本(如seq_len=15),seq_len也就是LSTM中cell的个 ...
- AWS 存储服务（三）
目录 AWS S3 业务场景 挑战 解决方案 S3的好处 S3 属性 存储桶 Buckets 对象 Object S3 特性 S3 操作 可用性和持久性 一致性 S3 定价策略 S3高级功能 存储级别 ...
- 修改NGUI 3.11 的控件 inputfileld hide input 属性bug
1.勾选hideinput属性后,输入中文,会出现,无法显示的问题. 2.勾选hideinput属性后,密码框会出现第一个字母被吃掉的问题 解决方案:控件都不要勾选hideinput属性,代码做如下修 ...
- Efcore迁移
Efcore迁移 Add-Migration XX:1.根据模型的实际结构对比当前快照,从而生成新迁移文件的Up和Down方法2.根据模型的实际结构修改快照和新迁移文件---------------- ...
- Linear regression with one variable - Cost function
摘要: 本文是吴恩达 (Andrew Ng)老师<机器学习>课程,第二章<单变量线性回归>中第7课时<代价函数>的视频原文字幕.为本人在视频学习过程中逐字逐句记录下 ...
- IBM.WMQ订阅主题，连续获取消息解决办法
去队列里面一直获取消息,一开始想到了两种解决方案: 第一:订阅一次获取一次消息,正常的话每次都能获取到,但是要及时去清理订阅并且时间粒度不好控制 第二:订阅一次,再获取消息这里加死循环,超时MQ已经做 ...
- RecyclerView的scrollToPosition和smoothScrollToPosition
关于recyclerview滑向指定位置,肯定会想到scrollToPosition和smoothScrollToPosition两个方法. 源码分析scrollToPosition,最后会调用vie ...