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. spring-boot-dependencies jar 不完整的问题

    集成 springboot 有两种方式. 1 直接 父项目指向  springboot <parent> <groupId>org.springframework.boot&l ...

  2. Iris花逻辑回归与实现

    Iris花的分类是经典的逻辑回归的代表:但是其代码中包含了大量的python库的核心处理模式,这篇文章就是剖析python代码的文章. #取用下标为2,3的两个feture,分别是花的宽度和长度: # ...

  3. Hive DDL及DML操作

    一.修改表 增加/删除分区 语法结构 ALTER TABLE table_name ADD [IF NOT EXISTS] partition_spec [ LOCATION 'location1' ...

  4. RedHat6.5安装Spark集群

    版本号: RedHat6.5   RHEL 6.5系统安装配置图解教程(rhel-server-6.5) JDK1.8      http://blog.csdn.net/chongxin1/arti ...

  5. php统计中英文混合的文章字数

    function ccStrLen($str) #计算中英文混合字符串的长度 { $ccLen=0; $ascLen=strlen($str); $ind=0; $hasCC=ereg("[ ...

  6. jQuery位置操作

    position();获取当前标签相对于最近一个父标签中有positon:relative属性的位置. height();标签纯高度 innerHeight();标签内边距padding加上纯高度 o ...

  7. 黄聪：C#如何Json转字符串；字符串转Json；Newtonsoft.Json(Json.Net)学习笔记（转）

    Newtonsoft.Json,一款.NET中开源的Json序列化和反序列化类库(下载地址http://json.codeplex.com/). 下面是Json序列化和反序列化的简单封装: /// & ...

  8. git add ， git commit 添加错文件 撤销

    1. git add 添加 多余文件 这样的错误是由于, 有的时候 可能 git add . (空格+ 点) 表示当前目录所有文件,不小心就会提交其他文件 git add 如果添加了错误的文件的话 撤 ...

  9. Django--ORM--模型增删改查--备忘

    以上运算符都区分大小写,在这些运算符前加上i表示不区分大小写,如iexact.icontains.istartswith.iendswith.insert into tb_bookinfo()valu ...

  10. Ubuntu使用操作记录/笔记

    1.如何取得图形界面下的ROOT权限? 先alt+f2,然后 gksu nautilus 或者 kdesudo dolphin 2.如何使用Qt插件在Qt中进行ROS开发 http://blog.cs ...