js基础之应用

V。on

已于 2023-04-13 10:40:14 修改

阅读量228

点赞数

分类专栏： js基础文章标签： js

于 2021-07-27 17:38:48 首次发布

本文链接：https://blog.csdn.net/qq_40864647/article/details/119147695

版权

js基础专栏收录该内容

24 篇文章 1 订阅

订阅专栏

js基础之应用

本篇文章呢，就应用js基础写一些小案例来体验一下js的乐趣~

一、抽奖程序

随机抽取str中的某个名字：

<body>
	<p>中午谁请吃饭？</p>
	<h1></h1>
	<button>抽奖</button>
	<script>
		var h1 = document.getElementsByTagName("h1")[0]
		var btn = document.getElementsByTagName("button")[0]
		var str = "唐三,小舞,荣荣,萧炎"
		btn.onclick = function() {
			var arr = str.split(",")
			// 0 - length - 1随机数
			var index = Math.floor(Math.random() * (arr.length))
			h1.innerHTML = arr[index]
		}
	</script>
</body>

二、验证码

//0-9  48-57
//a-z  97-122
//A-Z  65-90
			
function randomChar(){
	var arr = new Array(3)
	arr[0] = String.fromCharCode(Math.floor(Math.random() * 10 + 48))
	arr[1] = String.fromCharCode(Math.floor(Math.random() * 26 + 97))
	arr[2] = String.fromCharCode(Math.floor(Math.random() * 26 + 65))
	return arr[Math.floor(Math.random() * arr.length)]
}
			
var str = ""
// 随机生成长度为4的含有数字、小写字母、大写字母的字符串
for (var i = 0; i < 4; i++) {
	str += randomChar()
}
			
console.log(str)

三、随机颜色

随机生成颜色值并设置给div

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="box" style="width: 200px;height: 200px;background: red;"></div>
		<button>按钮</button>
		<script>
			var box = document.getElementById("box")
			var str = "0123456789abcdef"
			document.getElementsByTagName("button")[0].onclick = function() {
				var color = "#"
				for (var i = 0; i < 6; i++) {
					color += str.charAt(parseInt(Math.random() * str.length))
				}
				box.style.background = color
			}
		</script>
	</body>
</html>

四、获取当前时间

此案例选用图片展示，如果要用数字也同理

<div>
	<img src="img/0.png" />
	<img src="img/8.png" />
	时
	<img src="img/1.png" />
	<img src="img/5.png" />
	分
	<img src="img/0.png" />
	<img src="img/9.png" />
	秒
</div>

var aImg = document.getElementsByTagName("img")
addZero = (n) => {
   return n < 10 ? "0" + n : "" + n
}
getTime = () => {
   var date = new Date(),
        hours = addZero(date.getHours()),
        minutes = addZero(date.getMinutes()) ,
        seconds = addZero(date.getSeconds())
   //102313
   var timeStr = hours + minutes + seconds
   for (var i = 0; i < aImg.length; i++) {
      aImg[i].src = "img/" + timeStr[i] + ".png"
   }
   return getTime
}
// getTime()自己先调用一次,调用之后的结果就是这个函数的返回值
// 而返回值就是函数本身,所以就又把这个函数交给了setInterval取执行
setInterval(getTime(), 1000)

效果图：
在这里插入图片描述

五、距离某个日期的天数

var nowDate = new Date()
var nowTime = nowDate.getTime()
nowDate.setMonth(10,1)
var endTime = nowDate.getTime()
//两个日期之间的时间戳差值
var distance = endTime - nowTime
var days = distance / 1000 / 60 / 60 / 24
console.log(days)  // 87(根据今日日期8.6而来)

六、倒计时

setInterval(() => {
    var nowTime = Date.now()
    var date = new Date()
    // 设置下班时间
    date.setHours(18, 0, 0)
    var endTime = date.getTime()
    var distance = parseInt((endTime - nowTime) / 1000)
    var seconds = distance % 60
    var minites = (distance - seconds) / 60 % 60
    var hours = (distance - seconds - minites * 60) / 60 / 60
    console.log("距离下班还有" + hours + "小时，" + minites + "分钟，" + seconds + "秒")
}, 1000)

七、从数组中获取一个随机值

const arr = [1, 2, 3]
console.log(arr[Math.floor((Math.random()*arr.length))]) //随机打印1，2，3中的其中一个值

八、从对象数组中获取到最大值

// 一个对象数组
let objs= [{height: 100}, {height: 200}]
// filter的原因是筛选可能没有height这个属性值的对象
objs= layers.map(({ height }) => height).filter((item) => item)
// 求取最大值
const data = Math.max.call(null, ...layers)
console.log(data)  // 200

V。on

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础之应用

js基础之应用本篇文章呢，就应用js基础写一些小案例来体验一下js的乐趣~一、抽奖程序随机抽取str中的某个名字：<body> <p>中午谁请吃饭？</p> <h1></h1> <button>抽奖</button> <script> var h1 = document.getElementsByTagName("h1")[0] var btn = document.getElements
复制链接

扫一扫

专栏目录