javascript做日历

2024-11-05

javascript简易日历制作

学习记录 01.练习数组的用法 02.理解this.index的用法 03.绑定事件深入练习理解 html代码 <div id="date"> <ul id="uldate"> <li class="active">1月</li> <li>2月</li> <li>3月</li> <li>4月</li> <li>5月&

当我们需要在页面中显示某月的事项,或是选择某一段日期时,常常要使用到日历组件.这一组件同样有着许多现成的类库,然而亲自动手开发一个日历,从中了解其实现原理也是非常必要的.在本例中我们就将制作一款非常经典的日历组件. 个人博客地址:http://www.zhsh666.xyz/ 1. 创建DOM代码本例的HTML代码如下: <div class="calendar"> <div class="title"> <h1 class=&quo

从.net复制源代码中国农历阵列，必要做日历

从.net复制源代码中国农历阵列,必要做日历 const { 闰月的月份.春节的阳历日期(农历正月初一).农历的每一个月天数 } c_arrLunarInfo: array [1900 .. 2100] of array [0 .. 15] of Integer = ( // 农历 1900-2100 (8, 1, 31, 29, 30, 29, 29, 30, 29, 30, 30, 29, 30, 30, 29, 30), // 1900 (0, 2, 19, 29, 30, 29, 29,

用javascript做别踩白块游戏1

初学Javascript做的一个别踩白块小游戏,代码简陋,如下: <!DOCTYPE html> <html> <head>  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,

javaScript实现日历控件

近期学习js.闲来无事就写了个简单的日历控件.不知道别人是怎么实现的.纯粹自己想法写的, 写的不好 ,但能够起到抛砖引玉的作用. 先来看效果. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdTAxMDU4Njg0Mg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" height="242" wid

用JavaScript做精灵图

用JavaScript做精灵图精灵图可以不用在给每一个小块一一的修改位置.主要原理是找到整张的背景图与li的下标的数学关系. 这是一大张背景图,这个背景图的位置其实是有规律的,每两张之间间隔一个固定长度,这个固定长度刚好等于一个小图标的长度,我们使用的这个图间隔44px. CSS样式如下图所示样式代码如下: <style> *{ margin: 0; padding: 0; } body{ background-color: skyblue; } .conve{ width: 290px

完全原生javascript简约日历插件，js、html

效果图: 效果如图所示,尽管看上去并不是很美观,但是,基本上的功能还是已经完成了,码了一天多的时间,权当做复习一下js吧. 整个做下来差不多码了500多行代码~其实只是很多的样式也包括了在其中了,虽然代码有点多,但是很多地方还是可以优化的. 作为新手,优化什么的先滚一边了,现在主要的是自己要懂对吧~如果感觉能对你有所帮助,不嫌弃的话就看看吧. 思路: ①找好一张样式图片: ②分析样式布局…… ③涉及到的相关事件:click(单击事件).mouseover(鼠标覆盖).mouseout(鼠标离开)

用javascript做一个视频播放器

以前我们在网页上播放视频,都是要麻烦flash来实现.看着那一大段的<object>真心觉得累.随着html5的不断普及,现在是时候使用html5提供的video元素来做点正经事了,但是要把界面打造的更加个性一点,需要一点javascript和一点css.如果能再加一个漂亮的美工,那就完全不在话下了.在项目早些时候我们是通过phoneGap提供的插件实现的视频播放,但是有一个问题,翻页的时候,视频没有跟着一起动,感觉就是脱离了页面.后来采用video 来播放就可以一起移动了,但是它的默认样式

用原生javascript做的一个打地鼠的小游戏

学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>打地鼠的小游戏</title> <link rel

Javascript之日历

javascript 小日历

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="日历.WebForm1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtm

用javascript做别踩白块游戏2

这一次做一个好一点的,要求黑块自动下落,且速度逐渐加快 <!DOCTYPE html> <html> <head>  <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-

用JavaScript做一個簡單的計算器

今天繼續學習JavaScript,視頻講的確實挺差勁的.還是只能跟著W3School自己慢慢摸索著弄了.自己百度了一下,參考了一個大佬寫的一個簡單的計算器代碼.代碼能跑通,但是做出來的樣子實在是感覺太丑了.做完以後自己又把樣式重新寫了一遍.結果就變成這樣的了.下面就是今天的代碼: <!doctype html> <html> <head> <meta charset="utf-8"> <title>JSNote1</ti

JavaScript做简单的购物车效果（增、删、改、查、克隆）

比如有时候遇到下面这种情况,点击加入购物车,然后在上方的购物车中动态的添加商品以及商品的信息,我们就可以通过JavaScript实现简单的这些操作. 首先我们需要在html文档中,通过css对页面的布局做一些简单的设置.并创建两个模板,其display属性设为隐藏.后面再通过克隆的方法往指定的位置添加元素.大致css样式如下: .buy { width: 200px; height: 300px; display: inline-block; border: 1px dashed grey; b

饶有兴致的用javascript做了个贪食蛇游戏

09年写的东西.一直藏在自己的记事本里头,现在开始整理写博客,所以直接搬过来先上效果图再添代码: <HTML> <HEAD> <TITLE>贪吃蛇 Snake v1.0 版,作者:刚刀飞絮</TITLE> <STYLE> body{ font-size:9pt; } table{ border-collapse: collapse; border:solid #333 1px; } td{ height: 10px; width: 10px;

SQL做日历

DECLARE @DATE DATETIME SET @DATE=GETDATE() SELECT SUN -DAY(@DATE),@DATE))=@DATE THEN '*' ELSE '' END) ,MON -DAY(@DATE),@DATE))=@DATE THEN '*' ELSE '' END) ,TUE -DAY(@DATE),@DATE))=@DATE THEN '*' ELSE '' END) ,WED -DAY(@DATE),@DATE))=@DATE THEN '*' EL

Javascript做图片无缝平滑滚动

因需要,google得到.作者不详.多谢.我这里略作修改.只是改变了ID. <!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&

JavaScript简易日历

<!DOCTYPE html PUBLIC "-//W3C//h2D XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/h2D/xhtml1-transitional.h2d"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

Javascript做模糊查询

<html> <head> <title>Javascript模糊查找</title> </head> <body> <li onload="load('Name')" id="name">Name</li> <li onload="load('sex')" id="sex">sex</li> <li

[求教]利用typescript对Javascript做强类型检测提示

近期在学习typescript的时候,发现ts居然可以对原生js做强检测.发现从v2.3就开始直接了.这让我感叹他的变化,又让我自己感到学习的缓慢.本文章就对他小试牛刀一下. 一.他是的使用与支持通过阅读官网的说明,了解到他实现验证是通过jsdoc的注释结构实现.然后在.js文件头部加入如下注释标签即可: 标记说明 // @ts-nocheck 标记此文件不做类型检测 // @ts-check 标记此文件做类型检测,但没有用--checkJS参数时 // @ts-ignore 标记后面一段不

html,CSS,javascript 做一个弹窗

弹窗的工作原理:在网页中写一个div ,布局到想要显示的位置,将display设为none,隐藏该div.然后通过点击事件或其他操作,利用Js代码,将display设置为block,将div 显示到网页中. Tips:display:none//隐藏 display: block//显示效果图:点击弹出一个弹窗按钮,显示弹窗内容代码: <!doctype html> <html> <head> <title>弹窗练习</title> &l