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 ...
随机推荐
- 解决kali无法连接网络问题
键入 ifconfig -a 查看网卡 ,是否存在 键入 leafpad /etc/network/interfaces 查看其中是否有如下语句,没有添加上即可:auto eth0iface eth0 ...
- 39 Flutter仿京东商城项目 收货地址列表、增加 修改收货地址布局、弹出省市区选择器
加群452892873 下载对应39课文件,运行方法,建好项目,直接替换lib目录 pubspec.yaml city_pickers: ^ AddressAdd.dart import 'packa ...
- 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_06-课程营销实战分析
课程营销信息包括课程价格.课程有效期等信息. 课程营销信息使用course_market表存储. 接口我们要提供两个. 接口1先查询课程营销的信息,在页面展示. 接口2:叫做更新,如果发现数据不存在就 ...
- 【416】Ubuntu 配置
修改桌面主题:How to Install Desktop Themes on Ubuntu 18.04 LTS 命令行显示短路径:怎样ubuntu下命令行终端显示短路径 gedit 扩展插件:Use ...
- java cpu 使用率100%
--宝典开始 top :查看 进程 ,选CPU使用率高的 获取进程ID,pid top -Hp pid:查看线程,选CPU使用率高的 获取线程ID,threadid printf "%X\n ...
- LNMP一键环境安装多PHP版本共存的方法
多PHP版本只支持LNMP模式,LNMPA.LAMP模式下不支持!要使用多PHP先安装多PHP版本,在lnmp1.4源码(lnmp1.3的不行哦)目录下运行:./install.sh mphp 按提示 ...
- Selenium ? 也要学...!
一.selenium 简介 Selenium是ThroughtWorks公司一个强大的开源Web功能测试工具系列,包括Selenium-IDE.Selenium-RC.Selenium-Webdriv ...
- 【数据库开发】C++测试redis中的publish/subscribe
运用 http://blog.csdn.net/xumaojun/article/details/51558237 中的redis_publisher.hredis_publisher.cpp red ...
- 最新 梦网科技java校招面经 （含整理过的面试题大全）
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.梦网科技等10家互联网公司的校招Offer,因为某些自身原因最终选择了梦网科技.6.7月主要是做系统复习.项目复盘.Leet ...
- 简单介绍shell编程四剑客之sed
概要:分别的作用 grep:文本过滤(模式:pattern)工具,grep,egrep,fgrep,擅长过滤. sed:stream editor 文本编辑工具:(流编辑器),擅长取行.替换. awk ...