js基础之应用

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
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值