H5中使用JS實現簡易日曆

阿新 • • 發佈：2019-02-18

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出現不同的內容提示

H5中使用JS實現簡易日曆

1、this：當前發生事件的元素 2、value：改變標籤裡的內容（給input使用） innerHTML：也改變標籤裡的內容（但是針對div、span等標籤） 3、陣列的定義與使用 -定義：arr=[1,2,3] -使用：arr[0

h5原生js實現輪播圖

list sla head log startx creat ase hit eve 預覽地址：http://s.xnimg.cn/a90529/wap/wechatLive/test/slide.html <!DOCTYPE html> <html l

[js高手之路]Node.js實現簡易的爬蟲-抓取博客所有文章列表信息

r.js 目錄 ref 抓取 {} attr 視頻 json clist 抓取目標：就是我自己的博客：http://www.cnblogs.com/ghostwu/ 需要實現的功能：抓取博客所有的文章標題，超鏈接，文章摘要，發布時間需要用到的庫： node.js自帶的h

js 實現簡易留言板功能

con wid NPU children 標準 element 出錯 hdel focus <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh

JS實現簡單日曆含下一月和上一個月的切換

這裡只是一個簡單的原創例項，目的是瞭解一下日曆的基本原理。如果您實在需要實現豪華美觀的版本，可以到https://www.layui.com/laydate/下載好用開源的bootstrap日曆控制元件的例項程式碼。https://blog.csdn.net/qq_28633249/art

H5+C3+JS實現雙人對戰五子棋遊戲（UI篇）

本篇文章實現的是雙人對戰模式，主要是實現除人機AI演算法和判斷輸贏之外的其他功能，下一篇將會發布AI 框架搭建前端精品教程：百度網盤下載 ? 1

JS實現簡易版備忘錄

1、概述實現像手機便籤一樣功能的簡易版備忘錄頁面，該備忘錄全部用JQuery提供的功能實現，非常簡單易懂。 2、功能介紹（1）簡潔的頁面，主介面僅提供兩個按鈕用於新增和刪除記錄; （2）新增完成的多條記錄，支援批量選擇刪除；（3）每條記錄支援點選行內進行修改; （4

使用html+css+js實現簡易計算器

使用html+css+js實現簡易計算器，效果圖如下： html程式碼如下： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-

JS實現簡易版貪吃蛇小遊戲（純js程式碼）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head&

JS實現簡易版富文字編輯器

<table border='1' class="tablebox" id='tablebox'> <tr> <td> <input type="button" name="bold" value='Bold' clas

原生JS實現簡易計算器

<!doctype html> <html> <head> <meta charset="utf-8"> <title>簡易計算器</title> <style> #div{ width: 300

JS------------實現簡易幻燈片

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Easy slides</title><script> var imgArr=n

H5中 JS 禁用安卓手機物理返回鍵 , 微信瀏覽器中也支援

直接引入以下程式碼就可以實現 XBack = {}; (function(XBack) { XBack.STATE = 'x - back'; XBack.element; XBa

Node.js 實現簡易爬蟲

為什麼選擇利用node來寫爬蟲呢？就是因為cheerio這個庫，全相容jQuery語法，熟悉的話用起來真真是爽依賴選擇 cheerio： Node.js 版的jQueryhttp：封裝了一個HTPP伺服器和一個簡易的HTTP客戶端iconv-lite：解決爬取gb2

關於用js實現的日曆記事功能

博主是個java新手，目前在做的一個專案就是考勤排班系統，主要負責的模組是排班模組這一方面。需求上面要求要在顯示當月的日曆表，日曆表上同時動態生成上班時間、下班時間、是否值班、值班型別等功能。當時在網上找了很多日曆模板，都沒有找到能夠符合自己要求的。便決定自

JS簡易日曆實現

效果圖實現點 01.表格行數問題首先得知道這個表格有多少行多少列，列數是已經確定的，從星期天（日曆上第1列是星期天）到星期六一共7列 getDay()方法了，該方法返回陣列[0-6]中的一個數字，0代表星期天，1代表星期一，2代表星期二，

利用JS實現H5中的Table表格的隔行換色

最近正在學習前端的知識，正好進行到JS的基礎階段，為了以後更好的找一份工作，開始自己的技術部落格的學習階段，下面是剛學習的結果，今天有三個作業，分別是利用JS實現Table的隔行換色，有一點點事件的繫結問題，自己第一次寫技術部落格，大家且將就著看，也有參考別人的內容，比如自己

JS 實現變量在字符串中的多層拼接與嵌套

code source soft 編輯 str clas strong ros eid 簡單點。。。 ‘<a onclick="editCsRole(roleId)" class="openNewTab">編輯</a>‘; 其中 role

JS實現循環刪除數組中元素的方法介紹

blog 但是 rom 移除 ons 朋友 function cnblogs 調整這篇文章主要給大家介紹了關於Javascript循環刪除數組中元素的幾種方法，文中給出了詳細的示例代碼供大家參考學習，對大家具有一定的參考學習價值，需要的朋友們下面來一起看看吧。本文主

實現簡易版的moment.js

date對象 hour getdate git .get ice ace -m mon 　　github源碼地址： www.baidu.com 　　作者：易憐白　　項目中使用了時間日期的處理方法，只使用了部分方法，為了不在引入第三方的庫（moment.js），這裏自己封

H5中使用JS實現簡易日曆

相關推薦