`
FireFlyWithCat
  • 浏览: 88326 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

html中的小技巧(二)

    博客分类:
  • html
阅读更多
用js实现页面时间:
方法一:很简单的写法
<div id="clock"></div>
<script>
function changeClock()
{
	var d = new Date();
	document.getElementById("clock").innerHTML = d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate() + " " + d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
}
window.setInterval(changeClock, 1000);
</script>

可以把中间的”-”改为年月日。
方法二:带星期的
function DateDemo(){
   var d, s = " ";           // 声明变量。
   d = new Date();       // 创建 Date 对象。
   s += d.getYear() + "-";   // 获取年份。
   s += (d.getMonth() + 1) + "-";  // 获取月份。
   s += d.getDate();      // 获取日。
   return(s);                  // 返回日期。
}

function showTime(){
 var myArray=new Array(7);
 var TD=new Date();
 myArray[0]="星期日";
 myArray[1]="星期一";
 myArray[2]="星期二";
 myArray[3]="星期三";
 myArray[4]="星期四";
 myArray[5]="星期五";
 myArray[6]="星期六";
 weekday=TD.getDay();
 var h=TD.getHours();
 var m=TD.getMinutes();
 var s=TD.getSeconds();
 var hstr=h;
 var istr=m;
 var is=s;
 if (h < 10) {hstr="0"+h};
 if (m < 10) {istr="0"+m};
 if (s < 10) {is="0"+s};
 var obj=document.getElementById("time");
 obj.innerHTML=DateDemo()+" "+ myArray[weekday]+" "+ hstr+":"+istr+":"+is;
}
在body中这样写
<script>
document.body.onload = function (){
  setInterval("showTime()",1000);}
</script>
<div id="time"></div>
document.body.onload = function (){
  setInterval("showTime()",1000);}

方法三:带星期的(跟上面的差不多)
function clockon() {
 var now = new Date();
 var year = now.getFullYear(); // getFullYear getYear
 var month = now.getMonth();
 var date = now.getDate();
 var day = now.getDay();
 var hour = now.getHours();
 var minu = now.getMinutes();
 var sec = now.getSeconds();
 var week;
 month = month + 1;
 if (month < 10)
 month = "0" + month;
 if (date < 10)
 date = "0" + date;
 if (hour < 10)
 hour = "0" + hour;
 if (minu < 10)
 minu = "0" + minu;
 if (sec < 10)
 sec = "0" + sec;
 var arr_week = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六");
 week = arr_week[day];
 var time = "";
 time = year + "年" + month + "月" + date + "日" + " " + hour + ":" + minu + ":" + sec + " " + week;
 document.getElementById("dd").innerHTML=time;
 setTimeout("clockon()", 200);
}
在body中这样写
<div id="dd"></div>
 <script>
  clockon()
</script>

方法四:最简明的
window.onload=function(){
setInterval("document.getElementById('time').innerHTML=new Date().toLocaleString()",1000);}
在body中:
<div id="time"></div>

Parseint用法
Parseint是把其后面的字符串中的数字返回。
ParseInt(”12”)返回:12
ParseInt(“as12dd”)  返回:NaN
ParseInt(”12ffg”)返回:12
倒计时的实现方法:
var timer = window.setInterval(function(){
 document.getElementById('box').innerHTML = parseInt(document.getElementById('box').innerHTML) - 1;
 if(parseInt(document.getElementById('box').innerHTML) < 0)
 {
  window.clearInterval(timer);
  window.location = 'http://www.baidu.com/';
 }
}, 1000);

2
2
分享到:
评论

相关推荐

    HTML的一些小技巧

    本文将详细介绍给定文件中的多个HTML小技巧及其应用场景。 #### 1. 设置背景图片固定不滚动 ```html 图片路径" bgproperties="fixed"&gt; ``` **说明**:此技巧用于设置页面背景图片,并使其在滚动页面时保持位置...

    22个HTML5实用技巧

    资源名称:22个HTML5实用技巧内容简介:HTML5 技巧一:当今科技发展的速度真惊人,稍不留神,就可能无法跟上它的步伐。新一代的HTML-HTML5的发展也不停的带给我们新的惊喜,我们将通过这篇文章向大家介绍一些HTML...

    网页代码常用小技巧

    "网页代码常用小技巧"这个主题涵盖了一系列能够提升HTML编写效率和优化网页效果的方法。 1. **元信息与头部元素**: HTML文档的部分常常被用来放置元信息,如字符编码、页面标题、样式表链接、JavaScript文件引用...

    制作网页中Html+css小技巧收集

    以下是对标题“制作网页中Html+css小技巧收集”及描述中提到的知识点进行的详细解析: ### 1. 控制元素高度和溢出 在CSS中,`overflow`属性用于控制当内容超出元素框时的行为。例如,在代码示例中使用的`.gb`类...

    Javascript小技巧之生成html元素.docx

    4. **Javascript常用小技巧汇总**和**JavaScript常用小技巧小结**:这些文章提供了许多JavaScript编程中的常见问题解决方案和优化技巧。 5. **javascript实现分栏显示小技巧附图**:展示了如何用JavaScript实现多栏...

    js中的小技巧,十分的实用

    以下是一些关于JS的实用小技巧,对于初学者来说,掌握这些知识点将有助于提升编程效率和理解力。 1. `document.write("")`:这是一个常用的输出语句,常用于在页面加载时动态插入HTML内容。 2. 注释:JS支持单行...

    40种网页小技巧(html开发员有帮助哦)

    根据给定的信息,我们可以整理出以下与网页制作相关的实用技巧,这些技巧可以帮助开发者在实际工作中提高效率、增强用户体验以及优化页面功能。 ### 1. 阻止右键菜单出现 - **技巧**: 使用 `oncontextmenu` 事件来...

    php代码中的小技巧

    ... ... 此函数用于从指定的文件中读取数据。 ... $fd = fopen($file_name, 'r');...以上就是从提供的PHP代码片段中总结出来的小技巧和功能说明。这些技巧可以帮助开发者更好地理解和应用PHP语言,提高开发效率。

    Html网页代码常用小技巧! 正文

    ### Html网页代码常用小技巧 #### 1. 禁止右键菜单 通过在表格元素上设置 `oncontextmenu` 属性,可以阻止用户在网页上使用右键菜单: ```html ;"&gt; 禁止右键 ``` #### 2. 阻止文本选取 使用 `onselectstart` ...

    js中的小技巧.doc

    以下是一些JS中的实用小技巧: 1. **`document.write`**:这是JavaScript中最基本的输出方法,用于向HTML文档中插入动态内容。例如,`document.write("Hello, World!");`会在页面上显示“Hello, World!”。 2. **...

    40种网页常用小技巧

    网页设计和开发是一个充满创新和策略的领域,其中许多小技巧可以...以上仅是"40种网页常用小技巧"中的一部分,每一种都旨在提升网页设计的专业性和用户体验。通过巧妙地运用这些技巧,可以打造出既美观又实用的网页。

    (菜鸟必看的)电脑实用小技巧

    【电脑实用小技巧】是众多用户在日常使用电脑过程中可能会遇到的问题和解决方案的集合,旨在帮助初学者提高电脑操作效率,解决常见问题。这个压缩包包含了一系列的HTML文档,涵盖了多个方面的电脑技术知识。 首先,...

    web 笔记,包含JavaScript、CSS、HTML 等;各种前端开发的小技巧及总结.zip

    各种前端开发的小技巧及总结. web 笔记,记录自己学习前端的历程,记录自己学习的代码,包含JavaScript、CSS、HTML 等;各种前端开发的小技巧及总结. web 笔记,记录自己学习前端的历程,记录自己学习的代码,包含...

    HTML特殊技巧,常用技巧

    HTML是超文本标记语言,是构建网页的基础,而掌握一些特殊的HTML技巧能够使网页的呈现效果更加丰富多彩。本文将深入探讨HTML与CSS结合使用的几个重要技巧,包括CSS滤镜效果、定位技术、自适应圆角矩形的创建,以及...

    html js的一些实用技巧

    在IT行业中,HTML和JavaScript是...掌握这些技巧将有助于提升你在HTML和JavaScript开发中的能力,使得网页制作更加得心应手。这些知识点是构建动态、交互性丰富的网页的基础,对于初学者来说,是不容忽视的学习重点。

    js200多个小技巧

    根据给定的文件信息,以下是对“js200多个小技巧”中提及的部分知识点的详细解析: ### 1. HTML事件与JavaScript交互 - **`onBlur`**:当元素失去焦点时触发的事件。在示例中,用于检测输入框是否为空,并在失去...

    javascript中的小技巧

    每一项都是js中的小技巧,但十分的实用! 1.[removed](""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document-&gt;html-&gt;(head,body) 4.一个浏览器窗口中的DOM顺序是:window-&gt;(navigator,screen,history...

    HTML小技巧:将table边框改为细线

    HTML小技巧:将table边框改为细线 HTML制作新手在用TABLE表格时,会碰到如何改变边线粗线

    JSP编程小技巧集锦121

    本篇将详细讲解"JSP编程小技巧集锦121"中的核心知识点,帮助开发者提升效率,优化代码。 1. **使用EL表达式(Expression Language)**:EL简化了从作用域内获取对象的复杂性。例如 `${variable}` 可以直接获取到...

    javascirpt 小技巧 javascirpt 小技巧

    JavaScript 是一种广泛应用于网页和网络应用的脚本语言,它在浏览器环境中运行,为用户提供交互式体验。...以上只是JavaScript中的一部分小技巧,实际开发中还有更多实用的功能和方法等待开发者去发掘和运用。

Global site tag (gtag.js) - Google Analytics