1、显示当前时间：

  1. <!doctype>
  2. <html>
  3.     <head>
  4.         <meta charset='utf-8'>
  5.         <script type='text/javascript'>
  6.             function showtime(){
  7.                 var now_time = new date();    //创建时间对象的实例
  8.                 var hours = now_time.gethours();    //获得当前小时数
  9.                 var minutes = now_time.getminutes();    //获得当前分钟数
  10.                 var seconds = now_time.getseconds();    //获得当前秒数
  11.                 var timer = "" + ((hours > 12) ? hours - 12 : hours);
  12.                 timer += ((minutes < 10) ? ":0" : ":") + minutes;
  13.                 timer += ((seconds < 10) ? ":0" : ":") + seconds;
  14.                 timer += "  " + ((hours > 12) ? "pm" : "am");
  15.                 document.getElementById("aa").text = timer;
  16.                 settimeout('showtime()', 1000);
  17.               }
  18.             </script>
  19.     </head>
  20.     <body onload="showtime()">
  21.         <div id="aa"></div>
  22.     </body>
  23. </html>

2、当鼠标经过图像时图像的震动效果：

  1. <!doctype>
  2. <html>
  3.     <head>
  4.         <meta charset='utf-8'>
  5.         <script type='text/javascript'>
  6.             var rector = 3, stopit = 0, a = 1;
  7.             function init(which){
  8.                 stopit = 0;
  9.                 zhend =  which;
  10.                 zhend.style.left = 0;
  11.                 zhend.style.top = 0;
  12.               }
  13.             function rattleimage(which){
  14.                 if((!document.all && !document.getElementById) || stopit = 1)
  15.                     return;
  16.                 if(a == 1){
  17.                      zhend.style.top = parseInt(zhend.style.top) + rector;
  18.                 } else if(a == 2){
  19.                      zhend.style.left = parseInt(zhend.style.left) + rector;
  20.                 } else if(a == 3){
  21.                      zhend.style.top = parseInt(zhend.style.top) - rector;
  22.                 } else if(a == 4){
  23.                      zhend.style.left = parseInt(zhend.style.left) - rector;
  24.                 }
  25.                else {
  26.                      zhend.style.left = parseInt(zhend.style.left) - rector;
  27.                 }
  28.                 if(a < 4)
  29.                    a++;
  30.                 else
  31.                     a = 1;
  32.                 settimeout('rattleimage()', 50);
  33.           }
  34.           function stoprattle(which){
  35.             stopit = 1;
  36.              which.style.left = 0;
  37.              which.style.left = 0;
  38.            }
  39.         </script>
  40.     </head>
  41.     <body>
  42.         <img src="test.png" class="zhendimage" onMouseover="init(this);rattleimage()" onmoouseout="stoprattle(this)"  />
  43.     </body>
  44. </html>

3、自由切换图像：

  1. <!doctype>
  2. <html>
  3.     <head>
  4.         <meta charset='utf-8'>
  5.         <script type='text/javascript'>
  6.             var img = new array(3);
  7.             var nums = 0;
  8.             if(document.images){
  9.                 for(i = 1; i <= 3; i ++){
  10.                     img[i] = new image();
  11.                     img[i].src = 'images/00' + i + '.png';
  12.                 }
  13.             }
  14.             function fort(){
  15.                 nums ++;
  16.                 document.images[0].src = img[nums].src;
  17.                 if(nums == 3)
  18.                     nums = 0;
  19.               }
  20.             function slide(){
  21.                 setInterval('fort()', 1000);
  22.             }
  23.         </script>
  24.     </head>
  25.     <body onload="slide()">
  26.  
  27.     </body>
  28. </html>

