JS小模块练习
使用JS实现建简易计算器：
效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>YMY</title>
<script>
function count() {
var num1 = document.getElementById("txt1").value;
var num2 = document.getElementById("txt2").value;
var fuhao = document.getElementById("select").value;
switch (fuhao) {
case '+': res = Number(num1) + Number(num2); break;
case '-': res = num1 - num2; break;
case '*': res = num1 * num2; break;
case '/': res = num1 / num2; break;
}
document.getElementById("result").value = res;
}
</script>
</head>
<body>
<input type='text' id='txt1' />
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' onclick="count()" />
<input type='text' id='result' value="" />
</body>
</html>通过getElementById获取id为con的h2标签，并且实现修改标签样式。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
background-color: pink;
}
</style>
</head>
<body>
<p id="con">hdo</p>
<script>
var mess = document.getElementById("con");
mess.style.backgroundColor = 'purple';
mess.style.display = 'none';
</script>
</body>
</html>请编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数，点击相应按钮执行相应操作，点击"取消设置"按钮后，提示是否取消设置，如是执行操作，否则不做操作。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<title>javascript</title>
<style type="text/css">
.quxiao-class {
width: 100px;
height: 100px;
color: black;
background-color: gray;
}
</style>
</head>
<body>
<h2 id="con" class="quxiao-class">yan</h2>
<form>
<!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
<input type="button" value="改变颜色" onclick="colormodify()">
<input type="button" value="改变宽高" onclick="widthmodify()">
<input type="button" value="隐藏内容" onclick="textyincang()">
<input type="button" value="显示内容" onclick="textxianshi()">
<input type="button" value="取消设置" onclick="quxiao()">
</form>
<script type="text/javascript">
//定义"改变颜色"的函数
var mess = document.getElementById("con");
function colormodify() {
mess.style.color = 'pink';
}
function widthmodify() {
mess.style.width = '400px';
mess.style.height = '400px';
}
function textyincang() {
mess.style.display = 'none';
}
function textxianshi() {
mess.style.display = 'block';
}
function quxiao() {
mess.className = "quxiao-class";
}
//定义"改变宽高"的函数
//定义"隐藏内容"的函数
//定义"显示内容"的函数
//定义"取消设置"的函数
</script>
</body>
</html>设置一个广告（用图片代替），5秒后广告消失(函数：setTimeout)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.guang {
width: 100px;
height: 100px;
/* background-color: pink; */
}
</style>
</head>
<body>
<script>
function xiaoshi() {
var i = document.getElementById("con");
i.style.display = 'none';
}
setTimeout(xiaoshi, 2000);
</script>
<div id="con" class="guang">
<img src="images/luomeilan.jpg" alt="">
</div>
</body>
</html>点击百度按钮，跳转到百度界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button id="butt">百度</button>
<script>
var hh = document.getElementById("butt");
hh.addEventListener('click', function () {
window.location.href = 'https://www.baidu.com';
})
</script>
</body>
</html>封装自己的数学对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//利用对象封装自己的数学对象 含有PI、最大值、最小值
var mymath = {
PI: 3.1415926,
max: function () {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
},
min: function () {
var min = arguments[0];
for (var i = 0; i < arguments.length; i++) {
if (min > arguments[i]); {
min = arguments[i];
}
}
return min;
}
}
console.log(mymath.max(1, 5, 5, 8, 19, 3));
console.log(mymath.max(8, 8, 5, 3, 18));
console.log(mymath.PI);
</script>
</body>
</html>随机数，得到任意两个整数之间的随机数，实现点名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// console.log(Math.max(1, 5, 5, 8, 19, 3));
// console.log(Math.max(8, 8, 5, 3, 18));
// 随机取1-10之间的整数
console.log(Math.ceil(10 * Math.random()));
// 得到两个数之间的随机整数，并包含这两个数
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(8, 12));
// 随机点名
var arr = ['A', 'B', 'C', 'D', 'E'];
console.log(arr[getRandom(0, arr.length - 1)]);
</script>
</body>
</html>冒泡排序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>yan</title>
</head>
<body>
<script>
// 1.编写函数，实现数组内所有数字求和
function sumArray(array) {
var result = 0;
for (var i = 0; i < array.length; i++) {
result = result + array[i];
}
if (result < 0 || result > 10000) {
return 0;
}
return result;
};
//输出结果
console.log(sumArray([-19, 30]));
console.log(sumArray([12, 1, 6, -33]));
console.log(sumArray([19, 8, 100, 200]));
console.log(sumArray([90, 10, 80, 20, 10000]));
//2.实现数组升序排序，且返回数组不超过100个元素(冒泡排序)
function sortArray(array) {
if (array.length > 100) {
var str = '请输入一个不超过100个元素的数组';
return str;
}
for (var i = 0; i < array.length - 1; i++) {
for (var j = 0; j < array.length - i - 1; j++) {
if (array[j] > array[j + 1]) {
var temp = array[j + 1];
array[j + 1] = array[j];
array[j] = temp;
}
}
}
return array;
};
//输出结果
console.log(sortArray([1, 23, 12, 5]));
console.log(sortArray([89, 8, 92, 2, 5]));
console.log(sortArray([13, 24, 6, 19, 2, 6]));
console.log(sortArray(new Array(101).fill(1)));
</script>
</body>
</html>输出今天的日期，形式为：今天是2024年的11月5日，星期一 ,22时53分钟10秒
返回 09：02：12；时间戳
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 今天是2024年的11月5日，星期一 ,22时53分钟10秒
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth() + 1;
var dates = today.getDate();
var day = today.getDay();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();
console.log('今天是' + year + '年的' + month + '月' + dates + '日，' + arr[day] + '，' + hour + '时' + minute + '分' + second + '秒');
//封装函数，返回当前的时分秒，格式为 09：02：12
function getTimer() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s
}
console.log(getTimer());
//时间戳:距离1970.1.1的总毫秒数
console.log(Date.now());
// 在当前时间的基础上，推迟两个小时，并显示
var today = new Date();
document.write("现在时间：" + today + "<br>");
// document.write(today.getTime() + '<br>');//当前时间的毫秒数
today.setTime(today.getTime() + 2 * 60 * 60 * 1000);
document.write("推迟两个小时：" + today);
// 倒计时
function countDown(time) {
var nowTime = +new Date();//当前时间的时间戳
var inputTime = +new Date(time);//活动时间的时间戳
var times = (inputTime - nowTime) / 1000; //剩余时间的秒数
var d = parseInt(times / 60 / 60 / 24);//天
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24);//时
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60);//分
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60);//秒
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown("2024-11-27 10:00:00"));//输入活动的时间
</script>
</body>
</html>创建数组：
<script type="text/javascript">
// 创建数组
var arr1 = new Array();//空数组
var arr2 = new Array(5);//元素个数为5的空数组
var arr3 = new Array('y', 'p');
var arr4 = ['y', 'p'];
console.log(arr1);
console.log(arr2);
console.log(arr3);
console.log(arr4);
</script>根据系统的时间设置不同的问候语和图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
margin-top: 20px;
width: 200px;
height: 150px;
background-color: pink;
text-align: center;
line-height: 150px;
}
img {
margin-top: 20px;
width: 300px;
height: 180px;
}
</style>
</head>
<body>
<!-- 根据系统的时间设置不同的问候语和图片 -->
<div>
</div>
<img src="images/flower.jpg" alt="">
<script type="text/javascript">
var div = document.querySelector('div');
var img = document.querySelector('img');
var now = new Date();
var h = now.getHours();
console.log(h);
if (h < 12) {
div.innerText = '上午好！';
img.src = 'images/luomeilan.jpg';
}
else if (h < 18) {
div.innerText = '下午好！';
img.src = 'images/flower.jpg';
}
else {
div.innerText = '晚上好！';
img.src = 'images/flower.jpg';
}
</script>
</body>
</html>字符串：string.split函数练习：要求页面显示：XXXX年XX月X日 星期X--班级总分为:×。所给数据："小明:87; 小花:81; 小红:97; 小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76"。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div></div>
<script>
// 字符串string.split;数组array.map
var str = "小明:87; 小花:81; 小红:97; 小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76"; //要写字符串，不是数组，数组不能使用split
var scor = str.split(';').map(itm => { //str.split(';')返回的是一个数组，所以能用map
var cc = itm.split(':');//str.split(';')是一个数组，里面的元素是字符串，所以能用split
return parseInt(cc[1]);
})
var sum = 0;
for (var i = 0; i < scor.length; i++) {
sum = sum + scor[i];
}
function gettoday() {
var today = new Date();
var y = today.getFullYear();
var m = today.getMonth();
var d = today.getDate();
var x = today.getDay();
var weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
return y + '年' + m + '月' + d + '日' + ' 星期' + x;
}
var div = document.querySelector('div');
div.innerHTML = gettoday() + '<br>' + '总分为：' + sum;
</script>
</body>
</html>背景为黑色，特效是绿色的雨滴，实现效果：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rain Effect</title>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
}
.rain-drop {
position: absolute;
width: 3px;
height: 8px;
background-color: green;
animation: rainFall 1s linear infinite;
}
@keyframes rainFall {
0% {
transform: translateY(-10px);
}
100% {
transform: translateY(1000px);
}
}
</style>
</head>
<body>
</body>
<script>
function createRain() {
const rain = document.createElement('div');
rain.classList.add('rain-drop');
rain.style.left = Math.random() * window.innerWidth + 'px';
rain.style.animationDuration = Math.random() * 2 + 1 + 's';
document.body.appendChild(rain);
setTimeout(() => {
rain.remove();
}, 2000);
}
setInterval(createRain, 50);
</script>
</html>createElement
//创建新元素
var body = document.body;
var input = document.createElement("input");
input.type = "button";
input.value = "按钮";
input.className = 'jj';
body.appendChild(input); className
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
color: black;
width: 100px;
height: 100px;
background-color: pink;
}
.two {
width: 200px;
height: 200px;
background-color: gray;
}
</style>
</head>
<body>
<div id='gg' class="one">
hhh
</div>
<script>
var div = document.getElementById('gg');
div.style.color = 'purple'; //修改单个样式
div.onclick = function () {//修改多个样式
div.className = 'two';
}
</script>
</body>
</html>getElementById、innerText、innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: pink;
}
.one {
background-color: purple;
}
</style>
</head>
<body>
<div id="iii">
hhhh
<span>iiii</span>
</div>
<script>
var div = document.getElementById('iii');
div.onclick = function () {
div.className = 'one';
}
//将Id为iii的内容文本提取出来(不提标签)
// var text = div.innerText;
// console.log(text);
//将内容传到Id为iii中
// div.innerText = 'jjj';
//提标签
// var text_html = div.innerHTML;
// console.log(text_html);
// div.innerHTML = 'hhh <span>uu<span>'
</script>
</body>
</html>子父节点的获取：parentNode、childNodes、children
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 100px;
height: 100px;
background-color: pink;
}
.two {
background-color: purple;
}
</style>
</head>
<body>
<div id=yeye>
<div id="dad" class="one">
hhhh
<span class="two">iiii</span>
</div>
</div>
<script>
var node_dad = document.getElementById('dad');
console.log(node_dad.parentNode);//div id yeye
console.log(node_dad.childNodes);//[text,span.two,text]
console.log(node_dad.children);//[span.two]
</script>
</body>
</html>取出第一个和最后一个子元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>hhh1</li>
<li>hhh2</li>
<li>hhh3</li>
<li>hhh4</li>
<li>hhh5</li>
</ul>
<script>
var node_dad = document.querySelector('ul');
console.log(node_dad.childNodes);//5个text 5个li
console.log(node_dad.children);//5个li
//第一个子节点，不管是文本节点还是元素节点
console.log(node_dad.firstChild);//text
console.log(node_dad.lastChild);//text
//第一个子节点，元素节点
console.log(node_dad.firstElementChild);//hh1
console.log(node_dad.lastElementChild);//hhh5
//实际开发写法，没有兼容性问题，返回第一个子元素
console.log(node_dad.children[0]);
console.log(node_dad.children[node_dad.children.length - 1]);
</script>
</body>
</html>