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


Posted in Javascript onMarch 29, 2017

效果图:

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>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
May 03 Javascript
CSS JavaScript 实现菜单功能 改进版
Dec 09 Javascript
使用jquery自定义鼠标样式满足个性需求
Nov 05 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
详解Javascript继承的实现
Mar 25 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
Oct 27 Javascript
Three.js利用性能插件stats实现性能监听的方法
Sep 25 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
Sep 16 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
Apr 14 Javascript
vue开发中遇到的问题总结
Apr 07 Javascript
canvas多重阴影发光效果实现
Apr 20 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
Mar 29 #Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 #Javascript
Javascript 详解封装from表单数据为json串进行ajax提交
Mar 29 #Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 #Javascript
整理关于Bootstrap警示框的慕课笔记
Mar 29 #Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
Mar 29 #Javascript
jQuery实现字体颜色渐变效果的方法
Mar 29 #jQuery
You might like
thinkphp中ajax与php响应过程详解
2014/12/08 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
PHP 错误处理机制
2015/07/06 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
php微信开发之关键词回复功能
2018/06/13 PHP
Laravel 手动开关 Eloquent 修改器的操作方法
2019/12/30 PHP
IE innerHTML,outerHTML所引起的问题
2009/06/04 Javascript
如何确保JavaScript的执行顺序 之jQuery.html深度分析
2011/03/03 Javascript
Firefox中使用outerHTML的2种解决方法
2014/06/07 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
Vue.js动态添加、删除选题的实例代码
2016/09/30 Javascript
深入理解JS中的Function.prototype.bind()方法
2016/10/11 Javascript
微信小程序导航栏滑动定位功能示例(实现CSS3的positionsticky效果)
2019/01/24 Javascript
8个有意思的JavaScript面试题
2019/07/30 Javascript
JS事件流与事件处理程序实例分析
2019/08/16 Javascript
在vue中实现嵌套页面(iframe)
2020/07/30 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
Vue 3自定义指令开发的相关总结
2021/01/29 Vue.js
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python编码类型转换方法详解
2016/07/01 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python之reload流程实例代码解析
2018/01/29 Python
Python常见字符串操作函数小结【split()、join()、strip()】
2018/02/02 Python
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Python HTMLTestRunner测试报告view按钮失效解决方案
2020/05/25 Python
利用PyTorch实现VGG16教程
2020/06/24 Python
tensorflow基于CNN实战mnist手写识别(小白必看)
2020/07/20 Python
介绍一下linux文件系统分配策略
2012/11/17 面试题
毕业生找工作的自我评价
2013/10/18 职场文书
房地产销售员的自我评价分享
2013/12/04 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
看雷锋电影观后感
2015/06/10 职场文书