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. taro 学习资料

    taro 学习资料 学习资料 网址 github https://github.com/NervJS/taro taro 官方文档 https://nervjs.github.io/taro/docs ...

  2. Zookeeper 三台主机 Ha集群的搭建

    前期准备1.修改Linux主机名 2.修改IP 3.修改主机名和IP的映射关系 /etc/hosts ######注意######如果你们公司是租用的服务器或是使用的云主机(如华为用主机.阿里云主机等 ...

  3. tgz的解压

    解压文件tgz 例如文件名为: yyyy.tgz 先使用GZIP解压为TAR文件 gzip -dv yyyy.tgz 同时解压后生成yyyy.tar文件 再使用tar解压yyyy.tar文件 tar ...

  4. WebApi安全性 使用TOKEN+签名验证 (秘钥是GUID的,私有的，不是雙方的，并不在网络连接上传输)

    转http://www.cnblogs.com/MR-YY/archive/2016/10/18/5972380.html WebApi安全性 使用TOKEN+签名验证   首先问大家一个问题,你在写 ...

  5. 《JavaScript设计模式与开发》笔记 5.关于正确写一个闭包

    1.如何正确使用闭包 1.常用闭包 var asd =(function(){ var value = 0 //私有变量放入内存 return function(){ //biubiubiu 发射火箭 ...

  6. CentOS 7.4 初次手记：第三章 CentOS基础了解

    第三章 CentOS基础了解... 36 第一节 语言编码.终端... 36 I 查看语言编码... 36 II Tty?.pts/?. 36 第二节 bash/sh command. 38 I 查找 ...

  7. php mongo类

    看了好多mongo类都不尽人意.最后发现根本不需要自己封装类.php mongo 的扩展自带的方法就已经很方便了 但是习惯性的把数据库连接部分封装起来.最后我就封装了一个单例模式的数据库类 使用单例模 ...

  8. C#如何HttpWebRequest模拟登陆，获取服务端返回Cookie以便登录请求后使用

    public static string GetCookie(string requestUrlString, Encoding encoding, ref CookieContainer cooki ...

  9. 黄聪：浓缩的才是精华：浅析GIF格式图片的存储和压缩（转）

    http://www.cnblogs.com/qcloud1001/p/6647080.html 成文迪, 在Web前端摸爬滚打的码农一枚,对技术充满热情的菜鸟,致力为手Q的建设添砖加瓦. GIF格式 ...

  10. 可用于在 Microsoft.NET Framework 4.0 中的 ASP.NET 浏览器定义文件的修补程序

    http://support.microsoft.com/kb/2600088 此修补程序为 Internet Explorer 和 Mozilla Firefox 在浏览器定义文件引入了更新的定义. ...