JS初学者必备的几个经典案例(二)!!!
2024-08-30 01:21:31
一.写出当前年份的前后5年的日期表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css"> </style>
</head> <body>
<select id="nian" onclick="dianji()"></select>年
<select id="yue" onclick="dianji()"></select>月
<select id="tian"></select>日 </body>
<script type="text/javascript">
nian();
yue();
tian();
function nian()
{
var b = new Date();
var nian=parseInt(b.getFullYear());
var str="";
for(i=nian-5;i<nian+6;i++)
{
str=str+"<option value='"+i+"'>"+i+"</option>";
document.getElementById("nian").innerHTML=str;
}
} function yue()
{
var str="";
for(i=1;i<13;i++)
{
str=str+"<option value='"+i+"'>"+i+"</option>";
document.getElementById("yue").innerHTML=str;
}
} function tian()
{
var yue=document.getElementById("yue").value;
var nian=document.getElementById("nian").value;
var ts=31;
if(yue==4 || yue==6 || yue==9 || yue==11)
{
ts=30;
} if(yue==2)
{
if((nian%4==0 && nian%100!=0) || nian%400==0)
{
ts=29;
}
else
{
ts=28;
}
}
var str="";
for(i=1;i<ts+1;i++)
{
str=str+"<option value='"+i+"'>"+i+"</option>";
document.getElementById("tian").innerHTML=str;
}
} function dianji()
{
tian();
}
</script>
</html>
二.大图轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px auto; padding:0px}
#wai{ width:250px; height:20px; position:relative; top:-30px;}
.img{ width:100%; height:300px; display:none}
.yuan{ width:20px; height:20px; background-color:#F00; border:2px solid #FFF; border-radius:100px; float:left; margin-left:30px; cursor:pointer}
</style>
</head> <body>
<br /><br />
<img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/fcfaaf51f3deb48fbcf9f4aef21f3a292df57829.jpg" style="display:block" />
<img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/。,ll.jpg" />
<img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/2cf5e0fe9925bc319ab5e0385edf8db1ca1370a2.jpg" />
<img class="img" src="卓最闪的衫扮十分感慨有人拍照要记得插袋/pic/壁纸/4-14101G43447.jpg" /> <div id="wai">
<div class="yuan" onclick="dian('0')" ></div>
<div class="yuan" onclick="dian('1')" ></div>
<div class="yuan" onclick="dian('2')" ></div>
<div class="yuan" onclick="dian('3')" ></div>
</div>
</body>
<script type="text/javascript">
<!--定义索引默认为0-->
var sy=0;
<!--调方法-->
window.setInterval("huan()",4000);
function huan()
{
<!--大图自动轮播-->
var img=document.getElementsByClassName("img");
sy++;
if(sy>=img.length)
{
sy=0;
}
for(i=0;i<img.length;i++)
{
img[i].style.display="none";
}
img[sy].style.display="block"; <!--大图轮播的同时小点跟着换样式-->
var yuan=document.getElementsByClassName("yuan");
for(j=0;j<yuan.length;j++)
{
yuan[j].style.backgroundColor="red";
}
yuan[sy].style.backgroundColor="black";
} function dian(s)
{
<!--让当前的索引sy变成你所点击的索引s。这样下一张图片就会挨着显示-->
sy=s;
<!--点击小点对应的图片显示-->
var img=document.getElementsByClassName("img");
for(i=0;i<img.length;i++)
{
img[i].style.display="none";
}
img[s].style.display="block"; <!--点击小点,小点也对应的跟着换样式-->
var yuan=document.getElementsByClassName("yuan");
for(j=0;j<yuan.length;j++)
{
yuan[j].style.backgroundColor="red";
}
yuan[s].style.backgroundColor="black";
} </script>
</html>
最新文章
- 构建高可用ZooKeeper集群
- hadoop伪分布式平台搭建(centos 6.3)
- linux笔记:linux服务管理
- python types模块
- Python error: ascii’/&#39;utf-8′ codec can’t decode byte 0xb8 in position 50: ord
- Xcode 4.6.3 Bug - .m 文件不能正常打开,uitableveiwController
- swift + jj实践
- java适配器模式随笔记
- 基础排序算法,java实现(快速,冒泡,选择,堆排序,插入)
- 搭建VPN服务器之PPTP
- hdu 2105
- Datatable插件的简单的使用方式 和 学习方式
- [uwsgi]使用建议(类似最佳实践)
- datatable的部分问题处理(动态定义列头,给某行添加事件,初始显示空数据)
- linux中使用gdb调试程序
- websocket-heartbeat-js心跳检测库正式发布
- JMeter&#160;java.net.SocketException:Operationnotsupported:connect解决方案
- SpringBoot项目接口第一次访问慢的问题
- Luogu P3616 【富金森林公园】
- DUAL PORT RAM应用实例
热门文章
- 解决:Google代码achartengine曲线代码报错问题(转)
- ECJTU大一暑假集训
- 驱动模式使用__try __excpet
- sql2005-数据库备份方案 (转载)
- BZOJ2190 [SDOI2008]仪仗队(欧拉函数)
- ural 1217. Unlucky Tickets
- JavaScript初学者应注意的七个细节
- Underscore.js 中 _.throttle 和 _.debounce 的差异
- Java递归搜索指定文件夹下的匹配文件
- Spring动态配置多数据源