JavaScript练习---[JS动态切换图片效果；JS完成简易计算器, 下拉框切换头像, JS 制作简易文本编辑器]
Posted 小智RE0
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript练习---[JS动态切换图片效果；JS完成简易计算器, 下拉框切换头像, JS 制作简易文本编辑器]相关的知识，希望对你有一定的参考价值。
ML
1.在页面上输出格式如：2016年07月19日 12时23分34秒 星期二 的格式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!-- 1. 在页面上输出格式如：2016年07月19日 12时23分34秒 星期二 的格式 -->
<title>练习 1</title>
<script type="text/javascript">
function toTime(){
//获取到div的对象;
var divObj=document.getElementById("outDiv");
//将当前的年月日,时分秒获取到;
var year=new Date().getFullYear();
//注意月份是 0-11;
var month=new Date().getMonth()+1;
var date=new Date().getDate();
var hour=new Date().getHours();
var minute=new Date().getMinutes();
var seconds=new Date().getSeconds();
//对于星期;由于 getDay() 返回一周中的某一天 输出为数字(0 ~ 6);
var day=new Date().getDay();
//可用数组安排;0~6对应周天到周六;
var array=["星期天","星期一","星期二","星期三","星期四","星期五","星期六"];
var week=array[day];
divObj.innerHTML=year+"年"+month+"月"+date+"日 "+hour+ "时" +minute+ "分"+seconds+"秒 "+week;
}
</script>
</head>
<body onload="toTime()">
<!-- 让文字在div中显示 -->
<div id="outDiv" style="width: 1532px; height: 300px; background-color: chartreuse;font-size: 30px; font-weight: bold; text-align: center;">
</div>
</body>
</html>
效果
2. 在页面创建一个按钮名称为“摇奖”每点击一次在页面显示出三个0-9之间的随机数。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 2. 在页面创建一个按钮名称为“摇奖”每点击一次在页面显示出三个0-9之间的随机数。 -->
<title>练习 2</title>
<style type="text/css">
/* 去除浏览器样式 */
*{
margin: 0px;
padding: 0px;
}
#box{
width: 1200px;
margin: 20px auto;
text-align: center;
font-size: 40px;
}
#btnbox{
margin: auto 400px;
}
/* 将按钮的格式调整 */
#btn{
width: 300px;
height: 50px;
}
#divbox_firstNum,#divbox_secondNum,#divbox_thirdNum{
width:200px;
height: 200px;
background-color: bisque;
/* 让三个div产生间隔; */
margin-right: 50px;
/* 开启浮动 */
float: left;
text-align: center;
font-size: 40px;
font-weight: bold;
line-height: 200px;
}
</style>
<!-- 编写点击事件触发的函数 -->
<script type="text/javascript">
function getNum(){
/* 获取放置div的对象 */
var firstNum=document.getElementById("divbox_firstNum");
var secondNum=document.getElementById("divbox_secondNum");
var thridNum=document.getElementById("divbox_thirdNum");
firstNum.innerHTML =parseInt(Math.random()*10);
secondNum.innerHTML=parseInt(Math.random()*10);
thridNum.innerHTML =parseInt(Math.random()*10);
}
</script>
</head>
<body>
<div id="box">
<!-- 用三个div放置随机数字 -->
<div id="divbox_firstNum"></div>
<div id="divbox_secondNum"></div>
<div id="divbox_thirdNum"></div>
<!-- 关闭浮动 -->
<div style="clear: left;"></div>
</div>
<!-- 按钮,点击事件 -->
<div id="btnbox">
<input id="btn" type="button" value="点击抽奖" onclick="getNum()">
</div>
</body>
</html>
效果
3.创建两个按钮分别为“显示”“隐藏”，使用两个按钮对一个标签进行隐藏，显示操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 3.创建两个按钮分别为“显示”“隐藏”，使用两个按钮对一个标签进行隐藏，显示操作。 -->
<title></title>
<style type="text/css">
#btn_xs,#btn_yc{
width: 200px;
height: 100px;
background-color: bisque;
margin: 20px;
}
#text{
width: 200px;
height: 100px;
background-color: white;
}
</style>
<script type="text/javascript">
//获取被操作标签的对象;
function test(a){
var textObj=document.getElementById("text");
textObj.style.display=a;
}
</script>
</head>
<body>
<input type="button" id="btn_xs" value="显示" onclick="test('inline-block')"/>
<input type="button" id="btn_yc" value="隐藏" onclick="test('none')"/>
<br/>
<input type="text" id="text" placeholder="被操作标签"/>
</body>
</html>
效果
4.完成图片切换功能,当鼠标移入到图片上时,在图片左右两侧各显示一个按钮,点击按钮对图片进行切换,到达第一张或最后一张时分别又回到最后一张或第一张,重复操作。
其中的 console.log() 只是为了点击时查看效果比较明显
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 完成图片切换功能,当鼠标移入到图片上时,在图片左右两侧各显示一个按钮,
点击按钮对图片进行切换,到达第一张或最后一张时分别又回到最后一张或第一张,重复操作-->
<title></title>
<style type="text/css">
*{
padding: 0px;
margin: 0px;
}
/* 将图片默认变为块级标签 */
img{
display: block;
}
#outbox{
width: 520px;
height: 280px;
margin: auto;
/* 开启相对定位 */
position: relative;
}
#imgBox{
}
#left_btn,#right_btn{
width: 40px;
height:40px;
/* 绝对定位 */
position: absolute;
/* 默认透明度为0 */
opacity: 0;
}
#left_btn{
left: 0px;
top: 120px;
}
#right_btn{
right: 0px;
top: 120px;
}
</style>
<script type="text/javascript">
/* 当鼠标移入图片时,触发显示按钮,移出时,隐藏按钮 */
function testBtn(a){
var left_btnObj=document.getElementById("left_btn");
var right_btnObj=document.getElementById("right_btn");
left_btnObj.style.opacity=a;
right_btnObj.style.opacity=a;
}
/* 将当前图片的索引位置作为标记; */
var num=0;
console.log("注意是用num作为当前图片的索引位置==>从零开始吧")
function movePicture(a){
/* 将图片存入数组 */
var array=["<img src='img/img1/1.jpg'>","<img src='img/img1/2.jpg'>","<img src='img/img1/3.jpg'>",
"<img src='img/img1/4.jpg'>","<img src='img/img1/5.jpg'>"];
console.log("==============================注意设置图片的索引为num======>"+num);
/* 先获取图片的盒子对象*/
var imgObj =document.getElementById("imgBox");
if(a=='left'){
for (i = array.length; i >0 ; i--) {
/* 在点击上一张图片时,首先让索引num回到上一位,然后在进行赋值 */
num--;
imgObj.innerHTML=array[num];
console.log("点击上一张图片,此时的索引==num==>"+num);
break;
}
/* 图片抵达第一张,赋值回到最后一张;*/
if(num<0){
num=4;
imgObj.innerHTML=array[4];
console.log("图片抵达第一张了,再点赋值回到最后一张;此时的索引==num==>"+num)
}
}
/* 点击下一张时触发 */
else if(a=='right'){
for (i = 0; i < array.length; i++) {
imgObj.innerHTML=array[num+1];
num++;
console.log("点击下一张图片,此时的索引==num==>"+num);
break;
}
if(num>4){
/* 当图片到达最后一张时,将num清空为0*/
num=0;
imgObj.innerHTML=array[0];
console.log("图片到达最后一张时;再点就返回第一张,此时的索引==num==>"+num);
}
}
}
</script>
</head>
<body>
<div id="outbox" onmouseover="testBtn(1)" onmouseout="testBtn(0)">
<div id="imgBox"><img src="img/img1/1.jpg"></div>
<input id="left_btn" value="上" type="button" onclick="movePicture('left')"/>
<input id="right_btn" value="下" type="button" onclick="movePicture('right')"/>
</div>
</body>
</html>
效果:
5.完成简单的计算器
计算器仅具有基本的单次加减乘除;且运算一次后,就必须清空显示框;
具有除数为0时的提示功能;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 完成简单的计算器 -->
<title></title>
<style type="text/css">
/* 清除浏览器默认样式 */
*{
margin: 0px;
padding: 0px;
}
/* 包裹计算器的盒子 */
#calculator_box{
width: 600px;
height: 550px;
background-color: antiquewhite;
margin: auto;
}
/* 包裹输入框的盒子 */
#calculator_box_inputbox{
width: 500px;
height: 50px;
margin: auto;
background-color: aliceblue;
}
/* 输入框 */
#calculator_box_inputbox_text{
width: 500px;
height: 50px;
text-align: left;
font-size: 30px;
border-style: none;
}
/* 包含所有按钮的盒子 */
#calculator_box_btnbox{
width: 600px;
height: 500px;
background-color: darkgray;
margin: auto;
}
/* 所有的按钮 */
.btn{
width:120px;
height: 100px;
background-color: bisque;
margin: 10px;
border-radius: 45px;
font-size: 40px;
font-weight: bold;
}
</style>
<!-- 使用JS实现基础功能 -->
<script typejs练习----图片轮播切换