原生的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. 详细Tomcat安装及问题排查

    一.安装 1.下载官网:https://tomcat.apache.org/ 2.将下载后的包解压到目录中会出现以下页面 3.设置环境变量,向path中添加tomcat的bin目录地址 4.cmd进入 ...

  2. java 用枚举替换多if-else

    1.定义抽象类 package com.polaris.design; /** * @author :shi * @date :Created in 2020/8/18 20:15 * @descri ...

  3. 13. VUE 组件之间数据传递

    组件数据传递: 父组件向内传递属性---动态属性 子组件向外发布事件 solt 插槽传递模板---具名solt 1. 父组件向子组件传递数据 子组件在父组件的并作为标签引入,通过设置标签的属性传递数据 ...

  4. 通过Dapr实现一个简单的基于.net的微服务电商系统(六)——一步一步教你如何撸Dapr之Actor服务

    我个人认为Actor应该是Dapr里比较重头的部分也是Dapr一直在讲的所谓"stateful applications"真正具体的一个实现(个人认为),上一章讲到有状态服务可能很 ...

  5. python对BP神经网络实现

    python对BP神经网络实现 一.概念理解 开始之前首先了解一下BP神经网络,BP的英文是back propagationd的意思,它是一种按误差反向传播(简称误差反传)训练的多层前馈网络,其算法称 ...

  6. BB网络层测试

    网络层测试2020 问题 1 以下不属于网络层的协议是___A_______. A  DHCP  B ICMP  C IGMP  D ARP 10 分    问题 2 如果目的网络.目的主机都对,但是 ...

  7. 【Springboot项目启动异常】项目启动,数据库连接异常

    今天使用Springboot 整合 MybatisPlus 准备写一个Demo,在项目启动时,频繁出错,在此记录整个问题的解决过程 问题如下图 人工翻译一遍,主要意思就是没有检测到数据库驱动,也就是说 ...

  8. 病毒木马查杀实战第012篇：QQ盗号木马之逆向分析

    前言 在本系列的文章中,对每一个病毒分析的最后一个部分,若无特殊情况,我都会采用逆向分析的手段来为读者彻底剖析目标病毒.但是之前的"熊猫烧香"病毒,我用了三篇文章的篇幅(每篇250 ...

  9. 绕过CDN查找网站真实ip

    在渗透测试过程中,经常会碰到网站有CDN的情况.CDN即内容分发网络,主要解决因传输距离和不同运营商节点造成的网络速度性能低下的问题.说的简单点,就是一组在不同运营商之间的对接点上的高速缓存服务器,把 ...

  10. Win64 驱动内核编程-18.SSDT

    SSDT 学习资料:http://blog.csdn.net/zfdyq0/article/details/26515019 学习资料:WIN64内核编程基础 胡文亮 SSDT(系统服务描述表),刚开 ...