H5中使用JS实现简易日历

最新推荐文章于 2024-07-10 23:14:41 发布
最新推荐文章于 2024-07-10 23:14:41 发布
阅读量5.9k 收藏 5
点赞数 3
分类专栏： 前端工程师 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YZi_Angel/article/details/52095324
版权

1、this：当前发生事件的元素

2、value：改变标签里的内容（给input使用）
innerHTML：也改变标签里的内容（但是针对div、span等标签）

3、数组的定义与使用
-定义：arr=[1,2,3]
-使用：arr[0]

4、字符串连接
-作用：连接两个字符串
-问题：连接中的优先级（从前往后相加）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        /*div{*/
            /*width: 200px;*/
            /*height: 150px;*/
            /*border: 1px solid #ccc;*/
        /*}*/
        *{
            padding: 0;
            margin: 0px;
        }
        #div1{
            width: 190px;
            height: 320px;
            background: #ccc;
            padding: 20px;
        }
        ul{
            list-style: none;
            width: 190px;
            height: 240px;
            clear: both;
        }
        ul li{
            width: 50px;
            height: 50px;
            background: #434343;
            color: #fff;
            float: left;
            text-align: center;
            margin: 6px;
        }
        #div1 div{
            background: #fff;
            padding: 5px;
            margin: 10px 5px 0 5px;
        }
        .active{
            background: #ffffff;
            color: red;
        }
        /*p{*/
            /*line-height: 20px;*/
        /*}*/
    </style>
    <script>
//        window.onload = function(){
//            var otxt = document.getElementById('txt');
//            var obtn = document.getElementById('btn');
//            var odiv = document.getElementById('div1');
//            obtn.onclick = function(){
//                odiv.innerHTML = otxt.value;
//            }
//        }
        window.onload = function(){
            var arr = [
                    '这是一月份的活动',
                    '这是二月份的活动',
                    '这是三月份的活动',
                    '这是四月份的活动',
                    '这是五月份的活动',
                    '这是六月份的活动',
                    '这是七月份的活动',
                    '这是八月份的活动',
                    '这是九月份的活动',
                    '这是十月份的活动',
                    '这是十一月份的活动',
                    '这是十二月份的活动',
            ];
            var odiv = document.getElementById('div1');
            var oli = odiv.getElementsByTagName('li');
            var adiv = odiv.getElementsByTagName('div')[0];
            for(var i = 0; i < oli.length; i++){
                oli[i].index = i;
                oli[i].onclick = function(){
                    for(var i = 0; i < oli.length; i++)
                    {
                        oli[i].style.background = '#343434'
                        oli[i].style.color = '#fff'
                    }
                    this.style.background = 'white';
                    this.style.color = "red";
                    adiv.innerHTML = '<h2>'+ (this.index + 1) + '月的活动</h2>' + arr[this.index];
                }
            }
        }
    </script>
</head>
<body>
    <!--<input id="txt" type="text"/>-->
    <!--<input id="btn" type="button" value="改变"/>-->
    <!--<div id="div1"></div>-->
    <div id="div1">
        <ul>
            <li class="active"><b>1</b><p>JAN</p></li>
            <li><b>2</b><p>FER</p></li>
            <li><b>3</b><p>MAR</p></li>
            <li><b>4</b><p>ARP</p></li>
            <li><b>5</b><p>MAY</p></li>
            <li><b>6</b><p>JUN</p></li>
            <li><b>7</b><p>JUL</p></li>
            <li><b>8</b><p>AUG</p></li>
            <li><b>9</b><p>SEP</p></li>
            <li><b>10</b><p>OCT</p></li>
            <li><b>11</b><p>NOV</p></li>
            <li><b>12</b><p>DEC</p></li>
        </ul>
        <div>
            <h2>1月活动</h2>
            <p>快过年了，大家快乐健康会很好看</p>
        </div>
    </div>
</body>
</html>

初始状态点击第八个时的状态

分析：利用js，每点击一个月份，下边div出现不同的内容提示

