原生的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. IntelliJ IDEA/Android Studio插件开发指南

    前言 目前在为安卓手机QQ做自动化的相关工作,包括UI自动化,逻辑层自动化等.使用到的uiautomator等框架,需要在Android Studio进行编码工作. 其中很多工作如果做到插件化的话,可 ...

  2. redhat7.6 安装 Python 3

    redhat7.6 默认安装了python2.7. 查看已安装python情况 cd / # 定位到根目录 whereis python # 查看python所在目录 /usr/bin cd /usr ...

  3. Linux执行.sh文件，提示No such file or directory的问题

    问题描述 在window平台下,写好shell脚本文件,迁移到linux平台,赋过可执行权限,执行该sh文件,却提示NO such file or directory 解决方案 难道是文件格式兼容性问 ...

  4. 03 Django web服务开发 - URL路由

    Django中的APP -Django中的一个APP就是一个应用的意思 -项目可以包含多个APP(多个应用) -一个项目对应一个网站(生活服务网站) 一个APP队形网站的一个应用(二手交易,家政服务) ...

  5. 04- cookie与缓存技术

    什么是cookie 定义:Cookies是一种能够让网站服务器把少量数据储存到客户端的硬盘或内存,或是从客户端的硬盘读取数据的一种技术.Cookies是当你浏览某网站时,由Web服务器置于你硬盘上的一 ...

  6. Thinkphp5之Bootstrap自定义BootstrapDetailed分页插件的实现

    首先,在此目录建立一个newcrm\thinkphp\library\think\paginator\driver\BootstrapDetailed.php文件,代码如下: <?php // ...

  7. Linux中的网络配置

    目录 网卡的配置 NetworkManager的使用 Team网卡绑定 Centos6.5.Redhat7.Kali网卡配置的不同 Kali桥接模式配置静态ip 网卡的配置 网卡命名的不同: Rhel ...

  8. UVA11054Gergovia的酒交易

    题意:       有n个村庄,每个村庄要么买酒要么买酒,负数是买酒,整数是买酒,题目保证所有的数字想加和为0,保证有解,然后每一个村庄往相邻的村庄运k坛酒的花费是k,问满足所有的村庄的最小花费是多少 ...

  9. python中实现打印特定字符变换

    首先需要将 lib文件 放在该文件同一目录 使用的时候,先导入 from lib.common import print_msg ,然后调用里面的 print_msg() 方法即可! lib文件地址: ...

  10. MS06-040漏洞研究（上）【转载】

    课程简介 我在之前的课程中讨论过W32Dasm这款软件中的漏洞分析与利用的方法,由于使用该软件的人群毕竟是小众群体,因此该漏洞的危害相对来说还是比较小的.但是如果漏洞出现在Windows系统中,那么情 ...