js中的经典案例--简易万年历
js中的经典案例--简易万年历
html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
* { padding: 0; margin: 0; }
li { list-style: none; }
body { background: #f6f9fc; font-family: arial; } .calendar { width: 210px; margin: 0 auto; padding: 10px 10px 20px 20px; background: #eae9e9; }
.calendar ul { width: 210px; overflow: hidden; padding-bottom: 10px; }
.calendar li { float: left; width: 58px; height: 54px; margin: 10px 10px 0 0; border: 1px solid #fff; background: #424242; color: #fff; text-align: center; cursor: pointer; }
.calendar li h2 { font-size: 20px; padding-top: 5px; }
.calendar li p { font-size: 14px; } .calendar .active { border: 1px solid #424242; background: #fff; color: #e84a7e; }
.calendar .active p { font-weight: bold; } .calendar .text { width: 178px; padding: 0 10px 10px; border: 1px solid #fff; padding-top: 10px; background: #f1f1f1; color: #555; }
.calendar .text h2 {font-size: 14px; margin-bottom: 10px; }
.calendar .text p { font-size: 12px; line-height: 18px; }
</style>
</head>
<body>
<div id="tab" class="calendar">
<ul id="box">
<li class="active"><h2>1</h2><p>JAN</p></li>
<li ><h2>2</h2><p>FER</p></li>
<li ><h2>3</h2><p>MAR</p></li>
<li ><h2>4</h2><p>APR</p></li>
<li ><h2>5</h2><p>MAY</p></li>
<li><h2>6</h2><p>JUN</p></li>
<li><h2>7</h2><p>JUL</p></li>
<li><h2>8</h2><p>AUG</p></li>
<li><h2>9</h2><p>SEP</p></li>
<li><h2>10</h2><p>OCT</p></li>
<li><h2>11</h2><p>NOV</p></li>
<li><h2>12</h2><p>DEC</p></li>
</ul>
<div class="text" id="txt">
<h2>1月活动</h2>
<p>快过年了,大家可以商量着去哪玩吧~</p>
</div>
</div> </body>
下面是通过js代码实现对页面的控制,主要修改点击时页面的变话
<script type="text/javascript">
var arr=['快过年了,大家可以商量着去哪玩吧~',
'大家好好学习吧222222~~~',
'大家好好学习吧222222333~~~',
'大家好好学习吧222444222~~~',
'大家好好学习555吧222222~~~',
'大家好好学习吧666222222~~~',
'大家好好学习吧227772222~~~',
'大家好好学习吧28888822222~~~',
'大家好好学习吧99999222222~~~',
'大家好好学习10000000吧222222~~~',
'大家好好学习吧111111222222~~~',
'大家好好学习吧22222200000000000~~~'] var ali=document.querySelectorAll("#box li");
var oh2=document.getElementById("txt").children[0];
var op=document.getElementById("txt").children[1]; //创建一个循环,遍历每一个li;
// 所有li绑定点击事件
// 循环立即执行,不会等事件
for(var i=0;i<ali.length;i++){
//给每一个li编号;
ali[i].abc=i;
//点击列表时让列表变色;循环不会等事件;如果不重新遍历一次;那么点击的时候循环早遍历完了;点击时的i=ali.length;
ali[i].onclick=function(){
for(j=0;j<ali.length;j++){
//让每次li都没有class属性;每次点击后再给他添加属性;
ali[j].className="";
}
//this指向调用这个函数的对象;
console.log(this);
//给当前加上class名,点到谁就会变色
this.className="active";
console.log(this.abc)
//根据索引找到数组中的数据
oh2.innerHTML=this.abc+1+"月活动";
op.innerHTML=arr[this.abc];
} }
</script>
js中的经典案例--简易万年历的更多相关文章
- JS中最经典的全局变量和局部变量问题
话不多说,直接上例子: 1.程序的运行结果为:100 10 100 var a = 10; function test(){ a = 100; console.log(a); console.lo ...
- js中的小案例(一)
效果图: html代码: <div id="date"> <p> <span id="prev">上一月</span& ...
- 拾取模型的原理及其在THREE.JS中的代码实现
1. Three.js中的拾取 1.1. 从模型转到屏幕上的过程说开 由于图形显示的基本单位是三角形,那就先从一个三角形从世界坐标转到屏幕坐标说起,例如三角形abc 乘以模型视图矩阵就进入了视点坐标 ...
- JS中如何生成全局变量
JS中如何生成全局变量 一.总结 一句话总结:在函数内部,一般用var声明的为局部变量,没用var声明的一般为全局变量 在函数内没用var声明的一般为全局变量 1.js中的函数中的this指向的是谁? ...
- JS中数值类型的本质
一.JS中的数值类型 众所JS爱好友周知,JS中只有一个总的数值类型--number,它包含了整型.浮点型等数值类型.其中,浮点数的实现思想有点复杂,它把一个数拆成两部分来存储.第一部分是有效位数,也 ...
- 【JS中循环嵌套常见的六大经典例题+六大图形题,你知道哪几个?】
首先,了解一下循环嵌套的特点:外层循环转一次,内层循环转一圈. 在上一篇随笔中详细介绍了JS中的分支结构和循环结构,我们来简单的回顾一下For循环结构: 1.for循环有三个表达式,分别为: ①定义循 ...
- python 全栈开发,Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- 前端JavaScript(3)-关于DOM操作的相关案例,JS中的面向对象、定时器、BOM、位置信息
小例子: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉,就可以 ...
- php中foreach()函数与Array数组经典案例讲解
//php中foreach()函数与Array数组经典案例讲解 function getVal($v) { return $v; //可以加任意检查代码,列入要求$v必须是数字,或过滤非法字符串等.} ...
随机推荐
- python学习第十五天集合的创建和基本操作方法
集合是python独有的数据列表,集合可以做数据分析,集合是一个无序的,唯一的的数据类型,可以确定列表的唯一性,说一下集合的创建和基本常见操作方法 1,集合的创建 s={1,2,4} 也可以用set( ...
- Mybatis-技术专区-中的条件查询createCriteria example里面的条件
之前用Mybatis框架反向的实体,还有实体里面的Example,之前只是知道Example里面放的是条件查询的方法,可以一直不知道怎么用,到今天才开始知道怎么简单的用. 在我们前台查询的时候会有许多 ...
- c#模板化生成接口
最近打算做这样一个事情,一个桌面系统项目既可以一体化部署,作为一个软件一个进程部署,也可以把业务服务化部署. 那一般意味着我们要完全写2套东西,一套是直接UI调用业务,一套是Ui调用RPC.这样比较多 ...
- 纯手动拉WebPanel页面保存出现错误提示 "error:字符文本中的字符太多"
环境为.Net 没有使用WorkWithPlus 纯手拉WebFrom页面 问题出现情况如下:在拉页面的过程中拖了3个Value类型的变量到Table中 页面如下 但是在我保存的时候 发现提示如下错 ...
- 【记录】mysql 查看某数据库各个表容量大小SQL
有时候我们可能需要了解数据库中各个表的容量及大小,好了解数据库情况. 现只需要一条SQL就可以直观的展示出来. SELECT table_schema AS '数据库', table_name AS ...
- Elasticsearch单机安装_集群搭建_索引基本操作_Head插件安装与基本操作_ik分词器配置_logstash实现数据同步_教程
一.Elasticsearch单机安装 1.将es安装包传到服务器上 这是安装包 这里我是用的是WinSCP上传工具,上传到/home/plugins文件下. 进入Xshell,验证一下是否上传成功. ...
- ini配置文件内如果有更新参数
ini配置文件内如果有更新参数 执行更新 更新参数 自动去下载执行????
- 九、Rxjs请求对Observable进行封装
1.引入 Http.Jsonp.Rxjs 三个模块 2.请求中添加一个 .map(res => res.json) 问题 1.Property 'map' does not exist on t ...
- 注意!黑客可以通过CSS3功能攻击浏览器
随着通过HTML5和CSS3引入的惊人数量的功能,浏览器的攻击面也相应增长.因此,这些功能之间的交互可能会导致意外行为影响用户的安全,这并不奇怪.在这篇文章中,中国知名黑客安全组织东方联盟描述了这样一 ...
- XML及XML的解析
XML的用途 充当显示数据(以XML充当显示层) 存储数据的功能 以XML描述数据,并在联系服务器与系统的其余部分之间传递.(传输数据的一种格式),从某种角度来讲,XML是数据封装和消息传递技术 SA ...