1、显示当前时间：

<!doctype>

<html>

    <head>

        <meta charset='utf-8'>

        <script type='text/javascript'>

            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 += ((minutes < 10) ? ":0" : ":") + minutes;

                timer += ((seconds < 10) ? ":0" : ":") + seconds;

                timer += "  " + ((hours > 12) ? "pm" : "am");

                document.getElementById("aa").text = timer;

                settimeout('showtime()', 1000);

              }

            </script>

    </head>

    <body onload="showtime()">

        <div id="aa"></div>

    </body>

</html>

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

<!doctype>

<html>

    <head>

        <meta charset='utf-8'>

        <script type='text/javascript'>

            var rector = 3, stopit = 0, a = 1;

            function init(which){

                stopit = 0;

                zhend =  which;

                zhend.style.left = 0;

                zhend.style.top = 0;

              }

            function rattleimage(which){

                if((!document.all && !document.getElementById) || stopit = 1)

                    return;

                if(a == 1){

                     zhend.style.top = parseInt(zhend.style.top) + rector;

                } else if(a == 2){

                     zhend.style.left = parseInt(zhend.style.left) + rector;

                } else if(a == 3){

                     zhend.style.top = parseInt(zhend.style.top) - rector;

                } else if(a == 4){

                     zhend.style.left = parseInt(zhend.style.left) - rector;

                }

               else {

                     zhend.style.left = parseInt(zhend.style.left) - rector;

                }

                if(a < 4)

                   a++;

                else

                    a = 1;

                settimeout('rattleimage()', 50);

          }

          function stoprattle(which){

            stopit = 1;

             which.style.left = 0;

             which.style.left = 0;

           }

        </script>

    </head>

    <body>

        <img src="test.png" class="zhendimage" onMouseover="init(this);rattleimage()" onmoouseout="stoprattle(this)"  />

    </body>

</html>

3、自由切换图像：

<!doctype>

<html>

    <head>

        <meta charset='utf-8'>

        <script type='text/javascript'>

            var img = new array(3);

            var nums = 0;

            if(document.images){

                for(i = 1; i <= 3; i ++){

                    img[i] = new image();

                    img[i].src = 'images/00' + i + '.png';

                }

            }

            function fort(){

                nums ++;

                document.images[0].src = img[nums].src;

                if(nums == 3)

                    nums = 0;

              }

            function slide(){

                setInterval('fort()', 1000);

            }

        </script>

    </head>

    <body onload="slide()">

    </body>

</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. [转]Eclipse快捷键 10个最有用的快捷键

    Eclipse快捷键 10个最有用的快捷键 5 4 Eclipse中10个最有用的快捷键组合  一个Eclipse骨灰级开发者总结了他认为最有用但又不太为人所知的快捷键组合.通过这些组合可以更加容易的 ...

  2. js控制html5 【video】标签中视频的播放和停止

    需求:页面中有2个普通按钮a,b.还有一个video标签,能成功播放出视频..我想要的效果是,点击a按钮,视频开始播放,点击b按钮,视频播放停止!!!<br><br>----- ...

  3. JavaWeb工程 目录结构***

    以下是mavaen推荐的项目目录. ├── pom.xml └── src     ├── main     │   ├── java     │   │   └── group     │   │  ...

  4. DEVC怎么建工程

    1.DEVC建工程 1.1 新建项目 打开文件,选择新建-->项目-->ConsoleApplication(控制台程序),输入项目名,选择保存路径.(单独建一个文件夹存放) 项目建成功后 ...

  5. 关于Java大数操作（BigInteger、BigDecimal）

    本文目标 可以使用BigInteger操作大整数 可以使用BigDecimal指定小数的保留位数 基础知识 对于二进制来说,最高位代表正负号,-0表示-128,+0表示032位系统int型4个字节:- ...

  6. 【springBoot】之starter pom

    SpringBoot针对不同业务提供了不同的starter pom,根据springboot版本不同可能有差异. spring-boot-starter springboot核心starter ,包括 ...

  7. 【Java】Java初始化过程总结

    概述 Java字节代码:byte[] Java类在JVM的表现形式:Class类的对象: Java源代码被编译成class字节码 : Java字节代码 --> Class类的对象: 加载:把Ja ...

  8. Flume的Channel

    一.Memory Channel 事件将被存储在内存中(指定大小的队列里) 非常适合那些需要高吞吐量且允许数据丢失的场景下 属性说明: 二.JDBC Channel 事件会被持久化(存储)到可靠的数据 ...

  9. openstack添加热添加硬盘并识别

    假定在虚拟机当中添加了磁盘,但是虚拟机没有识别出来:如何识别出来 可以使用命令 echo '- - -' >/sys/class/scsi_host/host0/scan 使用后就可以识别出来了 ...

  10. [UE4]运行时脱离视角，进入自由视角

    按 Shift + F1让鼠标脱离游戏窗口,然后点击右上角的按钮,然后鼠标在游戏窗口点击一下,就只有自由漫游了. 还可以点击选中Word Outliner窗口的物体.