利用Javascript制作网页特效(时间特效)
在网页中经常可以看到各种各样的动态时间显示,在网页中合理地使用时间可以增加网页的时效感。
显示当前时间
getHours()、getMinutes()、getSeconds()分别获得当前小时数、当前分钟数、当前秒数。
打开网页文档,在head标签中输入以下代码:
<script>
function showtime(){
var now_time = new Date(); //创建时间对象的实例
var hours = now_time.getHours(); //获得当前小时数
var minutes = now_time.getMinutes(); //获得当前分钟数
var seconds = now_time.getSeconds(); //获得当前秒数
var timer = " "+((hours>12)?hours - 12 :hours); //将小时数值赋予变量timer
timer += ((minutes<10)?":0":":")+minutes; //将分钟数值赋予变量timer
timer += ((seconds<10)?":0":":")+seconds; ///将秒数值赋予变量timer
timer += ((hours>12)?"pm":"am"); //将字符am或pm赋予变量timer
document.clock.show.value=timer; //在名为clock的表单中输出变量timer的值
setTimeout("showtime()",1000); //设置每隔一秒钟自动调用一次showtime()函数
}
/* setTimeout()方法是由windows对象所提供的,用来实现经过一定时间后
* 自动进行指定处理。该语句的意思就是1秒后调用showtime().setTimeout()
* 方法中的时间是以毫秒为单位进行计算的,因此1000ms就等于1s。*/
</script>
将光标放在body标记内,输入代码onLoad=”showtime()”。
将光标放在body标签内,输入以下代码:
<form name="clock" onsubmit="0">
<input type="text" name="show" size="10" style="background-color: #66afe9;
border-width: 3px;"/>
</form>
显示当前日期
首先定义一个星期数组initArray(),然后利用getYear()、getMonth()、getDate()、getDay()分别获得当前年份、获得当前月份、获得当前日数、获得当前星期,显示当前日期的具体操作步骤:
①:在body之中输入以下代码:
<script>
today=new Date();
function initArray(){
this.length=initArray().arguments.length
for(var i=0;i<this.length;i++)
this[i+1]=initArray().arguments[i] }
var d=new initArray(
"星期日",
"星期一",
"星期二",
"星期三",
"星期四",
"星期五",
"星期六");
document.write(
"<font color=red style='font-size:9px;font-family:宋体'>",
today.getYear(),"年",
today.getMonth()+1,"月",
today.getData(),"日",
d[today.getDay()+1],
"</font>");
</script>
<!--在显示月份的时候,要将所得的月份加1,因为月份的值是从0到11.-->
<!--利用getDay()方法获得的值中,0代表星期天,而所得值中没有7.-->
显示网页停留时间
首先用fom定义一个表单,然后在表单内使用input标记定义一个文本框,然后定义一个function update()函数计算停留时间,最后利用doucument.forms.input1.value=hour+“时”+min+“分”+sec+“秒”在文本框中显示停留时间。
①:在Body标签内输入以下代码:
<!--定义表单名称forms-->
<form name="forms">
<div align="left">
<!-- 定义文本框名称input1-->
<input type="text" name="input1" size="10"/>
<script>
<!--
var sec= 0,min= 0,hou= 0;
flag=0;
idt=window.setTimeout("update();",1000);//每隔1s刷新一次
function update() //定义函数计算停留时间
{
sec++;
if(sec==60){
sec=0;
min+=1;
}
if(min==60){
min=0;
hou+=1;
}
//如果停留时间少于1分钟,弹出提示信息
if((min>0)&&(flag==0))
{
window.alert("欢迎光临!");
flag=1;
}
//显示停留时间信息
document.forms.input1.value=hou+"时"+min+"分"+sec+"秒";
idt=window.setTimeout("update();",1000);
}// -->
</script>
</div>
</form>
制作倒计时特效
倒计时特效可以让用户明确知道某个日期剩余的时间。
①:在body标签内输入以下代码:
<script>
var timedate = new Date("October 1,2018"); //设置倒计时时间为2018年10月1日
var times="指定日期"; //设置time变量
var now=new Date(); //获得当前时间
var date=timedate.getTime() - now.getTime(); //获得剩余时间
var time = Math.floor(date/(1000*60*60*24)); //将剩余时间转化为天数
if(time>=0);
//显示倒计时时间信息
document.write("现在离2018年"+times+"还有:" +
"<font color=red><b>"+time+"</b></font>天");
</script>
<!--利用var date= timedate.getTime()-now.getTime()可以获得剩余时间,由于时间是以毫秒为单位计算的,因此换算率如下:
1天=24小时,1小时=60分钟,1分钟=60秒,1秒=1000毫秒-->
<!--利用var time=Math.floor(date/(1000*60*60*24)) 将剩余时间转换为剩余天数。-->
利用Javascript制作网页特效(时间特效)的更多相关文章
- 利用Javascript制作网页特效(其他常见特效)
设置为首页和加入收藏夹 ①:在body标签内输入以下代码: <a onclick="this.style.behavior='url(#default#homepage)'; this ...
- 利用Javascript制作网页特效(窗口特效)
全屏显示窗口 利用fullscreen=yes可以制作全屏显示窗口. ①:在body标签内输入以下代码: <div align="center"> <input ...
- 利用Javascript制作网页特效(图像特效)
图像是文本的解释和说明,在网页中的适当位置放置一些图像,不仅可以使文本更加容易阅读,而且可以使网页更加具有吸引力. 当鼠标指针经过图像时图像振动效果 ①:在head标签内输入以下代码: <sty ...
- JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
- 利用CSS3制作网页动画
如何在网页中实现动画效果动态图片 flashjavascriptcss3变形是一些效果的集合如平移 旋转 缩放 倾斜效果每个效果都可以称为变形(transfrom) 它们可以分别操控元素发生平移.旋转 ...
- 第九章 利用CSS3制作网页动画
一.CSS3变形transform 1.平移:translate(x,y) translateX(x) translateY(y) 注意:如果想只向X轴平移那么可以translateX,如果想只向X轴 ...
- 【我们开发有力量之二】利用javascript制作批量网络投票机器人(自动改IP)
帮朋友忙网络投票,粗粗地看了下,投票没有什么限制,仅有一个ip校验:每天每个ip仅能投票一次. 也就是说,可以写一个程序,自动更换IP地址(伪造IP地址),实现批量刷票的目的.于是我写了一个投票机器人 ...
- 利用JavaScript制作计算器
<html> <head> <meta charset="utf-8"> <title>无标题文档</title> &l ...
- 利用JavaScript制作简易日历
<html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <met ...
随机推荐
- Python 爬虫系列
爬虫简介 网络爬虫 爬虫指在使用程序模拟浏览器向服务端发出网络请求,以便获取服务端返回的内容. 但这些内容可能涉及到一些机密信息,所以爬虫领域目前来讲是属于灰色领域,切勿违法犯罪. 爬虫本身作为一门技 ...
- 单细胞分析实录(4): doublet检测
最近Cell Systems杂志发表了一篇针对现有几种检测单细胞测序doublet的工具的评估文章,系统比较了常见的例如Scrublet.DoubletFinder等工具在检测准确性.计算效率等方面的 ...
- 新建表后,在sqlserver manager中使用显示引用对象无效
编辑>intelliSense(I)>刷新本地缓存.
- 微信小程序 - bilibili模仿
今天真是个大坑,onLoad => 写成了OnLoad 程序一直没法执行, 晚上下班的时候,在微信的小程序中,this不可以直接访问data中的值,得this.data才能访问..
- 微信小程序--投票小程序设计与实现(图片、视频发布、分组、审核、排名)
投票微信小程序设计与实现(图片.视频发布.分组.审核.排名) 之前接到一个需求,设计一个类似H5 投票系统之类的小程序,我绞尽脑汁,冥思苦想,最后终于做了出来. 再次感谢 @文晓港 的ColorU ...
- Syn_Flood攻击&防御手段
Syn_Flood攻击原理 攻击者首先伪造地址对服务器发起SYN请求(我可以建立连接吗?),服务器就会回应一个ACK+SYN(可以+请确认).而真实的IP会认为,我没有发送请求,不作回应.服务器没有收 ...
- Unity优化图解
花了2天把之前学到的一些关于优化的知识全都写了下来,放到一张表里面 https://www.processon.com/mindmap/5cf64f53e4b0bc8329e8112e
- node中 path.join 和 path.resovle 区别
console.log(__dirname) console.log('----') console.log(path.resolve(__dirname, '/a/b', '../')) conso ...
- 机器学习笔记·adaboost
一.算法简介 Adaboost算法是一种集成算法,所谓集成算法就是将多个弱的分类器组合在一起变成一个强的分类器.弱分类器通常是指分类效果比随机分类稍微好一点的分类器.就像我们在做一个重要决定的时候,通 ...
- 【JS学习】数组过滤方法的使用filter
前言:本博客系列为学习后盾人js教程过程中的记录与产出,如果对你有帮助,欢迎关注,点赞,分享.不足之处也欢迎指正,作者会积极思考与改正. 使用效果: 可以返回参数函数为真的值 //情景:实现从stu数 ...