当前位置： 首页 > news >正文

JS小模块练习

news 2024/11/27 0:58:26

使用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：12function 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.mapvar str = "小明:87; 小花:81; 小红:97; 小天:76;小张:74;小小:94;小西:90;小伍:76;小迪:64;小曼:76"; //要写字符串，不是数组，数组不能使用splitvar scor = str.split(';').map(itm => {  //str.split(';')返回的是一个数组，所以能用mapvar cc = itm.split(':');//str.split(';')是一个数组，里面的元素是字符串，所以能用splitreturn 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>


http://www.mrgr.cn/news/78137.html

相关文章：

  • 《用Python画蔡徐坤：艺术与编程的结合》
  • 《探索 C++：一门强大且多功能的编程语言》
  • ABAP 快速入门之 Hello World 和 ALV 列表
  • Android开发，使用TabLayout+ViewPager2实现校园健康安全宣传
  • 10、PyTorch autograd使用教程
  • 241125学习日志——[CSDIY] [ByteDance] 后端训练营 [15]
  • CSS笔记（一）炉石传说卡牌设计1
  • HTML详解（1）
  • 七、Kubernetes持久化存储-Volume-emptyDir-HostPath-NFS
  • PyTorch基础4
  • C语言-数学基础问题
  • 【Java】二叉树：数据海洋中灯塔式结构探秘（上）
  • Oracle 数据库 IDENTITY 列
  • ArcGIS应用指南：ArcGIS制作局部放大地图
  • PostGres命令【常用维护，增删改查】
  • 五种创建k8s的configMap的方式及configmap使用
  • JavaScript核心语法（1）
  • oneplus6线刷、trwp、magisk(apatch)、LSPosed、Shamiko、Hide My Applist
  • 卷积神经网络学习记录
  • WPF中如何让Textbox显示为一条直线
  • Selenium 包介绍
  • 高标准农田智慧农业系统建设方案
  • React-useEffect的使用
  • 免费实用在线AI工具集合 - 加菲工具
  • 加菲工具 - 好用免费的在线工具集合
  • 【Python】分割秘籍！掌握split()方法，让你的字符串处理轻松无敌！