原生的js实现99乘法表实现选择下拉框颜色，改变背景颜色为选中的颜色

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>九九乘法表</title>

    <style>

        p {

            width: 100px;

            display: inline-block;

            padding: 10px;

            margin: 0;

            font-size: 20px;

            background-color: #FFFFFF;

            border-top: 1px solid black;

            border-right: 1px solid black;

        }

        div {

            display: block;

        }

        #zheng99 {

            width: auto;

            display: inline-block;

            border-left: 1px solid #000000;

            border-bottom: 1px solid #000000;

        }

        #group{

            display: block;

            margin-top: 20px;

            width: 200px;

            height: 50px;

            font-size: 20px;

        }

        #bianse{

            display: inline-block;

            width: 200px;

            height: 60px;

            margin-top: 20px;

            font-size: 20px;

        }

    </style>

</head>

<body>

<h1>9*9乘法表</h1>

<div id="zheng99"></div>

<select id="group">

    <option value="red">红色</option>

    <option value="yellow">黄色</option>

    <option value="green">绿色</option>

</select>

<button onclick="changeColor()" id="bianse">改变颜色</button>

</body>

<script>

    window.onload = function() {

        for(let i = 1; i <= 9; i++) {

            divs = document.getElementById("zheng99").innerHTML += "<div></div>";

            for(let j = 1; j <= i; j++) {

                document.getElementById("zheng99").getElementsByTagName("div")[i - 1].innerHTML +=

                    "<p>" + j + " x " + i + " = " + (j * i) + "</p>";

            }

        }

    };

    function changeColor() {

        let tag = document.getElementsByTagName('p');

        let select = document.getElementById('group');

        let index = select.selectedIndex;

        let group = select.options[index].value;

        for (let i = 0;i < tag.length; i++){

            tag[i].style.backgroundColor = group;

        }

    }

</script>

</html>

在这段代码中用到的修改i颜色的核心代码是

<select id="selectColor">

    <option value="red">红色</option>

    <option value="yellow">黄色</option>

    <option value="green">绿色</option>

</select>

　　

function changeColor() {

        let tag = document.getElementsByTagName('p');

        let select = document.getElementById('group');

        let index = select.selectedIndex;

        let group = select.options[index].value;

        for (let i = 0;i < tag.length; i++){

            tag[i].style.backgroundColor = group;

        }

    }

　　小伙伴们可以自己试试

html原生js实现99乘法表的更多相关文章

  1. js实现99乘法表

    实现99乘法表(输出到页面上) * document.write("<table border='1' bordercolor='blue'>"); //循环行 9 f ...

  2. js实现99乘法表的编写（双层for循环与递归方法）

    双层for循环实现方法: function nine (num) { ; i <= num; i++){ var str = ''; ; k <= num; k++){ if(i > ...

  3. 用JS，打印99乘法表

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  4. JS基础_打印99乘法表

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. js实现两种99乘法表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. C#使用表达式树动态调用方法并实现99乘法表

    我们在使用C#编程的时候,经常使用反射来动态调用方法,但有时候需要动态的生成方法,下面介绍使用表达式树的方式来自动生成方法,并调用. 首先需要说明什么是表达式,熟悉Linq的程序猿都用过类似于下面的代 ...

  7. JavaScript——99乘法表

    <!DOCTYPE html> <html> <head> <title>99乘法表</title> <style type=&quo ...

  8. python打怪之路【第一篇】：99乘法表

    需求:实现99乘法表 代码: #!/usr/bin/env python # -*- coding:utf-8 -*- #author chenjing for i in range(10): for ...

  9. For循环练习之99乘法表和转义字符

    之前说了for循环的概念以及常用到的操作,那么我们接下来做几个巩固练习: 1.打印99乘法表: 99乘法表的形式: 1*1 = 1 1*2 = 2 2*2 = 4 1*3 = 3 2*3 = 6 3* ...

随机推荐

  1. 直接跑day07中现成的代码可能出现的问题

    由于前面课程中敲代码可能存在写bug且实战作业没有完成,因此今天直接把资料里的代码拿来用.遇到两个问题 问题1:Cannot find JRE '1.8'. You can specify JRE t ...

  2. 网络编程Netty IoT百万长连接优化

    目录 IoT推送系统 IoT是什么 IoT推送系统的设计 心跳检测机制 简述心跳检测 心跳检测机制代码示例 百万长连接优化 连接优化代码示例 TCP连接四元组 配置优化 IoT推送系统 IoT是什么 ...

  3. Salesforce学习之路（三）利用VS Code结合Git开发Salesforce

    在前面说了一些有关Admin的知识,但实际开发运用中,仅凭Admin的配置很难满足项目的定制化需求,因此基于CRM的二次开发则应运而生. 由于国内资料相对较少,所以很多入门新手无处下手,那这里就简单介 ...

  4. Kickdown UVA - 1588

    A research laboratory of a world-leading automobile company has received an order to create a specia ...

  5. 关于SpringBoot结合mybatis后遇到的坑

    先放出我遇到的出错信息,真的出错了可以先看看出错信息,就能更加高效准确的搜索到信息 我的报错日志: org.springframework.beans.factory.UnsatisfiedDepen ...

  6. hdu1316 水大数

    题意:      给你一个区间,问这个区间有多少个斐波那契数. 思路:      水的大数,可以直接模拟,要是懒可以用JAVA,我模拟的,打表打到1000个就足够用了... #include<s ...

  7. LA3905流星

    题意:       在一个二维平面上有n个流星,每个流星有自己的初始位置和速度,有一个照相机,张相机的可视范围是一个矩形框,左下角(0,0)右上角(w ,h),然后问你相机的矩形内出现的最多的流星数是 ...

  8. Python编写基于socket的非阻塞多人聊天室程序（单线程&多线程）

    前置知识:socket非阻塞函数(socket.setblocking(False)),简单多线程编程 代码示例: 1. 单线程非阻塞版本: 服务端: #!/usr/bin/env python # ...

  9. android dalvik浅析一：解释器及其执行

    dalvik是android中使用的虚拟机,基于寄存器,分析基于android4.2源代码.本篇主要分析的是dalvik中的解释器部分,源码位于/dalvik/vm,主要代码在interp和mterp ...

  10. Linux下逻辑卷LVM的管理和RAID磁盘阵列

    目录 LVM 一:LVM的创建 二:LVM的拉伸 三:LVM的缩小 四:LVM的删除 五:RAID磁盘阵列的添加 LVM LVM(Logical Volume Manager) 逻辑卷管理器,可以动态 ...