js实现华丽的九九乘法表效果

效果图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>span实现的乘法表</title>
 <style type="text/css">
  .wrap {
   width: 800px;
   margin: 20px auto;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
  }

  span {
   padding: 3px;
   font-weight: 700;
   display: inline-block;
   line-height: 30px;
   border-bottom: 2px solid #000000;
   border-left: 2px solid #000000;
   width: 80px;
   cursor: pointer;
  }
  .last {
   margin-top: -2px;
   border-top: 2px solid #000000;
   border-right: 2px solid #000000;
  }

  .bg0 {
   background-color: yellow;
  }

  .bg1 {
   background-color: lawngreen;
  }

  .bg2 {
   background-color: lightblue;
  }

  .hover {
   background-color: #BB3BD9;
  }
  .only{
   background-color: lightsalmon;
  }
 </style>
</head>
<body>
<script>
 function multiplication(a) {
  var str = '<div class="wrap">';
  for (var i = 1; i <= a; i++) {
   for (var j = 1; j <= i; j++) {
    var curstr = j + ' x ' + i + '= ' + i * j;
    j !== i ? str += '<span class="' + 'bg' + (i % 3) + '">' + curstr + '</span>' : str += '<span class="' + 'last bg' + (i % 3) + '">' + curstr + '</span><br/>';
   }
  }
  str += "</div>";
  document.write(str);
 }
 i

 multiplication(9);

 var oSpans = document.getElementsByTagName("span");
 for (var i = 0; i < oSpans.length; i++) {
  oSpans[i].onclick = function () {
   //alert("我是第 "+parseInt(this.innerHTML)+" 行");
   alert(this.innerHTML + " 我在第 " + this.innerHTML.charAt(4) + " 行");
  }
  oSpans[i].onmouseover = function () {
   //console.log(111);
   var num = this.innerHTML.charAt(4);
   //console.log(num);
   for (var j = 0; j < oSpans.length; j++) {
    if (oSpans[j].innerHTML.charAt(4) === num) {
     oSpans[j].classList.add("hover");
    }
   }
   this.classList.add("only");
  }
  oSpans[i].onmouseout = function () {
   var num = this.innerHTML.charAt(4);
   for (var j = 0; j < oSpans.length; j++) {
    if (oSpans[j].innerHTML.charAt(4) === num) {
     oSpans[j].classList.remove("hover");
    }
   }
   this.classList.remove("only");
  }
 }
