原生的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. vm16 安装 || 待检验 || 预测无问题

    vm16 安装 安装 下载 下载地址 管理员运行 安装 其余都点下一步/NEXT 激活 完成

  2. mysql 遇到的问题

    1) 客户端(Navicat)远程登录操作再遇问题1142-create command denied to user×××的解决GRANT SELECT,INSERT,UPDATE,DELETE,C ...

  3. ASP程序写的项目与微信服务号（公众号）完美结合。仅需一个DLL组建WeixinDLL

    因ASP程序开发有很多优点,早年间ASP风靡全球,因此如今还在继续运营的ASP开发的项目仍在运行着,但是随着社交网络不断发达,特别是微信支付.微信通讯.小程序等的出现,导致很多ASP项目对接起来就比较 ...

  4. 逻辑引擎、工作流、CMDB小感

    工作流是啥? 在界面上画画点点就能生成代码,这是很吸引人的事情,也是很多自动化工具追求的目标.工作流就是这么一个东西,通过定义流程和输入,就能实现你想要的东西,不需要编写代码. 工作流的实现 通过解析 ...

  5. Selenium3自动化测试【14】元素定位之ID

    元素定位 Selenium需要告知其如何去定位元素,来模拟用户动作.例如要操作Bing搜索页. 首先要找到搜索框与搜索按钮: 通过键盘输入检索的关键字: 用鼠标单击搜索按钮: 提交搜索请求. Sele ...

  6. 菜鸟教程jsonp基础知识讲解

    jsonp是什么? Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据. 为什么我们从不同的 ...

  7. Ribbon、Feign和OpenFeign的区别

    Spring Cloud 微服务架构学习记录与示例 Ribbon Ribbon 是 Netflix开源的基于HTTP和TCP等协议负载均衡组件 Ribbon 可以用来做客户端负载均衡,调用注册中心的服 ...

  8. 【网络协议】 TCP三次握手的流程

    在TCP/IP协议中,TCP协议通过三次握手,建立可靠的连接服务: 三次握手是由客户端发起 第一步: 客户端向服务端发送请求报文(实际上就是一个具有特定格式的数据包),报文中包含一个标志为Syn,Sy ...

  9. Linux中正则表达式和字符串的查询、替换(tr/diff/wc/find)

    目录 正则表达式 基本正则表达式 扩展正则表达式 grep tr diff du wc find 正则表达式 正则表达式,又称正规表示法.常规表示法( Regular Expression,在代码中常 ...

  10. SSRF(服务端请求伪造)漏洞

    目录 SSRF SSRF漏洞的挖掘 SSRF漏洞利用 SSRF漏洞防御 SSRF SSRF(Server-Side Request Forgery,服务器端请求伪造)漏洞,是一种由攻击者构造请求,由服 ...