原生的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. 【深度学习】PyTorch CUDA环境配置及安装

    Pytorch版本介绍 torch:1.6 CUDA:10.2 cuDNN:8.1.0 安装 NVIDIA 显卡驱动程序 一般 电脑出厂/装完系统 会自动安装显卡驱动 如果有 可直接进行下一步 下载链 ...

  2. 【笔记】《Redis设计与实现》chapter12 事件

    12.1 文件事件 Redis基于Reactor模式开发了自己的网络事件处理器:这个处理器被称为文件时间处理器: 文件时间处理器使用IO多路复用程序来同时监听多个套接字,并根据套接字目前执行的任务来为 ...

  3. 18. VUE created 方法作用

    一般可以在created函数中调用ajax获取页面初始化所需的数据. 实例的生命周期: 每个 Vue 实例在被创建之前都要经过一系列的初始化过程.例如,实例需要配置数据观测(data observer ...

  4. synchronized锁由浅入深解析

    一:几种锁的概念 1.1 自旋锁 自旋锁,当一个线程去获取锁时,如果发现锁已经被其他线程获取,就一直循环等待,然后不断的判断是否能够获取到锁,一直到获取到锁后才会退出循环. 1.2 乐观锁 乐观锁,是 ...

  5. JAVAEE_Servlet_09_Adapter适配器GenericServlet

    适配器 GenericServlet * 适配器 (Adapter) - 适配器的作用? 1.我们目前所有的Servlet类都直接实现了javax.servlet.Servlet接口,但是该接口中有些 ...

  6. 858. Mirror Reflection

    There is a special square room with mirrors on each of the four walls.  Except for the southwest cor ...

  7. hdu4814 模拟（黄金分割进制转换）

    题意:       给你一个十进制数,让你把他转化成Q进制数,Q是黄金分割比 = (1+√5)/2. 思路:        首先要明确的就是虽然q是实数,但是依然可以转换成q进制数,因为任何数num, ...

  8. 路由器逆向分析------QEMU的基本使用方法（MIPS）

    本文博客地址:http://blog.csdn.net/qq1084283172/article/details/69258334 一.QEMU的运行模式 直接摘抄自己<揭秘家用路由器0day漏 ...

  9. Python爬虫之使用正则表达式抓取数据

    目录 匹配标签 匹配title标签 a标签 table标签 匹配标签里面的属性 匹配a标签里面的URL 匹配img标签里的 src 相关文章:Linux中的正则表达式 Python中的正则表达式 实例 ...

  10. Intel汇编语言程序设计学习-第二章 IA-32处理器体系结构-下

    2.2  IA-32处理器体系结构 如前所述,IA-32是指始于Intel386直到当前最新的奔腾4的系列的处理器(额...这本书是什么时候写的啊,表示现在应该是I7啊),在IA-32的发展过程中,I ...