</script>
</body>
</html>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • JavaScript实现九九乘法表的简单实例

    每个学过编程的人都写过"HelloWorld" 但99乘法表,我想也应该成为每个编程初学者的必编程序 这是JavaScript的实现方法,非常适合初学者!!! 以下是代码及注释 <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>JavaScript九

  • JavaScript实现梯形乘法表的方法

    JavaScript实现梯形乘法表的方法

    本文实例讲述了JavaScript实现梯形乘法表的方法.分享给大家供大家参考.具体如下: 效果如下图所示: 表格用html中的table,tr,td,然后利用for语句实现,循环输出行和列,再根据行列的数量进行乘法运算,第一个for循环输出9行,然后内嵌一个for,在条件表达式中取第一个for循环的值然后进行输出表格运算,为什么要取第一个for循环,因为第一个for循环的次数是梯形排列的规则,梯形排列的规则是第一行一个格子,第二行二个格子,第三行三个格子,以此类推. 完整代码如下: <!DOCT

  • JavaScript实现99乘法表及隔行变色实例代码

    JavaScript实现99乘法表及隔行变色实例代码

    项目需求:实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if和switch两种判断方式都能实现: 额,分析一下实例要求:一个99乘法表,一个多方法的隔行变色,鼠标滑过变另外一个颜色,离开恢复原色. 嗯,我们一步步来吧! 99乘法表的实现,我相信很多人都知道怎么实现,无非是2个for循环得到的结果,这里我就不多做解释,还不理解的同学可以仔细研究一下代码,研究一

  • 基于javascript实现九九乘法表

    基于javascript实现九九乘法表

    本文实例为大家分享了javascript实现九九乘法表的相关代码,具体内容如下 <script type="text/javascript"> var sum=0; var wite; for (var i = 1; i < 10; i++){ var div=$('<div class="class'+i+'"></div>'); $("body").append(div); for(var j = i

  • JS实现上下左右对称的九九乘法表

    JS实现上下左右对称的九九乘法表

    九九乘法表使用很多种语言都可以实现.本文讲述JavaScript中常用的两种循环(For.While)来完成这四种对称的九九乘法表,这个例子是一个练习循环基础很好的方法,由于排版上对不整齐,因此循环了一个表格. 一.左下角为度的梯形乘法表: For循环代码 document.write("<table width='' border='>"); for(var i=; i<=; i++){ document.write("<tr>");

  • jsp输出九九乘法表的简单实例

    jsp输出九九乘法表的简单实例

    <% String st = ""; for(int i = 1; i <= 9; i++){ for(int j = 1; j <= i; j++){ st += j+"x"+i+"="+i*j; st += "  "; } st += "<br>"; } %> <table width="400" height="200"

  • JavaScript编写九九乘法表（两种任选）

    JavaScript编写九九乘法表（两种任选）

    话不多说,请看代码: <script language=javascript> for(i=1;i<=9;i++){ for(j=1;j<=9;j++){ document.write (i+"*"+j+"="+i*j+" "); if(i==j) {document.write ("<br/>"); break;} //用的if语句,如果这两个数字相同了 那么跳出,另起一行 } } <

  • javascript和jquery分别实现的九九乘法表代码

    javascript实现的九九乘法表代码 99乘法表 for(var i=1;i"); } [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] jquery实现的九九乘法表代码 jquery 九九乘法表 $(document).ready(function(){ $(" ").data('fact',8).css('margin','10px') .appendTo(document.body) .bind('error',function(){ $(this).pa

  • jsp/javascript打印九九乘法表代码

    jsp表达式方式: 复制代码 代码如下: <center> <table border="1"> <% for (int i = 1; i <= 9; i++) { %> <tr> <% for (int j = 1; j <= 9; j++) { %> <td> <% if (j <= i) { %> <%=i%>*<%=i%>=<%=i * j%>

  • js实现华丽的九九乘法表效果

    js实现华丽的九九乘法表效果

    效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>span实现的乘法表</title> <style type="text/css"> .wrap { width: 800px; margin: 20px auto; -webkit-user-selec

  • JS基于for语句编写的九九乘法表示例

    JS基于for语句编写的九九乘法表示例

    本文实例讲述了JS基于for语句编写的九九乘法表.分享给大家供大家参考,具体如下: js的功能非常强大,那么现在我们就用js里面的for循环来输出一个原汁原味的九九乘法表; 先看运行效果: 核心代码如下: <script type="text/javascript"> document.write('<table border="1" bgcolor="#ccc" width="80%" cellpaddin

  • JSP生成九九乘法表的简单实例

    JSP生成九九乘法表的简单实例

    JSP生成九九乘法表的简单实例 一 用表达式和脚本方式实现九九乘法表 <%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://&quo

  • 动态的9*9乘法表效果的实现代码

    动态的9*9乘法表效果的实现代码

    近日在群里看到有个题目,拿出来写写, 要求: 用html,css,原生js实现如图的效果,先正向输出,然后逆向回溯,最后停留在完整的画面. 首先: HTML部分代码: <div id="result"></div> 就是这么简单一行搞定. CSS代码: #result{ width:550px; margin:30px auto; font-size:0; font-family:Consolas,"Liberation Mono",Menl

  • R语言 实现输出九九乘法表

    R语言 实现输出九九乘法表

    在R语言中,使用cat()函数可以将多个变量连接起来并输出到控制台或者File文件中. 下面,以九九乘法表为例来 演示cat()函数的用法 //jiujiubiao.R ## 九九乘法表 for(i in 1:9){ for(j in 1:i){ m = j*i cat(i,'*',j,'=',m,' ') } cat('\n') } 效果如下: 图(1) 使用cat()输出九九乘法表 补充:R语言 用 sprintf 打印九九乘法表 九九乘法表 for (i in c(1:9)) { for

  • Python打印三角形九九乘法表代码

    Python打印三角形九九乘法表代码

    正三角形九九乘法表 #正三角形九九乘法表 for i in range(1,10): for j in range(1,i+1): print(str(i)+"*"+str(j)+"="+str(i*j),end="\t") print("\n") 实现效果如下图所示: 倒三角形九九乘法表 #倒三角形九九乘法表 for m in range(1,10): for n in range(m,10): #print("{

  • Python实现打印九九乘法表的不同方法总结

    Python实现打印九九乘法表的不同方法总结

    目录 前言 第一种方法:for-for 第二种方法:while-while 第三种方法:while-for 第四种方法:for-while 第五种方法:定义一个变量a 第六种方法:使用递归 第七种方法:使用一行语句 前言 嗨喽~大家好呀,这里是魔王呐  ~! 在学习Python的过程中需要不断的积累和练习,这样才能够走的更远, 今天一起来学习怎么用Python写九九乘法表~ 第一种方法:for-for 代码: for i in range(1, 10): for j in range(1, i+

  • 使用Lable控件输出九九乘法表

    使用Lable控件输出九九乘法表

    利用Lable控件输出九九乘法表,具体内容如下 首先建立一个空网站,之后选择添加新项,添加一个Web窗体. 进入.aspx文件之后,在设计界面中添加9个Lable控件.Lable控件在标准组中.得到的源代码是这样的. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebForm4.aspx.cs" Inherits="WebForm4" %> <

随机推荐