JavaScript简单的实例应用的更多相关文章

  1. Javascript DOM操作实例

          最近在学DOM,但是还是没有办法很好的记住API,想找些例子来练习,网上的例子将一个个DOM对象方法挨个举例,并没有集合在一起用,效果不尽人意.所以自己写一份实例,顺便巩固下学到的知识. ...

  2. Google Map JavaScript API V3 实例大全

    Google Map JavaScript API V3 实例大全 基础知识 简单的例子 地理位置 语言 位置 坐标 简单的投影 事件 简单事件 关闭事件 多次添加事件 事件属性 控制 php禁用ui ...

  3. 原生Ajax用法——一个简单的实例

    Ajax全名(Asynchronous(异步) JavaScript and XML )是可以实现局部刷新的 在讲AJax之前我们先用简单的实例说一下同步和异步这个概念 /*异步的概念(就是当领导有一 ...

  4. 纯JSP简单登录实例

    记一下,免得以后忘记了,又要去查. 文件共有四个web.xml.login.jsp.logout.jsp.welcome.jsp四个文件 测试环境:Tomcat 6.0.x 假设项目名称是LoginS ...

  5. ASP.NET MVC 4 插件化架构简单实现-实例篇

    先回顾一下上篇决定的做法: 1.定义程序集搜索目录(临时目录). 2.将要使用的各种程序集(插件)复制到该目录. 3.加载临时目录中的程序集. 4.定义模板引擎的搜索路径. 5.在模板引擎的查找页面方 ...

  6. Linux简单程序实例（GNU工具链，进程，线程，无名管道pipe，基于fd的文件操作，信号，scoket）

    一, GNU工具链简介: (1)编译代码步骤: 预处理 -> 编译 -> 汇编 -> 链接: 预处理:去掉注释,进行宏替换,头文件包含等工作: gcc -E test.c -o te ...

  7. Redis：安装、配置、操作和简单代码实例(C语言Client端)

    Redis:安装.配置.操作和简单代码实例(C语言Client端) - hj19870806的专栏 - 博客频道 - CSDN.NET Redis:安装.配置.操作和简单代码实例(C语言Client端 ...

  8. MVC 4 插件化架构简单实现实例篇

    ASP.NET MVC 4 插件化架构简单实现-实例篇   先回顾一下上篇决定的做法: 1.定义程序集搜索目录(临时目录). 2.将要使用的各种程序集(插件)复制到该目录. 3.加载临时目录中的程序集 ...

  9. 分布式搜索ElasticSearch构建集群与简单搜索实例应用

    分布式搜索ElasticSearch构建集群与简单搜索实例应用 关于ElasticSearch不介绍了,直接说应用. 分布式ElasticSearch集群构建的方法. 1.通过在程序中创建一个嵌入es ...

随机推荐

  1. golang 查看代码调用关系图

    go-callvis 是github上一个开源项目,可以用来查看golang代码调用关系. 安装 安装graphviz $ brew install graphviz 安装go-callvis go ...

  2. Python标示符和关键字

    标示符 什么是标示符,看下图: 标识符就是开发人员在程序中自定义的一些符号和名称. 标示符是自己定义的,如变量名 .函数名等. 标示符的规则 标示符由字母.下划线和数字组成,且数字不能开头 pytho ...

  3. Docker容器 暴露多个端口

    1.创建容器是指定 docker run -p <host_port1>:<container_port1> -p <host_port2>:<contain ...

  4. 黄聪：Jquery+DataTables插件，如何在ajax调用服务器数据后，自动给tr添加id属性

    http://legacy.datatables.net/usage/callbacks#fnRowCallback 主要通过 fnCreatedRow 事件来实现 var table = $('#t ...

  5. BlockingQueue队列

    1.BlockingQueue定义的常用方法如下     抛出异常 特殊值 阻塞 超时 插入 add(e) offer(e) put(e) offer(e,time,unit) 移除 remove() ...

  6. webstorm 破解码

    https://blog.csdn.net/voke_/article/details/76418116 摘自此博客

  7. 关于nginx大流量负载调优

    优化nginx包括两方面: 1.是自己重写nginx代码(比如tengine).本身nginx的代码已经足够优秀,如果不是每秒几千的请求,就忽略这个部分吧. 2.另一个就是和优化nginx的配置,这是 ...

  8. 【HTTP】使用 RestTemplete 实现 post请求

    如上图,要求: post请求; x-www-form-urlencoded 类型; 如下代码没有进行整理,但是测试OK package com.chinamobile.epic.http; impor ...

  9. mac nginx 安装教程

    eeking a satisfactory solution to create a local web server for programming in macOS with PHP and My ...

  10. 解析流中的Xml文件时，报错：java.net.MalformedURLException: no protocol

    原来的代码: // 创建DocumentBuilder对象 DocumentBuilder b = a.newDocumentBuilder(); // 通过DocumentBuilder对象的par ...