这一节课学习了JavaScript的基础入门知识。
1、获取变量:var =
2、获取要被替换的对象:
var 元素 = document.getElementById('元素id值')
3、替换对象:
替换的对象 = 获取到的变量
innerHTML表示在元素中的东西
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2.实战明星相册</title> <style type="text/css"> .box { width:500px; height:700px; background-color:#efefef; border:1px solid lightgray; margin:20px auto; text-align:center; color:#636363; box-shadow:2px 2px 2px #999; } .box ul{ margin: 0; padding:0; overflow:hidden; } .box ul li { list-style: none; float:left; background-color: skyblue; margin-left:20px; } .box ul li a { display:block; width:100px; height:40px; line-height:40px; color:white; text-decoration-line: none; } .box ul li a:hover { font-size: 1.2em; background-color:coral; } .box .pic { width:450px; height:470px; border:1px solid lightgray; line-height:1px; margin:auto; margin-top:50px; } .box .pic img { width:100%; height:100%; } </style> </head> <body> <!-- 知识点: 1、js代码写在哪 2、如何调用? 3、函数的用法 --> <div class="box"> <h2>明星相册</h2> <ul> <li> <a href="../images/zly.jpg" title="《楚乔传》,《花千骨》,《陆贞传奇》..." onclick="changePic(this); return false">赵丽颖</a> </li> <li> <a href="../images/gyy.jpg" title="《倚天屠龙记》,《咱们结婚吧》,《爱无悔》..." onclick="changePic(this); return false">高圆圆</a> </li> <li> <a href="../images/sl.jpg" title="《那年花开月正圆》,《甄嬛传》,《玉观音》..." onclick="changePic(this); return false">孙俪</a> </li> <li> <a href="../images/fbb.jpg" title="《还珠格格》,《武媚娘传奇》,《我不是潘金莲》..." onclick="changePic(this); return false">范冰冰</a> </li> </ul> <div class="pic"> <img src="../images/zwt.png" alt="" id="img"> </div> <p id="info"></p> </div> <script type="text/javascript"> function changePic(pic){ //1.获取一个明星的图片与简介 var picUrl = pic.href var picInfo = pic.title var picName = pic.innerHTML //2.获取到页面中要被替换的对象 var img = document.getElementById('img') var p = document.getElementById('info') //3.将对应的占位符对象进行替换 img.src = picUrl // p.innerHTML = picName +':'+ picInfo p.innerHTML = '<span style="color:coral;">' + picName +':'+ picInfo +'</span>' } </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
迷你计算器:
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>3.迷你计算器</title> <style type="text/css"> .box { width:500px; height:200px; background-color:#efefef; border:1px solid lightgray; margin:20px auto; text-align:center; color:#636363; box-shadow:2px 2px 2px #999; } table { margin: auto; /*border: 1px solid red;*/ } td{ /*border:1px solid blue;*/ width: 100px; height: 30px; padding: 5px 10px; } input, select { width: 100%; height: 30px; border: none; text-align: center; } button { width: 100%; height: 100%; border:none; background-color:skyblue; color:white; } button:hover{ background-color:coral; width: 105%; height:105%; cursor: pointer; } </style> </head> <body> <!-- 知识点:1、获取页面元素的方法;2、条件判断语句;3、条件函数的用法 --> <div class="box"> <h2>迷你计算器</h2> <form> <table> <tr> <td><input type="text" name="opt1" placeholder="操作数1"></td> <td> <select name="option"> <option value="null">请选择操作</option> <option value="add"> + </option> <option value="sub"> - </option> <option value="mul"> * </option> <option value="div"> / </option> </select> </td> <td><input type="text" name="opt2" placeholder="操作数2"></td> <td><button type="button">计算</button></td> </tr> <tr> <td colspan="2" align="right"><h3>结果</h3></td> <td colspan="2" align="left"><h3 id="placeholder"></h3></td> </tr> </table> </form> </div> <script type="text/javascript"> //1.获取操作数,按钮,结果占位符 var opt1 = document.getElementsByName('opt1')[0] var opt2 = document.getElementsByName('opt2')[0] var opt = document.getElementsByName('option')[0] var btn = document.getElementsByTagName('button')[0] var placeholder = document.getElementById('placeholder') //2.给按钮添加事件,执行计算 btn.onclick = function() { if (opt1.value.length == 0) { alert('第一个操作数不能为空') opt1.focus() return false } else if (isNaN(opt2.value)) { alert('非法数据:第二个操作数必须为数字') } else if (opt2.value.length == 0) { alert('第二个操作数不能为空') opt2.focus() return false } else if (isNaN(opt2.value)) { alert('非法数据:第二个操作数必须为数字') } else { var data1 = parseFloat(opt1.value) var data2 = parseFloat(opt2.value) } var option = opt.value var temp = 0 var flag = '' switch (option) { case 'null': alert('请选择操作符') opt.focus() return false case 'add': flag = '+' temp = data1 + data2 break case 'sub': flag = '-' temp = data1 - data2 break case 'mul': flag = '*' temp = data1 * data2 break case 'div': flag = '/' if (data2 == 0) { alert('除数不能为0') return false } else { temp = data1 / data2 } break } // placeholder.innerHTML ='<span style="color:coral;">'+ data1 + ' ' + flag + ' ' + data2 + '=' +temp + '</span>' var str = '<span style="color:coral;">' str += data1 + ' ' + flag + ' ' + data2 + '=' +temp str += '</span>' placeholder.innerHTML = str } </script> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例