4、基础应用实例

1、开关灯

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            cursor: pointer;
            /*background: white;*/
        }
        .bg0{
            background: red;
        }
        .bg1{
            background: blue;
        }
        .bg2{
            background: white;
        }
    </style>
</head>
<body  class="bg0" id="box" >
<script>
//    1、要操作谁就先获取谁
//2、绑定点击事件
//3.点击的时候 执行效果

    var obox=document.getElementById("box");

//第一种:
//    obox.onclick=function(){
//     var bg=obox.style.backgroundColor;
//        console.log(bg)
//     if(bg=="white"){
//        obox.style.backgroundColor="blue";
//     }else if(bg=="blue"){
//        obox.style.backgroundColor="red";
//     }else{
//        obox.style.backgroundColor="white";
//     };
//};

//第二种:
    obox.onclick=function sum(){
            var bg=obox.className;
            if(bg=="bg0"){
                obox.className="bg1"
            }else if(bg=="bg1"){
                obox.className="bg2"
            }else{
                obox.className="bg0"
            }
    };
sum()
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            cursor: pointer;
            /*background: white;*/
        }
        .bg0{
            background: red;
        }
        .bg1{
            background: blue;
        }
        .bg2{
            background: white;
        }
    </style>
</head>
<body id="box" style="background-color: white">
<script>
    var obox=document.getElementById("box")
    box.onclick=function(){
        var bg=this.style.backgroundColor
        bg=="white"?this.style.backgroundColor="black":this.style.backgroundColor="white";
    }
    //this 函数中 当前操作的元素
</script>
</body>
</html>

2、隔行换色

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul,li{
            list-style: none;
        }
        div{
            width: 500px;
            border: 1px solid orange;
            margin: 0 auto;
            border-radius: 20px;
            /*position: absolute;*/
            /*top:50%;*/
        }
        li{
            height: 30px;
            line-height: 30px;
            padding: 0 20px;
        }
        .bg1{
            background: gold;
        }
        .bg2{
            background: green;
        }
        .bg3{
            background: pink;
        }
    </style>
</head>
<body>
<div id="box">
    <ul>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
        <li>我会变颜色</li>
    </ul>
</div>
<script>
    var oli=document.getElementById("box").getElementsByTagName("li");

//    for 循环
//    for(var i=0;i<oli.length;i++){
//        var obo=oli[i];
//        i%2==0?obo.className="bg1":obo.className="bg2"
//    };

//    拼接字符串
    for(var i=0;i<oli.length;i++){
//        var obo=oli[i];
        oli[i].className=‘bg‘+(i%2+1);// "bg"+(i%2+1) // ‘bg‘+(i%2+1)+‘‘  //"bg"+(i%2+1)+""
        // 但是"bg‘+i%2+‘"没法去解释  是错的   oli[i].oldName=
        console.log("bg"+(i%2+1))
//        console.log("bg"+i%2+"");  ?????拼接字符串(看单双引号的结束标签去理解,字符串中若遇到变量,要将变量两边断开 用+号拼接)
//        obo.oldName="bg"+i%2+""; // 自定义属性
        oli[i].onmouseover=function(){
            this.oldName=this.className
            this.className="bg3"
        };
        oli[i].onmouseout=function(){
            this.className=this.oldName
        };
    }

</script>
</body>
</html>

3、九九乘法表

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .box{
            width: 900px;
            height: 270px;
            border: 1px solid red;
            border-radius: 10px;

        }
        li{
            height: 30px;
        }
        span{
            float: left;
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
        }
        .bg0{
            background: orangered;
        }
        .bg1{
            background: darkblue;
        }
        .bg2{
            background: green;
        }
        .bg3{
            background: pink;
        }
    </style>
