感觉JS里面还是有很多小技巧的,知道套路了,其实实现起来其实也还没有想象中的那么复杂.不过我觉得还是要把所学的知识融会贯通吧,不能学了JS就忘了前面的知识,结合起来才会威力无穷.

1.跑马灯:弹弹弹

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>单行文字弹动</title>

    <script type="text/javascript">

    window.onload = function(){

        window.setInterval(scrolling,10);

    }

    var str = "神奇的JavaScript";

    var str_length = str.length;

    var flag = true;

    function scrolling(){

        //寻找目标

        var inpObj = document.getElementById("input");

        if (flag) {

            str = " "+str;

            inpObj.value = str;

            if (str.length==137) {flag=false;}

        }else{

            str = str.substr(1);

            inpObj.value = str;

            if (str.length==str_length) {flag=true;}

        }

    }

    </script>

</head>

<body>

<input type="text" value="神奇的JavaScript" id="input" size="80" />

</body>

</html>

2.显示/隐藏选项卡,这个真是太简单.......

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>显示隐藏功能</title>

    <style type="text/css">

        *{

            margin:0px;

            padding: 0px;

        }

        .box{

            width:600px;

            border: 1px solid #000;

            margin: 100px auto;

        }

        .title{

            width:100%;

            height:30px;

            border: 1px solid #000;

            line-height: 30px;

        }

    </style>

    <script type="text/javascript">

        var flag = false;

        function hid(){

            var conObj = document.getElementById("content");

            var button = document.getElementById("button");

            if(flag){

                conObj.style.display="block";

                flag=false;

                button.innerHTML = "隐藏";

            }else{

                conObj.style.display="none";

                flag=true;

                button.innerHTML = "显示";

            }

        }

    </script>

</head>

<body>

<div class="box">

    <div class="title">这里是一个标题<button onclick="hid()" id="button">隐藏</button></div>

    <div id="content" style="display: block;">

        <p>1.whatya you want for me.</p>

        <p>2.I have loved you for a thousand years.</p>

        <p>3.One step closer!</p>

        <p>4.How did I fall in love with you?</p>

    </div>

</div>

</body>

</html>

3.点出一个世界...

<!DOCTYPE html>

<html lang="en" onclick="clickPic(event)">

<head>

    <meta charset="UTF-8">

    <title>点到你开花</title>

    <script type="text/javascript">

    function clickPic(e){

        var x = e.clientX;

        var y = e.clientY;

        var width = getRandom(10,100);

        var random = getRandom(0,160);

        var divObj = document.createElement("div");

        var imgObj = document.createElement("img");

        document.body.appendChild(divObj);

        divObj.appendChild(imgObj);

        if (random<10){imgObj.src = "images/P_00"+random+".jpg";}

        else if (random<100){imgObj.src = "images/P_0"+random+".jpg";}

        else if (random<160){imgObj.src = "images/P_"+random+".jpg";}

        imgObj.width = width;

        imgObj.style = "position:relative;left:0px;top:0px;"

        divObj.style = "position:absolute;left:"+x+"px;top:"+y+"px;border:1px solid #ccc;padding:5px;border-radius:10px;box-shadow:5px 5px 10px gray;"

    }

    function getRandom(min,max){

        return Math.floor(Math.random()*(max-min)+min);

    }

    </script>

</head>

<body>

</body>

</html>

JS(五)的更多相关文章

  1. js五种设计模式说明与示例

    第一种模式:js工厂模式    var lev=function(){        return "啊打";      };      function Parent(){    ...

  2. js 五种绑定彻底弄懂this，默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解

     壹 ❀ 引 可以说this与闭包.原型链一样,属于JavaScript开发中老生常谈的问题了,百度一搜,this相关的文章铺天盖地.可开发好几年,被几道this题安排明明白白的人应该不在少数(我就是 ...

  3. JS五种绑定彻底弄懂this，默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解(转载)

    目录 壹 ❀ 引 贰 ❀ this默认绑定 叁 ❀ this隐式绑定 1.隐式绑定 2.隐式丢失 肆 ❀ this显式绑定 伍 ❀ new绑定 陆 ❀ this绑定优先级 柒 ❀ 箭头函数的this ...

  4. js五种设计模式

    1.js工厂模式 var lev=function(){ return "嘿哈"; }; function Parent(){ var Child = new object(); ...

  5. sea.js五分钟上手

    SeaJS是一个遵循CommonJS规范的JavaScript模块加载框架.本文给大家分享sea.js知识总结,感兴趣的朋友一起学习吧http://reactjs.cn/http://reactjs. ...

  6. js 五 jquery的使用，调用

    4 this 关键字 this 表示当前函数或方法的调用者 1 全局函数由window调用,所以全局函数中的this 指的是window对象 2 事件处理函数中使用this,指的是当前事件的触发对象 ...

  7. js五种基本数据类型：string, number, boolean, null, undefined

    /** * 五种基本数据类型:string, number, boolean, null, undefined */ // undefined // 声明变量foo,未声明变量bar var foo; ...

  8. node.js(五)字符串转换

    1.stringify函数的基本用法 stringify函数的作用就是序列化对象,也就是说将对象类型转换成一个字符串类型(默认的分割符("&")和分配符("=&q ...

  9. 面试题:实现一个方法clone;可以对js五种数据类型进行值复制

    //先来方法的代码function clone(obj) { var copy; switch(typeof obj){ case 'number': case 'string': case 'boo ...

随机推荐

  1. Java基础知识强化96：Calendar类之获取任意年份的2月有多少天的案例

    1. 分析: (1)键盘录入任意的年份 (2)设置日历对象的年月日            年:就是(1)输入的数据            月:是2(3月份)            日:是1  (3)把 ...

  2. div 固定宽高 水平垂直居中方法

    div固定宽高,水平垂直居中,根据所用单位不同,分成两种情况,分别是"px"和"%"情况. 例:将三层div做出三个边框,要求水平垂直居中.效果如图 情况一(单 ...

  3. querydsl的好处

    http://www.querydsl.com/ 封装了很多访问不同数据层平台的方法,提供统一的通用框架(统一的书写格式,以一种通用的API方式来构建查询).便于抽成统一数据层,昨晚底层,以后其他模块 ...

  4. AndroidSdk下载地址和环境变量配置

    一.Android Studio 下的AndroidSdk下载地址 http://tools.android-studio.org/index.php/sdk 二.Android Sdk环境变量设置 ...

  5. Java的native关键字---JAVA下调用其他语言的关键词

    今天研究Java基础类库,Object类的时候,发现了一个关键字:native 咦?这是个什么东东?它认识我,我可不认识它! 嘿嘿,没关系,baidu一下. java native关键字 一. 什么是 ...

  6. 升级openssl到1.0.1g

    先进行支撑包的安装: # yum install -y zlib   openssl升级步骤: 下载最新版本的openssl源码包 # wget ftp://ftp.openssl.org/sourc ...

  7. Linux入门 (笔记)

    Man can conquer nature. "人定胜天" 一.基本操作   1.重要快捷键 Tab 补全命令.目录.参数.文件名等 Ctrl+c 强制终止当前的程序 Ctrl+ ...

  8. Debian/Ubuntu手动编译安装MongoDB C++11驱动及驱动测试

    本文章仅限cnblogs网站内转载!请某网站自觉,遵纪守法,尊重原创! 系统环境情况: 最小化.无桌面环境 新安装的Debian 8 Server 版本操作系统虚拟机一台 手动编译安装MongoDB ...

  9. phpcms v9版本二次开发四步曲

    今晚看了一下PHPCMS V9版本,做一个实例抛砖引玉,其实很简单,以下是二次开发的一个实例以旅游模块为例1.   在phpcms\modules目录下建立一个文件夹tour2.  在phpcms\m ...

  10. 为Linux服务器伪装上Windows系统假象

    网络上的计算机很容易被黑客利用工具或其它手段进行扫描,以寻找系统中的漏洞,然后再针对漏洞进行攻击. 通过伪装Linux系统,给黑客设置系统假象,可以加大黑客对系统的分析难度,引诱他们步入歧途,从而进一 ...