原生的JavaScript练习题1
1、马蜂窝首页轮播图，点击右侧小图切换大图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>马蜂窝小图切大图</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.navtop{
100%;
height: 80px;
border: 1px solid red;
}
.box{
100%;
height: 469px;
background: url("https://n4-q.mafengwo.net/s14/M00/5A/1A/wKgE2l0HPWyAZjbdAAh88uDW96A246.jpg?imageMogr2%2Finterlace%2F1") no-repeat;
}
.items{
auto;
float: right;
margin-right: 50px;
}
.items ul li{
list-style: none;
margin-top: 10px;
}
.items ul li img{
box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
}
</style>
</head>
<body>
<div class="navtop"></div>
<div class="box">
<div class="items">
<ul>
<li><img src="https://b3-q.mafengwo.net/s14/M00/59/F7/wKgE2l0HPWGANdPpAAOFydOQemM938.jpg?imageMogr2%2Fthumbnail%2F%21108x67r%2Fgravity%2FCenter%2Fcrop%2F%21108x67%2Fquality%2F90" alt="https://n4-q.mafengwo.net/s14/M00/5A/1A/wKgE2l0HPWyAZjbdAAh88uDW96A246.jpg?imageMogr2%2Finterlace%2F1" class="img1"></li>
<li><img src="https://b3-q.mafengwo.net/s14/M00/0D/42/wKgE2l0F9xqARmclAARH5okYze0213.jpg?imageMogr2%2Fthumbnail%2F%21108x67r%2Fgravity%2FCenter%2Fcrop%2F%21108x67%2Fquality%2F90" alt="https://p4-q.mafengwo.net/s14/M00/0D/55/wKgE2l0F9ySACWS7AAoBg9iDjMg958.jpg?imageMogr2%2Finterlace%2F1" class="img2"></li>
<li><img src="https://b2-q.mafengwo.net/s14/M00/B8/CE/wKgE2l0DuPeAb02GAAIzNXLecjo214.jpg?imageMogr2%2Fthumbnail%2F%21108x67r%2Fgravity%2FCenter%2Fcrop%2F%21108x67%2Fquality%2F90" alt="https://n3-q.mafengwo.net/s14/M00/B8/DC/wKgE2l0DuP2AHat-AASQQa6cZh8825.jpg?imageMogr2%2Finterlace%2F1" class="img3"></li>
<li><img src="https://p1-q.mafengwo.net/s14/M00/96/03/wKgE2l0ApbOANYknAAKfN3ZDPYk233.jpg?imageMogr2%2Fthumbnail%2F%21108x67r%2Fgravity%2FCenter%2Fcrop%2F%21108x67%2Fquality%2F90" alt="https://p2-q.mafengwo.net/s14/M00/96/1E/wKgE2l0Apb6ALPI7AAVoCZo1rO0261.jpg?imageMogr2%2Finterlace%2F1" class="img4"></li>
<li><img src="https://n3-q.mafengwo.net/s14/M00/A1/9E/wKgE2l0AqkaAcT95AAe4qI2trZ4696.jpg?imageMogr2%2Fthumbnail%2F%21108x67r%2Fgravity%2FCenter%2Fcrop%2F%21108x67%2Fquality%2F90" alt="https://b4-q.mafengwo.net/s14/M00/A1/B3/wKgE2l0Aqk2AOj23ABBx6Vg2SBw520.jpg?imageMogr2%2Finterlace%2F1" class="img5"></li>
</ul>
</div>
</div>
</body>
<script>
window.onload = function () {
var $imgs = document.querySelectorAll('li img');
const $box = document.querySelector('.box');
//鼠标点击
$imgs.forEach(value => value.onclick = function () {
// console.log(this.getAttribute("alt"));
// console.log($box);
$box.style.backgroundImage = "url(" + this.getAttribute("alt") + ")"; //原生的JS
// $(".box").css("background-image","url(" + this.getAttribute("alt") + ")") //使用jquery的css()
});
/*//鼠标onmouseover
$imgs.forEach(value => value.onmouseover = function () {
$box.style.backgroundImage = "url(" + this.getAttribute("alt") + ")"; //原生的JS
});*/
};
</script>
</html>
2、使用双重循环写乘法口诀表
源码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格+乘法口诀表</title>
<style>
table{
border-collapse: collapse;
}
th{
border: 1px solid black;
150px;
height: 40px;
text-align: center;
}
td{
border: 1px solid black;
150px;
height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div class="tableBox"></div>
</body>
<script>
window.onload = function () {
var $table = document.querySelector('.tableBox');
var $str = "<table>";
$str += "<tr><th>乘法口诀表9*9</th></tr>";
// console.log($createTable);
for(var i=1;i<=9;i++){
$str +="<tr>";
for(var j=1;j<=i;j++){
$str += "<td>"+ j + " X "+ i +" = "+ i*j +"</td>";
}
$str +="</tr>"
}
$str +="</table>";
console.log(typeof $str,$str);
$table.innerHTML = $str; //将字符串转为对应的html对象
};
</script>
</html>
3、使用循环完成水仙花数100-999 370=3*3*3+7*7*7+0*0*0
源码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用循环完成水仙花数100-999 370=3*3*3+7*7*7+0*0*0</title>
</head>
<body>
</body>
<script>
window.onload = function () {
for(var i = 100;i<=999;i++){
//分别求出数的个位 十位 百位
var a = i%10;
var b = parseInt(i/10)%10;
var c = parseInt(i/100)%10;
if(i === a**3+b**3+c**3){
console.log(i);
}
}
};
</script>
</html>
4、创造50个div,要求div是正方形,随机大小,随机在页面的任意位置(1400*720),随机颜色
效果：
源码示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创造50个div,要求div是正方形,随机大小,随机在页面的任意位置(1400*720),随机颜色</title>
<style>
.outer{
1400px;
height: 720px;
border: 2px solid darkred;
position: absolute;
}
.btnBox{
position: relative;
left: 10px;
top: 740px;
}
button{
200px;
height: 36px;
background: rgba(0,0,0,0.6);
color: white;
font-size: 20px;
text-align: center;
line-height: 30px;
border-radius: 6px;
margin: auto;
}
.random{
display: inline-block;
position: fixed;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="outer"></div>
<div class="btnBox">
<button class="createDiv">创建div</button>
<button class="pos_color">生成随机位置和颜色</button>
</div>
</body>
<script>
window.onload = function () {
const dire = 100;
const widthRate = 1400;
const heightRate = 720;
var $box = document.querySelector('.outer');
var $createDiv = document.querySelector('.createDiv');
var $pos_color = document.querySelector('.pos_color');
$createDiv.addEventListener('click',clickHandler);
$pos_color.addEventListener('click',clickHandler);
function clickHandler() {
switch (this) {
case $createDiv:
for(var i=0;i<50;i++){
$div = document.createElement('div');
$div.setAttribute('class','random');
$box.appendChild($div);
}
break;
case $pos_color:
$item = document.querySelectorAll('.random');
$item.forEach(function (value,index,array) {
$lw = parseInt(Math.random()*dire).toString();
value.style.width = $lw+"px";
value.style.height = $lw+"px";
$left = (parseInt(Math.random()*widthRate)).toString();
$top = (parseInt(Math.random()*heightRate)).toString();
value.style.left = $left + "px";
value.style.top = $top + "px";
value.style.backgroundColor = randomColor()
});
break;
}
}
function randomColor() {
//生成随机的颜色 #171717 #00FF00 表示rgb（r:0-255 十六进制写法用两位数可以表示，最大是FF，小于16的前面补0）
var colorStr = "#";
for(var i=0;i<3;i++){
cc = parseInt(Math.random()*256);
if(cc<15){
cc = "0"+cc.toString(16)
}else{
cc = cc.toString(16)
}
colorStr+=cc
}
return colorStr
}
};
</script>
</html>
补充：3种遍历方式
//遍历每一个多选框 有三种写法 // for(var i=0;i<4;i++){ // item = document.querySelector(".ck"+i); // item.checked = allCheck.checked // } // allItem.forEach(function (value,index,array) { // value.checked = allCheck.checked // }) allItem.forEach(key => key.checked = true)
五、自定制电子时钟
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定制电子时钟</title>
<style>
.outer{
position: relative;
margin: auto;
}
.outer div{
float: left;
200px;
height: 165px;
border: 1px solid red;
background: url("img/num.png");
overflow: hidden;
background-position-x: -200px ;
background-position-y: -170px ;
}
.outer span{
float: left;
font-size: 26px;
font-weight: 600;
text-align: center;
line-height: 165px;
}
</style>
</head>
<body>
<div class="outer">
<div id="hour1"></div>
<div id="hour2"></div><span>:</span>
<div id="minute1"></div>
<div id="minute2"></div><span>:</span>
<div id="second1"></div>
<div id="second2"></div>
</div>
</body>
<script>
var $hour1,$hour2,$minute1,$minute2,$second1,$second2;
// 0 1 2 3 4 5 6 7 8 9 的坐标位置
var pointArray = [
{x:820,y:170},
{x:0,y:0},
{x:205,y:0},
{x:410,y:0},
{x:615,y:0},
{x:820,y:0},
{x:0,y:170},
{x:205,y:170},
{x:410,y:170},
{x:615,y:170},
];
init();
function init() {
$hour1 = document.querySelector("#hour1");
$hour2 = document.querySelector("#hour2");
$minute1 = document.querySelector("#minute1");
$minute2 = document.querySelector("#minute2");
$second1 = document.querySelector("#second1");
$second2 = document.querySelector("#second2");
// 开启定时器
setInterval(animation,1000)
}
function animation() {
var date = new Date();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
/*console.log(typeof hour); //number 类型，要将其改为字符串类型
console.log(typeof getString(minute));
console.log(second);*/
setImg($hour1,getString(hour)[0]);
setImg($hour2,getString(hour)[1]);
setImg($minute1,getString(minute)[0]);
setImg($minute2,getString(minute)[1]);
setImg($second1,getString(second)[0]);
setImg($second2,getString(second)[1]);
}
function getString(num) {
return num<10? "0"+num:num.toString()
}
function setImg(ele,num) {
ele.style.backgroundPositionX = -pointArray[Number(num)].x+"px";
ele.style.backgroundPositionY = -pointArray[Number(num)].y+"px";
}
</script>
</html>
六、将时间显示为中文可读格式
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>中文时间</title>
</head>
<body>
<div class="outer">
<h1>Mon Jun 24 2019 19:43:16 ---> 二零一九年 六月 二十四日 星期一 十九时 四十三分 十六秒</h1>
<h2></h2>
</div>
</body>
<script>
var chr=["零","一","二","三","四","五","六","七","八","九"];
var weeks=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
init();
setInterval(init,1000);
function init() {
var date = new Date();
/*console.log(date);
console.log(date.getFullYear()); //年
console.log(date.getMonth()+1);//月 从（0-11），要在原基础上+1
console.log(date.getDate()); //日
console.log(date.getDay());//星期（0-6） 0表示星期日
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());*/
var year = date.getFullYear().toString();
var month = date.getMonth()+1;
var datee = date.getDate();
var day = date.getDay();
var hour = date.getHours();
var minute = date.getMinutes();
var second = date.getSeconds();
year = num2chr(year) + "年 ";
month = digits2(month) +"月 ";
datee = digits2(datee) +"日 ";
week = weeks[day]+ " ";
hour = digits2(hour) + "时 ";
minute = digits2(minute) + "分 ";
second = digits2(second) + "秒 ";
document.querySelector(".outer h2").innerHTML = year+month+datee+week+hour+minute+second;
}
//年份转化 如：2019 --->二零一九年
function num2chr(str) {
var _str = "";
for(var i=0;i<str.length;i++){
_str += chr[str[i]]
}
return _str
}
//数字转化 如：24 --->二十四
function digits2(num) {
if(num<10){
return chr[num]
}
var shiwei = parseInt(num/10);
var gewei = num%10;
return gewei?chr[shiwei]+"十"+chr[gewei]:chr[shiwei]+"十";
}
</script>
</html>
七、轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
*{
margin: 0;
padding: 0;
}
#rollImg{
1280px;
height: 426px;
margin: auto;
position: relative;
overflow: hidden;
}
#imgCon{
6400px;
height: 426px;
transition: all 1s;
font-size: 0; /*消除图片之间空格*/
position: absolute;
left: 0;
}
#imgCon img{
1280px;
height: 426px;
}
#leftBtn{
position: absolute;
top: 200px;
left: 0;
}
#rightBtn{
position: absolute;
top: 200px;
right: 0;
}
#dotControl{
list-style: none;
position: absolute;
left: 500px;
bottom: 10px;
}
#dotControl li{
16px;
height: 16px;
border: 2px solid red;
border-radius: 8px;
float: left;
margin-left: 10px;
background-color: rgba(255,0,0,0.5);
}
</style>
</head>
<body>
<div id="rollImg">
<div id="imgCon">
<img src="img/a.jpeg">
<img src="img/b.jpeg">
<img src="img/c.jpeg">
<img src="img/d.jpeg">
<img src="img/e.jpeg">
</div>
<ul id="dotControl">
<!-- 根据img个数动态生成小圆点-->
<!--<li></li>
<li></li>
<li></li>
<li></li>
<li></li>-->
</ul>
<img id="leftBtn" src="img/left.png">
<img id="rightBtn" src="img/right.png">
</div>
</body>
<script>
var $imgCon,leftbtn,rightbtn,$dotControl,liList;
var position = 0;
init();
function init() {
$imgCon = document.querySelector("#imgCon");
$dotControl = document.querySelector("#dotControl");
leftbtn = document.querySelector("#leftBtn");
rightbtn = document.querySelector("#rightBtn");
// 根据图片个数创建小圆点,并添加事件
imgs = $imgCon.querySelectorAll('img');
for(var i=0;i<imgs.length;i++){
node = document.createElement("li");
$dotControl.appendChild(node);
//给每个li节点添加点击事件
node.addEventListener('click',liClickHandler);
}
liList = document.querySelectorAll("#dotControl li");
liList[0].style.backgroundColor="blue";
//给前进后退按钮添加点击事件
leftBtn.addEventListener('click',clickHandler);
rightBtn.addEventListener('click',clickHandler);
}
function liClickHandler(e) {
position = Array.from(liList).indexOf(this);
imgConMove();
}
function clickHandler() {
if(this ===leftbtn){
position--;
if(position<0){position=4}
imgConMove();
return;
}
position++;
if(position>4){position=0}
imgConMove();
}
function imgConMove() {
$imgCon.style.left = -1280*position+"px";
console.log(liList[position]);
liList.forEach(function (item,index) {
if(index===position){
item.style.backgroundColor="blue";
}else{
item.style.backgroundColor="rgba(0,0,0,0)";
}
})
}
</script>
</html>