</head>
<body>
<div id="box1" class="box"></div>
<script>
    var obox=document.getElementsByClassName("box").item(0);
    var oli=obox.getElementsByTagName("li");
    var str="";
    str+="<ul>";
    for(var i=1;i<=9;i++){
        str+="<li>";
        for(var j=1;j<=i;j++){
            str+="<span>";
                str+=j+"*"+i+"="+j*i;
            str+="</span>";
        };
        str+="</li>"
        oli[i].className="bg"+i%3;
        //为什么不能放到里面?? js代码必须等结构加载完之后再加载,放到里面结构输出过程中不能识别,
//        单独拿出来,另外再放到一个循环中
    }
    str+="</ul>";
    console.log(str)
    obox.innerText=str;
    //box1.innerHTML=str  直接放Id名也可以?????只有id名可以
    for(var s=1;s<=9;s++){
        oli[s].onmouseover=function(){
            this.old=this.className;//赋值 把后面的赋给前面的 把当前样式的类名赋给old属性
//            a=this.className;
// 不给a定义变量,默认为全局变量 也可以实现,虽然是鼠标移入和移出两个作用域,单全局变量都可以获取
            this.className="bg3";
        };
        oli[s].onmouseout=function(){
            this.className=this.old;
//            this.className=a;

        };
    };
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            font-family: arial, "微软雅黑";
            font-size: 14px;
        }
        ul,li{
            list-style: none;
        }
        #tab{
            width: 900px;
            height: 270px;
            position: absolute;
            top: 30%;
            left: 50%;
            margin:-135px 0 0 -450px;
            border: 1px solid red;
            border-radius: 10px;
        }
        #tab{
            height: 30px;
            line-height: 30px;
        }
        #tab span{
            width: 100px;
            height: 30px;
            display: inline-block;
            text-align: center;
        }
        .c0{
            background: blue;
        }
        .c1{
            background: pink;
        }
        .c2{
            background: gold;
        }
        .c3{
            background: orange;
        }
    </style>
</head>
<body>
<div id="tab">
    <!--<ul>-->
        <!--<li><span>1*1=1</span></li>-->
        <!--<li>-->
            <!--<span>1*1=1</span>-->
            <!--<span>1*1=1</span>-->
        <!--</li>-->
        <!--<li>-->
            <!--<span>1*1=1</span>-->
            <!--<span>1*1=1</span>-->
            <!--<span>1*1=1</span>-->
            <!--<span>1*1=1</span>-->
        <!--</li>-->
        <!--<li>-->
            <!--<span>1*1=1</span>-->
            <!--<span>1*1=1</span>-->
        <!--</li>-->
    <!--</ul>-->
</div>
<script>
    var otab=document.getElementById("tab");
    var str=""; //定义空字符串
    str+="<ul>";
        for(var i=1;i<=9;i++){
            var val=""; //设定初始值  可有可无 与输出的结果无关
            switch(i%3){
                case(0):
                    val="c1";
                    break;
                case(1):
                    val="c2";
                    break;
                default :
                    val="c3";
            }
            str+="<li class="+val+">";
            //上面switch输出一个值,为什么这里 class=val 是不对的,因为val是一个字符串
            // 向字符串中添加val是变量  字符串中若遇到变量,要将变量用+号拼接到字符串中。

//            str+="<li class=‘c"+i%3+"‘>"; //拼接字符串(c0 c1 c2) 写入隔行变色样式
//            str+="<li class=‘c"+(i%3+1)+"‘>"; //拼接字符串(c1 c2 c3) 写入隔行变色样式
//            console.log("<li class=‘c"+(i%3+1)+">");  // 能输出 注意拼接后保证class后面类名的引号

                            for(var j=1;j<=i;j++){  // j<=i 不能是 j<=9 否则就双向算两遍了
                                str+="<span>"; // 添加span标签 方便写入css样式
                                    str+=""+j+"*"+i+"="+(j*i)+"";  //str+="" 向span标签中添加内容
                                    // j+"*"+i+"="+j*i 按引号的开始与结束去理解的
                                str+="</span>";
                            };
            str+="</li>";
        };
    str+="</ul>";
otab.innerHTML=str;
    //字符串拼接:单双引号嵌套使用规则:
    // 1、单双引号不能同时嵌套用,外单内双 内双外单
//    2、如果一个字符串中需要增加一个变量,看最外面是""还是‘‘  如果是双引号,那么 "+变量+" ,如果是‘‘  则为 ‘+变量+‘
            // (原理:看单双引号的开始与结束标记来理解)
//    单双引号的使用不是外单内双 内单外双的记忆问题,而是单双引号的开始与结束的识别问题
                // “”大“”  “‘大’” 的意义是不一样的(第一个大字没有被引号包裹)
</script>
</body>
</html>
时间: 2024-10-19 18:43:39

4、基础应用实例的相关文章

SQL 查询基础(2)-实例

上次说到SQL查询语句的逻辑执行过程,现在来用一个实例说明一下逻辑执行的过程. 前提:我们有三个表,分别记住客户信息.订单信息和产品信息 客户信息表:Customer ID,Name,Adress,PhoneNumber ID Name Adress PhoneNumber 1 CompanyA No.1 Street 123456 2 CompanyB No.2 Street 23453 3 CompanyC No.3 Street 45321 4 CompanyD No.4 Street 4

C#基础与实例教程最简单的C#快速入门教程【转自:http://www.82011433.com/Html/?6982.html】