YZiAngel
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
h5移动开发中日历插件
12-19
h5移动开发中日历插件，包括基本日历，带农历日期带，带提醒的等
H5日历插件
07-07
做过移动Web开发的同学都知道，移动端日期选择是很常见的需求。在PC端，我们有很丰富的选择，比较出名的就有Mobiscroll和jQuery UI Datepicker。个人看来，这些插件存在的两个显而易见的问题，第一是过重的依赖，对于jQuery的插件，已经强制依赖了80多k的庞然大物，把很多移动端项目拒之门外；第二是太过强大的功能，很多插件花百分之八十的时间去完善插件百分之二十炫酷的额外功能，导致代码量变大，配置繁杂。所以一款少依赖、轻量级和使用简单的移动端日期选择插件是非常必要的。本文简单介绍近来写的一款基于zepto的移动端轻量级日期插件--date_picker。
js实现日历功能
最新发布
kongsicheng的博客
07-10 118
实现了日历的查看，可以对年月的加减。效果图（想好看可以自己添加css）
用日历插件实现签到功能，可用在H5.微信
04-18
用H5和Query实现日历控件实现在线wap签到功能，直接传入Json数据就可以展现签到历史。如果需要添加地址等功能。只需要在页面添加接口无需修改JS文件。
使用h5+css+javascript实现简单的动态日历
qq_39299410的博客
08-16 2238
html+css+javascript基础实现动态日历 思路大概是使用javascript获取到6x7个元素的数组，将没有数值的元素置为null，并显示在html页面。 HTML部分 calendar.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态日历</title> <link rel="styl
html5日历滑动
09-21
html5 wap 微信公众平台手机版 js日历滑动组件,网上的很多都是后台那种选择点击的日历不适合手机版，难得找到这种类型的，贡献给大家。
使用js和h5技术实现录音
01-16
recorder.js HTML5录音解决方案 由于Chrome47以上以及QQ浏览器需要HTTPS的支持，所以烦请更换至360、FF、Edge进行体验，或下载项目至本地通过localhost访问。 另：IE和Safari全版本不支持录音功能
JS使用H5实现图片预览功能
12-13
JS使用H5实现上传图片预览的功能，以下是代码的实现： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传预览</title> [removed] //预览图片,参数说明：第...
H5+原生js 实现拼图游戏
08-24
- **数据结构**：JavaScript中的数组常用来存储拼图块的信息，如原始图像的切片、当前状态等。 - **DOM操作**：通过`document.getElementById`、`appendChild`等方法，JavaScript能动态地创建、修改和操作HTML元素...
h5+css+js原生实现简易飞机大战坦克
12-06
在本项目中，“h5+css+js原生实现简易飞机大战坦克”是一个基于Web技术构建的简单游戏，主要利用HTML5、CSS3和JavaScript原生代码来完成。这个项目对于初学者来说是一个很好的实践平台，可以提升JavaScript编程技能...
H5写日历挂件
always007的博客
01-09 871
/*div{*/             /*width: 200px;*/             /*height: 150px;*/             /*border: 1px solid #ccc;*/         /*}*/         *{             padding: 0;             margin: 0px;        
自定义 移动端 日历插件
04-13
经历苦苦的寻找，终于让我搞定了一个移动端时间组件，可以完全自定义
js手机端，H5端，自适应日历插件
11-17
js手机端，H5端，自适应日历插件，内附有demo实例，简单易懂
H5 日历插件
06-05
基于Java 的H5 日历插件源码，有阳历、农历、节气、节日，鼠标移入显示详细信息
H5页面实现日历表格标签左右拖拽，和删除
08-20
该页面引用bootstrap.js，实现HTML5，左右拖拽标签功能，标签拖入表格显示一行标签，并且能够删除
移动端H5日历组件
08-10
移动端H5日历组件
用HTML5编写日历,js编写当天简单日历效果【实现代码】_javascript技巧
weixin_28949355的博客
07-04 1399
之前一直很想用javascript写一个日历，但是因为完全没有好的思路， 所以迟迟没有尝试。最近在网上刚好看到用javascript编写的简单日历的例子，代码量虽然不大， 但是我觉得很好地阐述了js日历的实现原理。自己也尝试着做了一下，收获蛮大，掌握了基本的实现原理后，再想增加更多的功能，完全就可以自由发挥了，先在这里分享一下吧，有兴趣的可以试试！一.表格行数问题既然要显示日期表格的话，首先得知道...
vue 的h5日历组件
sinat_35082096的博客
07-28 1195
项目总结
vue H5项目：利用vant ui二次封装的选择月份的日历组件
江咏之
11-02 5428
因为vant里面只有选择天数的日历没有选择月份的，所以我自己又封装了一个组件。 上代码： 这是封装的子组件： <template> <div> <div @click="showPopup"> {{ yesr }}-<span v-show="actived < 10 ? true : false">0</span >{{ actived }} </div> <van-p
vue在h5中使用weui实现日期时间选择器
05-11
可以使用weui.js中的DateTimePicker组件来实现日期时间选择器，具体实现步骤如下： 1. 引入weui.js和weui.css文件 ``` <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.0.1/weui.min.css"> <script src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script> ``` 2. 在Vue组件中定义一个input元素，用于显示选择的日期时间： ``` <template> <div> <input type="text" placeholder="请选择日期时间" v-model="selectedDate" readonly> </div> </template> <script> export default { data() { return { selectedDate: '' } }, } </script> ``` 3. 在Vue组件的mounted生命周期中，使用weui.js中的DateTimePicker组件初始化日期时间选择器： ``` mounted() { weui.datePicker({ start: new Date(), // 开始日期，今天 end: 2030, // 结束日期 onChange: (result) => { console.log(result); }, onConfirm: (result) => { this.selectedDate = result[0].value + '-' + result[1].value + '-' + result[2].value + ' ' + result[3].value + ':' + result[4].value; } }); } ``` 4. 在DateTimePicker组件的onConfirm回调函数中，将选择的日期时间格式化后赋值给Vue组件中的selectedDate属性，从而实现在input元素中显示选择的日期时间。 注意：在使用weui.js中的DateTimePicker组件时，需要将input元素的readonly属性设置为true，禁止用户手动输入日期时间。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值