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 相关文章推荐
jquery的Tooltip插件 qtip使用详细说明
Sep 08 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
JavaScript的作用域和块级作用域概念理解
Sep 21 Javascript
js闭包的用途详解
Nov 09 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
jQuery实现文档树效果
Feb 20 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
Mar 27 jQuery
Vue.js弹出模态框组件开发的示例代码
Jul 26 Javascript
使用JavaScript进行表单校验功能
Aug 01 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
在Angular中使用JWT认证方法示例
Sep 10 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
php绘图之生成饼状图的方法
2015/01/24 PHP
PHP将字符串首字母大小写转换的实例
2017/01/21 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
javascript import css实例代码
2008/07/18 Javascript
JavaScript RegExp方法获取地址栏参数(面向对象)
2009/03/10 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
jquery maxlength使用说明
2011/09/09 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
2011/12/26 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
js实现动态加载脚本的方法实例汇总
2015/11/02 Javascript
node.js微信公众平台开发教程
2016/03/04 Javascript
用JS写的一个Ajax库(实例代码)
2016/08/06 Javascript
angularJS利用ng-repeat遍历二维数组的实例代码
2017/06/03 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
在vue项目中使用element-ui的Upload上传组件的示例
2018/02/08 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
TypeScript基础入门教程之三重斜线指令详解
2018/10/22 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
[01:37]TI4西雅图DOTA2前线报道 VG拿下首胜教练357给出获胜秘诀
2014/07/10 DOTA
讲解Python的Scrapy爬虫框架使用代理进行采集的方法
2016/02/18 Python
python制作爬虫爬取京东商品评论教程
2016/12/16 Python
批量将ppt转换为pdf的Python代码 只要27行!
2018/02/26 Python
pyqt5的QComboBox 使用模板的具体方法
2018/09/06 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
python根据用户需求输入想爬取的内容及页数爬取图片方法详解
2020/08/03 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
JAKO-O德国野酷台湾站:德国首屈一指的婴幼童用品品牌
2019/01/14 全球购物
先进事迹报告会主持词
2014/04/02 职场文书
个人欠款担保书
2014/05/20 职场文书
班训口号大全
2014/06/18 职场文书
2015年感恩母亲节的演讲稿
2015/03/18 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript