php编写九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码
项目需求:实现在页面中输出99乘法表。(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if和switch两种判断方式都能实现;
额,分析一下实例要求:一个99乘法表,一个多方法的隔行变色,鼠标滑过变另外一个颜色,离开恢复原色。 嗯,我们一步步来吧!
99乘法表的实现,我相信很多人都知道怎么实现,无非是2个for循环得到的结果,这里我就不多做解释,还不理解的同学可以仔细研究一下代码,研究一下实现的原理,我在核心代码那里写一点小注释,方便你理解:
/*乘法表的表达式是 i*j 如: * *
所以第一个数从-,分别乘以-,就得到了乘法表
*/
//这里定义是为了记录id的
var cur = ;
//这里是第一位数
for(var i=;i<=;i++){
//这里是第二位数
for(var j=;j<=i;j++){
var sum = i*j;
//这里创建div
var Div = document.createElement("div");
Div.id = cur ;
Div.style.top = i* + 'px';
Div.style.left = j* + 'px';
cur++;
//这里赋值
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
}
}
css样式我就不写了,分到的效果就是这样的:
小学99乘法表,大家都很熟悉,那我们实现第二个功能,隔行变色,要求是用if和switch实现,那我们先用for来实现(这里用的3种颜色是:绿,灰,橙):
var cur = 1;
var bg = null;
for(var i=0;i<=9;i++){
for(var j=0;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
var num = "div" + cur;
Div.id = num ;
Div.style.top = i*35 + 'px';
Div.style.left = j*105 + 'px';
cur++;
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
var oDiv = document.getElementById(num);
if(cur%3 == 0){
bg="green";
}else if(cur%3 == 1){
bg="grey";
}else if(cur%3 == 2){
bg="orange";
oDiv.style.backgroundColor= bg;
}
}
实现效果是这样的:
用switch方法实现:
var cur = 1;
var bg = null;
for(var i=0;i<=9;i++){
for(var j=0;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
var num = "div" + cur;
Div.id = num ;
Div.style.top = i*35 + 'px';
Div.style.left = j*105 + 'px';
cur++;
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
var oDiv = document.getElementById(num);
switch(cur%3){
case 0 :
bg="green";
break;
case 1 :
bg="grey";
break;
case 2 :
bg="orange";
break;
}
oDiv.style.backgroundColor= bg;
}
}
实现效果是这样的:
效果好像无差,哈哈,说来实现方法也是挺简单的,现在看看移入表色是怎么做的,以switch判断为例:
var cur = ;
var bg = null;
for(var i=;i<=;i++){
for(var j=;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
var num = "div" + cur;
Div.id = num ;
Div.style.top = i* + 'px';
Div.style.left = j* + 'px';
cur++;
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
var oDiv = document.getElementById(num);
switch(cur%){
case :
bg="green";
break;
case :
bg="grey";
break;
case :
bg="orange";
break;
}
oDiv.style.backgroundColor= bg;
}
}
var oDiv = document.getElementsByTagName("div");
var len = oDiv.length;
for(var i=;i
//鼠标移入
oDiv[i].onmouseover = function(){
//第一种写法,可以获取行内样式(用style包起来的),也可以获取样式表中的样式,且值为计算过的
//var defaultBg = getStyle(this,'background-color');
//第二种写法,只能获取style包起来的行内样式,值没有经过计算
var defaultBg = this.style.backgroundColor; //这里是为了存元素刚移入时的背景颜色
this.style.backgroundColor = 'red';
this.onmouseout = function(){
this.style.backgroundColor = defaultBg;
}
}
}
//这里是获取元素的样式值,兼容性写法
function getStyle(obj,attr){
if(obj.currentStyle){
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr];
}
}
得到的效果我就不截图了,自行脑补,或者自己也写一下,到此,所以的要求都写完了!你以为真的到这里就完了吗?按照我一贯的风格,当然没有完,后面还有料!往下看:
你不觉得这个隔行变色有点奇怪吗,确实是隔行变了色,如果是100*100的div,效果杠杠的,但是像99乘法表这样的结果,我只能说呵呵,那能不能让99乘法表实现像100*100的div那样的隔行变色呢?咱们说工匠精神,就是要在乎这些细枝末节,写写看呗!
原理:100*100的div,如果我给每一个编一个号,用横轴和纵轴表示,像这样:
那我们就知道,什么数值对应什么颜色了,转化成99乘法表就是这样:
那,思路就来了,如果我给每个div加一个标记,表示他是第几行的第几列,我就知道他是什么颜色,那代码就如下:
var cur = ;
var bg = null;
for(var i=;i<=;i++){
for(var j=;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
var num = "div" + cur;
Div.id = num ;
Div.style.top = i* + 'px';
Div.style.left = j* + 'px';
Div.setAttribute('abc',i+''+j);//核心代码就是这里啦,给每一个div 自定义一个属性abc,将坐标赋值给它
cur++;
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
}
}
var oDiv = document.getElementsByTagName("div");
for(var i=;i
var val = oDiv[i].getAttribute('abc');//这里获取自定义属性的值
//用这个值来判断什么位置应该是什么颜色
switch(val%){
case :
bg="green";
break;
case :
bg="grey";
break;
case :
bg="orange";
break;
}
oDiv[i].style.backgroundColor= bg;
}
得到的效果就是这样的:
效果是不是棒棒哒,比上面的感觉还是舒服许多,所以,记住自定义属性的强大功能,它能做很多棒棒哒事情,有时间,专门讲讲自定义属性的牛X应用,哈哈!
工匠精神,我们再扩展一下,把上面的代码稍微整理一下,做一个简单的小封装,就变成了一个求阶乘的隔行变色的小应用,感觉瞬间变得:就这样 feel 倍爽!
function multiTable(m){
var cur = ;
var bg = null;
for(var i=;i<=m;i++){
for(var j=;j<=i;j++){
var sum = i*j;
var Div = document.createElement("div");
var num = "div" + cur;
Div.id = num ;
Div.style.top = i* + 'px';
Div.style.left = j* + 'px';
Div.setAttribute('abc',i+''+j);//核心代码就是这里啦,给每一个div 自定义一个属性abc,将坐标赋值给它
cur++;
Div.innerHTML = j+"*"+i+"="+sum;
document.body.appendChild(Div);
}
}
var oDiv = document.getElementsByTagName("div");
for(var i=;i
var val = oDiv[i].getAttribute('abc');//这里获取自定义属性的值
//用这个值来判断什么位置应该是什么颜色
switch(val%){
case :
bg="green";
break;
case :
bg="grey";
break;
case :
bg="orange";
break;
}
oDiv[i].style.backgroundColor= bg;
}
}
multiTable();
关于小编给大家介绍的JavaScript实现99乘法表及隔行变色实例代码就给大家介绍这么多,希望对大家有所帮助!
php编写九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码相关推荐
- php九九乘法表隔行换色,JavaScript实现99乘法表及隔行变色实例代码_javascript技巧...
项目需求:实现在页面中输出99乘法表.(要求:以每三行为一组,实现隔行变色(颜色为白,红,黄(也可自己定义)),鼠标滑过每一行,行背景颜色变为蓝色,鼠标离开又恢复原来的颜色),隔行变色的效果需要用if ...
- JS比较常用的隔行换色和获取焦点以及失去焦点效果
JS作为一门比较简单的编程 当然一些JS效果的使用是不可避免的 就比如说标签的隔行换色.还有搜索框的失去和获取焦点 我就来带大家写一下这两种常用的效果 先来说一下标签的隔行换色吧 目录 一.元素标签的 ...
- 【前端3】jquary:页面加载,选择器,隔行换色,Dom,全选,动画,遍历,广告/抽奖,表单校验插件
文章目录 1.jquery框架引入:$("mydiv") 当成id选择器 2.jquery版本/对象:$(js对象) -> jquery对象 3.jquery的页面加载事件: ...
- SSRS 2012 聚合函数 -- 隔行换色示例
SSRS 2012 聚合函数 -- 隔行换色示例 有时我们希望报表能够显示出数据笔数的流水序号,如果要使用T-SQL查询来做出这种效果,通常必须使用RANK函数以自动产生编号,在此将介绍如何使用SSR ...
- 在PHP当中制作隔行换色的效果以及制作上下翻页的效果!
首先说明隔行换色的效果,需要用到tr:nth_child(odd);或者括号里的值是even,odd是从第一行开始隔一行,even是从第二行开始: 具体代码如下图案所示: 1 <style> ...
- 骂骂咧咧的 fastreport 数据隔行换色
1, 我要吐槽的是, 这破玩意怎么现在还有人在用??? md, 找个文档要找老半天, 还没有, 社区也没有, 还得自己猜 2, 先看数据格式 2.1 数据格式 dataList, 就是我们的数据表, ...
- 前端简单入门第十八讲 使用jQuery实现表格的隔行换色
还记得之前我使用JavaScript来实现表格的隔行换色效果吗?如果读者初次翻阅本文,可记得看看前端简单入门第十二讲 使用JavaScript完成后台数据展示表格的隔行换色!现在我就来使用jQuery ...
- JQuery基础-》带有案例-隔行换色-全选-QQ表情-下拉框左右移动
JQuery基础 下面案例用到的资源包:https://download.csdn.net/download/weixin_44537122/11879014 1.内容 1. JQuery 基础:1. ...
- Web前端第四季(jQuery):四:301-jQuery基本过滤器(奇数和偶数)+302-实现隔行换色+401-祖先选择器和子代选择器
目录 一.目的 1.想:学习前端知识 2.想:记录笔记,下次不用看视频,直接看笔记就可以快速回忆. 二.参考 1.我自己代码的GitHub网址 2.SIKI学院:我参考此视频实操 3.w3school ...
最新文章
- 程序员到了35 岁就要被裁员?
- Unity 打包发布Android新手教学 (小白都能看懂的教学 ) [转]
- easyui-layout中的收缩层无法显示标题问题解决
- http://www.fastweb.cc
- Qt:Qt实现网页自动刷新工具
- 95-240-048-原理-State-StateBackend
- java分布式(java入门)
- javascirpt IP验证
- 如何使用powerdesigner导出sql脚本
- ESX的VSWITCH坏了,如何转移到新建的虚拟交换机上?
- 感知机(Perceptron)为什么不能表示异或(XOR)
- xmpp java_XMPP: Android基于Xmpp的即时通讯
- java实现时间轮定时器_基于侵入式链表的时间轮定时器实现
- ArcFace的原理以及代码的理解
- 计算机格式化命令符号,格式化c盘命令是什么 格式化c盘会怎么样【图文】
- 阿里云STMP实现邮件发送
- FPGA开发中sof和elf文件的合并与格式转换
- 计算机安全的最后一道防线,网络安全的第一道防线是(图文)
- ogre1.9环境搭建
- 迷幻的find函数用法
热门文章
- JSK-369 字符逆序【入门】
- UVA11752 The Super Powers【超级幂+暴力+数论】
- I00038 自守数(Automorphic number)
- TFRecord —— tensorflow 下的统一数据存储格式
- 目标识别(object detection)中的 IoU(Intersection over Union)
- word 软换行与硬换行
- 音频、视频等文件格式(.ts、.meta)及其认识
- gcc/g++ 参数总结
- MySQL 操作 —— group by(按组)
- latex 基本用法(三)