c#基础与实例教程最简单的C#快速入门教程 在一小时内学会C#.使用例程,简单却完整的探索C#语言的构造和特点.本文特别适合有C++基础却没有太多精力学习C#的读者. 简介 C#是一种具有C++特性,Java样式及BASIC快速建模特性的编程语言.如果你已经知晓C++语言,本文将在不到一小时的时间内带你快速浏览C#的语法.如果熟悉Java语言,Java的编程结构.打包和垃圾回收的概念肯定对你快速学习C#大有帮助.所以我在讨论C#语言构造的时候会假设你知道C++. c#基础与实例教程最简单的C#快

AutoCAD ObjectARX(VC)开发基础与实例教程2014版光盘镜像

AutoCAD ObjectARX(VC)开发基础与实例教程2014,最新版,光盘镜像 作者:张帆 朱文俊 编著 出版社:中国电力出版社 出版时间:2014年6月 点击一下

Java 找出四位数的全部吸血鬼数字 基础代码实例

/** * 找出四位数的全部吸血鬼数字 * 吸血鬼数字是指位数为偶数的数字,能够由一对数字相乘而得到,而这对数字各包括乘积的一半位数的数字,当中从最初的数字中选取的数字能够随意排序. * 以两个0结尾的数字是不同意的. *   比例如以下列数字都是吸血鬼数字 1260=21*60 1827=21*87 2187=27*81 ... * 比較笨的低效率的做法: 遍历全部四位数, 每生成一个四位数的时候, *         在双重循环遍历两位数,在两位数的内层循环中推断是否与最外层循环的四位数相等

WinForm之BindingSource基础操作实例教程

通常我们在进行数据绑定的时候,常用的数据源有DataSet.DataTable.BindingList<T>.还有强类型数据源.今天我们来通过实例了解一下BindingSource组建,分享给大家供大家参考借鉴之用. BindingSource的两个用途: (1)首先,它提供一个将窗体上的控件绑定到数据的间接层.这是通过将 BindingSource 组件绑定到数据源,然后将窗体上的控件绑定到 BindingSource 组件来完成的.与数据的所有进一步交互(包括导航.排序.筛选和更新)都是通

C#反射之基础应用实例总结

本文将反射的东西整理了一下 , 提供了最全面的东西 , 当然也是基础的东西 , 在学好了这一切的基础上 , 大家可以学习反射的具体插件等应用 首先我们建立一个类库 , 将它生成为 reflectPrj .dll, 代码如下: using System; using System.Collections.Generic; using System.Text; namespace reflectPrj { /// <summary> /// 接口 /// </summary> publ

C#验证码识别基础方法实例分析

本文实例讲述了C#验证码识别基础方法,是非常实用的技巧.分享给大家供大家参考.具体方法分析如下: 背景 最近有朋友在搞一个东西,已经做的挺不错了,最后想再完美一点,于是乎就提议把这种验证码给K.O.了,于是乎就K.O.了这个验证码.达到单个图片识别时间小于200ms,500个样本人工统计正确率为95%.由于本人没有相关经验,是摸着石头过河.本着经验分享的精神,分享一下整个分析的思路.在各位大神面前献丑了. 再来看看部分识别结果如下图所示: 这里是不是看着很眼熟?下面再来具体分析一下. 处理第一步

Vue.js 基础指令实例讲解(各种数据绑定、表单渲染大总结)——新手入门、高手进阶

Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用.他是基于AnjularJs 编写的,所以和前者的语法特别相似,却又使用简洁了很多. 那今天,我就给大家详细的说道说道这个 Vue.js ,以下是我们这次详解的目录,朋友们可以根据自己的情况选择性阅读,所有操作均附有代码实现. 1. Vue.js 如何绑定到页面中,使用他的功能. 2.

java基础学习05(面向对象基础01--类实例分析)

面向对象基础01(类实例分析) 实现的目标 1.如何分析一个类(类的基本分析思路) 分析的思路 1.根据要求写出类所包含的属性2.所有的属性都必须进行封装(private)3.封装之后的属性通过setter和getter设置和取得4.如果需要可以加入若干构造方法 5.再根据其它要求添加相应的方法6.类中的所有方法都不要直接输出,而是交给被调用处调用 Demo 定义并测试一个名为Student的类,包括属性有"学号"."姓名"以及3门课程"数学".

MongoDB:MapReduce基础及实例

背景 MapReduce是个非常灵活和强大的数据聚合工具.它的好处是可以把一个聚合任务分解为多个小的任务,分配到多服务器上并行处理. MongoDB也提供了MapReduce,当然查询语肯定是JavaScript.MongoDB中的MapReduce主要有以下几阶段: 1. Map:把一个操作Map到集合中的每一个文档 2. Shuffle: 根据Key分组对文档,并且为每个不同的Key生成一系列(>=1个)的值表(List of values). 3. Reduce: 处理值表中的元素,直到值