JavaScript判断奇偶数

效果预览：

html部分：

<input type="button" value="生成一张图片"/>
<input type="button" value="奇数"/>
<input type="button" value="偶数"/>
<input type="button" value="奇数竖排"/>
<input type="button" value="偶数竖排"/>
<input type="button" value="奇数横排"/>
<input type="button" value="偶数横排"/>
<div id="box"></div>

css部分：

    <style>#box{width: 1000px;margin-top: 50px}#box img{width: 100px;height: 100px;display: inline-block;border: 10px solid #ffffff;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;transition: .7s;}/**/img:hover{transform: scale(1.5);}

JavaScript部分：

 window.onload = function () {var aBtn = document.getElementsByTagName('input');var oBox = document.getElementById('box');var aImg = oBox.getElementsByTagName('img');var arr = ['img/头像1.jpg','img/头像2.jpg','img/头像3.jpg','img/头像4.png','img/头像5.jpg','img/头像6.png'];var num = 0;var str = '';//初始化，向box里添加20个imgfor (var i=0;i<20;i++) {str += '<img src="' + arr[i%arr.length] + '"alt="头像"/>';}oBox.innerHTML = str;//点击按钮 添加图片aBtn[0].onclick = function () {str += '<img src="' + arr[aImg.length % arr.length] + '"alt="头像"/>';oBox.innerHTML = str;}//奇数边框变化aBtn[1].onclick = function () {for (var i=0;i<aImg.length;i++){aImg[i].style.border = '10px solid white';aImg[i].style.borderRadius = '50%';if ( Math.ceil(i%2) == 0 ) {aImg[i].style.border = '10px solid blue';aImg[i].style.borderRadius = 0;aImg[i]}}}//偶数边框变化aBtn[2].onclick = function () {for (var i=0;i<aImg.length;i++){aImg[i].style.border = '10px solid white';aImg[i].style.borderRadius = '50%';if ( Math.ceil(i%2) == 1 ) {aImg[i].style.border = '10px solid blue';aImg[i].style.borderRadius = 0;}}}//奇数竖排边框变化aBtn[3].onclick = function () {for (var i=0;i<aImg.length;i++){aImg[i].style.border = '10px solid white';aImg[i].style.borderRadius = '50%';if ( Math.ceil( (i%8)  %2 ) == 0 ) {aImg[i].style.border = '10px solid blue';aImg[i].style.borderRadius = 0;}}}//奇数竖排边框变化aBtn[4].onclick = function () {for (var i=0;i<aImg.length;i++){aImg[i].style.border = '10px solid white';aImg[i].style.borderRadius = '50%';if ( Math.ceil( (i%8)  %2 ) == 1 ) {aImg[i].style.border = '10px solid blue';aImg[i].style.borderRadius = 0;}}}//奇数横排边框变化aBtn[5].onclick = function () {for (var i=0;i<aImg.length;i++){aImg[i].style.border = '10px solid white';aImg[i].style.borderRadius = '50%';if ( Math.ceil( (Math.floor(i/8))  %2 ) == 0 ) {aImg[i].style.border = '10px solid blue';aImg[i].style.borderRadius = 0;}}}//偶数横排边框变化aBtn[6].onclick = function () {for (var i=0;i<aImg.length;i++){aImg[i].style.border = '10px solid white';aImg[i].style.borderRadius = '50%';if ( Math.ceil( (Math.floor(i/8))  %2 ) == 1 ) {aImg[i].style.border = '10px solid blue';aImg[i].style.borderRadius = 0;}}}//(Math.floor(i/8)) -- 判断横排// i%8　－－判断竖排//判断奇偶函数
//          function odeVity (number) {
//              if ( Math.ceil(number%2) == 0 ) {
//                  aImg[number].style.border
//                  alert('这是个奇数');
//              }else{'这是各偶数'}
//          }}

JavaScript判断奇偶数相关推荐

1119: 零起点学算法26——判断奇偶数
1119: 零起点学算法26--判断奇偶数 Time Limit: 1 Sec Memory Limit: 64 MB 64bit IO Format: %lld Submitted: 2419 ...
【电子学会】2019年12月图形化三级 -- 判断奇偶数
判断奇偶数 1. 准备工作 (1)导入角色Cat Flying.Apple.Bananas: (2)保留白色背景. 2. 功能实现 (1)点击绿旗,Cat Flying询问"请输入一个正整数 ...
linux c判断奇偶数据,c语言怎么判断奇偶数
c语言怎么判断奇偶数? 第一步:首先先打开我们的DEV C++软件,然后点击"新建源代码". 推荐:<C语言教程> 第二步:在我们的编辑页面输入以下代码:#includ ...
【青少年编程】【三级】判断奇偶数
「青少年编程竞赛交流群」已成立(适合6至18周岁的青少年),公众号后台回复[Scratch]或[Python],即可进入.如果加入了之前的社群不需要重复加入. 微信后台回复"资料下载&quo ...
python奇数和_请问python如何判断奇偶数？
odd 代表奇数, even 代表偶数, 下面代码全部使用is_odd, 判断输入的值是不是奇数, 是奇数返回True, 否则返回False 最常用的办法就是直接取模判断: def is_odd(n) ...
位运算判断奇偶数_位运算判断奇偶数
第一条:利用位运算判断一个整数是奇数还是偶数. 经常用到一个for循环,当索引i是奇数时执行语句A,偶数时执行语句B.判断i是奇数还是偶数,可用如下方法: if(i &1){ //i是奇数情况 ...
c++基础题：判断奇偶数
题目描述输入一个整数,判断是奇数还是偶数输入输入1个正整数输出如果是偶数,输出even否则输出odd 样例输入 Copy 2 样例输出 Copy even 下面是代码 //创作者:小小阁楼 ...
SQL语句判断奇偶数
题目来自:牛客SQL篇. 题目描述:有一个员工表employees简况如下: 请你查找employees表所有emp_no为奇数,且last_name不为Mary的员工信息,并按照hire_date逆 ...
Python判断奇偶数
请用程序实现: 输入一个整数,判断它是奇数还是偶数.如果是奇数,输出odd:如果是偶数,输出even. num=int(input("Please input a number: " ...

JavaScript判断奇偶数

JavaScript判断奇偶数相关推荐

最新文章

热门文章