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. AIX系统日志

    1.系统错误日志 存放路径:/var/adm/ras/errlog 说明:该日志记录了系统所检测到的软硬件故障和错误,尤其对系统的硬件故障有很大的参考价值,是AIX提供的最有价值的日志之一, errl ...

  2. 朴素贝叶斯文本分类(python代码实现)

    朴素贝叶斯(naive bayes)法是基于贝叶斯定理与特征条件独立假设的分类方法. 优点:在数据较少的情况下仍然有效,可以处理多分类问题. 缺点:对入输入数据的准备方式较为敏感. 使用数据类型:标称 ...

  3. ubuntu忘记登录密码解决方法

    1.重启系统,长按Shift键,直到出现下面菜单.选择recovery mode(恢复模式).2.接下来会进入如下界面,选择Drop to root shell prompt ,也就是获取root权限 ...

  4. Java消息机制 ActiveMQ入门实例

    转载自:http://www.cnblogs.com/wyh3721/p/5917316.html 1.下载ActiveMQ 去官方网站下载:http://activemq.apache.org/  ...

  5. Linux中chown和chmod的区别和用法

    转载自:http://www.cnblogs.com/EasonJim/p/6525242.html chmod修改第一列内容,chown修改第3.4列内容: chown用法: 用来更改某个目录或文件 ...

  6. java线程池ThreadPoolExecutor类使用详解

    在<阿里巴巴java开发手册>中指出了线程资源必须通过线程池提供,不允许在应用中自行显示的创建线程,这样一方面是线程的创建更加规范,可以合理控制开辟线程的数量:另一方面线程的细节管理交给线 ...

  7. NutzWk 开发框架

    官网: https://wizzer.cn/ 源码下载: https://github.com/wizzercn/NutzWk/ https://gitee.com/wizzer/NutzWk Int ...

  8. VS中的类模板

    在目录C:\Program Files (x86)\Microsoft Visual Studio\2017\Community\Common7\IDE\ItemTemplates\CSharp\Co ...

  9. fiddler无法与手机连接是什么原因

    1.首先要确保手机和安装有Fiddler的计算机处在同一个局域网中,可以使用路由器,或者使用笔记本发送热点给手机使用.在这里本人是使用手机USB共享功能让笔记本联网的.进入cmd输入ipconfig/ ...

  10. WPF系列学习

    1:WPF最小化到系统托盘 2:WPF程序单例运行 3:WPF中三种异常捕获:UI线程异常.非UI线程异常.Task线程异常 在窗体放一个按钮在单击事件执行如下代码来模拟. private void ...