JS小功能(onmouseover实现选择月份)实例代码
更新时间：2013年11月28日 15:33:52 投稿：shangke
这篇文章主要介绍了onmouseover实现选择月份实例代码，有需要的朋友可以参考一下
效果：
代码：
复制代码 代码如下:
<head runat="server">
<title></title>
<style type="text/css">
#backcolor
{
width: 400px;
height: 400px;
background: #FFFF00;
text-align: center;
border: ridge 30pt red;
margin: auto;
}
TD
{
border: ridge 3pt red;
width: 100px;
height: 100px;
}
div
{
width: auto;
height: 100px;
text-align: center;
line-height: 100px;
}
</style>
<script type="text/javascript">
window.onload = function () {
var divArry = document.getElementsByName('divname');
var divto = document.getElementById('div12');
var arry = ['春节', '情人节', '不知道有什么节日！', '清明节', '劳动节', '儿童节',
'好像这个月没有什么重大的节日吧！', '建军节', '教师节', '国庆节', '光棍节', '圣诞节'];
for (var i = 0; i < divArry.length; i++) {
divArry[i].index = i;
divArry[i].onmouseover = function () {
for (var i = 0; i < divArry.length; i++) {
divArry[i].style.background = '';
}
this.style.background = 'red';
divto.innerHTML = '<h3>' + this.innerHTML + arry[this.index] + '</h3>';
}
}
};
</script>
</head>
<body>
<table id="backcolor">
<tr>
<td>
<div id="div0" name="divname">
一月
</div>
</td>
<td>
<div id="div1" name="divname">
二月
</div>
</td>
<td>
<div id="div2" name="divname">
三月
</div>
</td>
<td>
<div id="div3" name="divname">
四月
</div>
</td>
</tr>
<tr>
<td>
<div id="div4" name="divname">
五月
</div>
</td>
<td>
<div id="div5" name="divname">
六月
</div>
</td>
<td>
<div id="div6" name="divname">
七月
</div>
</td>
<td>
<div id="div7" name="divname">
八月
</div>
</td>
</tr>
<tr>
<td>
<div id="div8" name="divname">
九月
</div>
</td>
<td>
<div id="div9" name="divname">
十月
</div>
</td>
<td>
<div id="div10" name="divname">
十一月
</div>
</td>
<td>
<div id="div11" name="divname">
十二月
</div>
</td>
</tr>
<tr>
<td colspan="4">
<div id="div12" style="width: 400px;">
</div>
</td>
</tr>
</table>
</body>
相关文章
uniapp微信小程序无法使用本地静态资源图片(背景图在真机不显示)的解决方法
写微信小程序的时候,难免会为了赶进度而直接使用本地的图片,在模拟器上的时候可以正确显示图片,但是到手机上就无法显示图片了,下面这篇文章主要给大家介绍了关于uniapp微信小程序无法使用本地静态资源图片(背景图在真机不显示)的方法,需要的朋友可以参考下2022-12-12
newxtree.js代码...2007-03-03
这篇文章主要介绍了JavaScript封装Vue-Router实现流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-09-09
两个JavaScript中的特殊值null和undefined详解
Null和Undefined是JavaScript中非常基础和重要的概念，理解它们的含义、特点和使用方式对于避免出现错误和编写健壮的应用程序非常重要，这篇文章主要介绍了两个JavaScript中的特殊值null和undefined详解,需要的朋友可以参考下2023-06-06
这篇文章主要帮助大家轻松掌握JavaScript中介者模式，告诉大家什么是js中介者模式？js中介者模式的作用是什么，感兴趣的小伙伴们可以参考一下2016-08-08
JavaScript最全公共方法汇总并解析（前端开发收藏必备）
JavaScript掌握各种常用的公共方法更是提升开发效率和代码质量的关键,无论你是初学者还是资深开发者,了解并熟练运用这些方法都能让你的代码更加简洁、高效,本篇博客将为你详细汇总并解析最全的JavaScript公共方法,涵盖数组、对象、字符串、日期等各个方面的常用技巧2024-06-06
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
言归正传：性能差异较大的机器运行结果会RT 出现大的差异,为了保险起见。还是推荐使用Array 来进行字符串拼接操作2012-05-05
这篇文章主要介绍了JavaScript 俄罗斯方块游戏,结合实例形式详细分析了JavaScript 俄罗斯方块游戏原理、实现步骤及相关操作注意事项,需要的朋友可以参考下2020-04-04
最近在小程序的开发过程中,需要用到双向绑定,遇到报错才知道微信本身是不支持对象双向绑定的,折腾一番找到解决方案,下面这篇文章主要给大家介绍了关于微信小程序中实现双向绑定的相关资料,需要的朋友可以参考下2023-01-01
移动端Web需要照顾触摸操作的体验,以及更多的屏幕旋转与尺寸适配等问题,非常琐碎,在这里为大家倾力总结40条常见的移动端Web页面问题解决方案,欢迎收看收藏!2016-05-05
最新评论