双色球 二维数组 Math常用方法 字符串方法 计时器

最新推荐文章于 2024-03-28 16:21:40 发布
最新推荐文章于 2024-03-28 16:21:40 发布
阅读量213 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cc12345_10/article/details/116242095
版权
本文通过一个双色球实例展示了HTML、CSS和JavaScript的基本应用，包括动态添加元素、数组去重、随机数生成以及事件处理。同时，介绍了二维数组的操作、Math对象的常用方法，如取整、开方、随机数等。此外，还探讨了字符串的方法，如charAt、substring等，并讲解了计时器的使用，包括setInterval和setTimeout。最后，提供了计时器的实战练习，动态改变元素背景颜色。
摘要由CSDN通过智能技术生成

1.双色球实例


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>双色球</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			.wp {
				width:1000px;
				margin: 50px auto;
			}
			.wp>div {
				display: flex;
				justify-content: space-between;
				height:50px;
				padding-bottom:20px;
			}
			.wp>div span {
				width:50px;
				height:50px;
				background:#f00;
				color: #fff;
				font-size: 30px;
				text-align: center;
				line-height:50px;
				display: block;
				border-radius:50%;
			}
			.wp>div span:last-child {
				background:#00f;
			}
			#btn {
				display: block;
				margin: 0 auto;
				width: 120px;
				height: 40px;
				text-align: center;
				line-height:40px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="wp">
			<!-- <div>
				<span>1</span>
				<span>5</span>
				<span>8</span>
				<span>10</span>
				<span>23</span>
				<span>28</span>
				<span>9</span>
			</div> -->
		</div>
		<button id="btn">加一注</button>
	</body>
</html>
<script type="text/javascript">
	var wp = document.getElementsByClassName('wp')[0];
	var btn = document.getElementById("btn");
	
	//btn点击
	btn.onclick = function(){
		//创建一个数组
		var arr = [];
		// 给数组随机添加6个红球[1-33]
		for(var i=0;i<6;i++){
			//随机产生数
			var num = Math.floor(Math.random()*33+1);
			//判断数组中有没有num(数组去重)
			if(arr.indexOf(num)!=-1){ 
				//数组中存在 num
				i--;
			}else{
				arr.push(num);
			}
		}
		
		//随机添加篮球
		var blue = Math.floor(Math.random()*16+1);
		arr.push(blue);
		
		//循环拼接
		var str = '<div>';
		for(var i=0;i<arr.length;i++){
			str+= '<span>'+arr[i]+'</span>';
		}
		str+='</div>';
		
		wp.innerHTML += str;
	};
	
</script>

2.二维数组

// 二维数组
	// 普通数组
	var arr1 = [1,4,7];
	var arr2 = ['吕布','关羽','哪吒'];
	var arr3 = ['海绵宝宝','葫芦兄弟','水冰月'];
	// 二维数组，每一个元素都是一个数组
	var erArr = [arr1,arr2,arr3];
	// 获取二维数组中的值,arr[1][1] 第一个数组下标，获取的是arr中的第几个数组，第二 个数组下标，获取的是该数组中的第几个元素
	console.log(erArr[2][1]);
	
	// 打印出所有的数据，几维数组，就用几层for循环
	for(var i=0;i<erArr.length;i++){
		for(var k=0;k<erArr[i].length;k++){
			console.log(erArr[i][k]);
		}
	}
	
	var er1 = [[1,4,7],[0,4,8],[34,89,190]];
	var min = er1[0][0]; //获取第一个数组中的第一个元素，作为比较操作的最小值
	var minA = 0; // 设置最小值是第几个数组
	var minB = 0; // 设置最小值在当前数组的第几位
	
	for(var i=0;i<er1.length;i++){
		for(var m=0;m<er1[i].length;m++){
			if(min >er1[i][m]){
				min = er1[i][m];
				minA = i+1;
				minB = m+1;
			}
		}
	}
	console.log('最小是值'+min+',他是第'+minA+'个数组第'+minB+'位');

3.Math常用方法

/*
	Math.floor() 向下取整
	Math.round() 四舍五入
	Math.ceil() 向上取整
	Math.random() 随机数
	Math.pow() 幂函数
		参数俩个
		1.底数
		2.指数
	Math.sqrt() 开平方运算，参数不能为负数，如果为负数，取值为 NaN
	
	Math.abs() 绝对值
	
	Math.min() 最小值
	Math.max() 最大值
	最大值和最小值的参数可以有很多个，但是不能是数组，如果要查找数组中的最大和最小，需要借助于apply函数，apply可以 向max传递一个数组
	
	*/ 
   var num1 = Math.pow(2,3);
   console.log(num1);
   var num2 = Math.sqrt(16);
   console.log(num2);
   var num3 = Math.sqrt(-16);
   console.log(num3);
   
   var num4 = Math.abs(-16);
   console.log(num4);
   
   var max = Math.max(23,45,67,12,7,8,90,0);
   console.log(max);
   var min = Math.min(23,45,67,12,7,8,90,0);
   console.log(min);
   var arr = [23,45,67,12,7,8,90,0];
   var max1 = Math.max.apply(null,arr);
   console.log(max1);

4.字符串方法


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>字符串方法</title>
		<style type="text/css">
			* {
				margin:0;
				padding:0;
			}
			#wp {
				width:200px;
				height:100px;
				line-height:25px;
				overflow: hidden;
				border:1px #f00 solid;
			}
		</style>
	</head>
	<body>
		<div id="wp">
			实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知实践出真知
		</div>
		<input type="text" id="txt" value="" />
		<button type="button" id="btn">点击</button>
	</body>
</html>
<script type="text/javascript">
	/*
	1.charAt() 获取指定位置上的字符
	参数1，指定字符的位置，如果不写，就从第一个字符开始获取(不支持负数)
	返回值是查找到的字符
	
	2.charCodeAt() 获取指定位置上的字符的字符编码
	特点同 charAt()
	常用字符编码
	0-9:48-57 
	a-z:97-122
	A-Z:65-90
	
	3. String.fromCharCode(字符编码) 把提供的字符编码，转换为对应的字符，调用对象不再是字符串，而是String，他是String的一个静态方法
	
	*/
   var str1 = '你是人间的四月天';
   var str2 = str1.charAt(2);
   console.log(str2);
   var code1 = str1.charCodeAt(2);
   console.log(code1); //20154
   var str3 = String.fromCharCode(code1);
   console.log(str3);
   
   /*------------*/ 
   /*
   截取字符串的常用方法
   4.substring() 截取字符串中的子字符串，两个参数，包含开始，不包含结尾
	参数：两个
	
	1.第一个参数 指定截取开始的位置
	2.第二个参数 指定截取的结束位置
	
	特点：
		1.参数只能是正数和0，非法的参数都会被解析为0
		2.如果没有参数，则从头截取到尾部
		3.如果只有一个参数，则从参数指定的位置，截取到尾部
		4.如果有两个参数，参数会比较大小，小的为开始位置，大的为结束位置
		5.包含开始位置，不包含结尾位置
   */
  var str4 = '可怜天下父母心';
  var str5 = str4.substring(1,5);
  console.log(str5);
  
  var str6 = str4.substring('abc',5);
  console.log(str6);
  
  var str7 = str4.substring(5);
  console.log(str7);
  
  var str8 = str4.substring(5,3);
  console.log(str8);
  //实例，多行文本添加省略号
  var wp = document.getElementById("wp");
  wp.innerHTML = wp.innerHTML.substring(0,42)+'...';
  
  /*
  5.slice() 字符串截取，特性跟数组中一样
  参数为两个
	1.开始位置
	2.结束位置
  特点：
	 1.参数的值只能为整数(正负整数和0)，非法字符会解析为0
	 2.不会比较大小，当两个调换的时候，会截取不同的内容
	 3.参数都省略的时候，相当于复制
	 4.只有一个参数的时候，从参数位置截取，一直到最后
	 5.值为负的时候，倒着数，从1开始
  */
 var str9 = '枯藤老树昏鸦，你丑没事我瞎';
 var str10 = str9.slice(7,9);
 console.log(str10);
 var str11 = str9.slice(6,-2);
	console.log(str11);
	/*
	6.substr()
	参数是两个
	1.开始截取的位置
	2.截取的长度
	
	特点：
	1.第一个参数可以是0 正负整数
	2.在低版本ie(6/7/8)下，第一个参数不能为负数
	
	*/ 
   var str12 = str9.substr(2,4);
   console.log(str12);
   
   var str13 = str9.substr(-4,4);
   console.log(str13);
  	
	//字符串也是可以循环输出的
	for(var i=0;i<str9.length;i++){
		console.log(str9[i]);
	}
	/*
	获取一个字符串在另一个字符串中的下标位置
	1.indexOf()
	2.lastIndexOf()
	和数组的使用方式一样
	参数
		1.要查找的字符串
		2.开始查找的位置
	如果找不到，返回-1	
	*/
   var str14 = '一见公主盗令箭';
   console.log(str14.indexOf('公主坟'));
   
   /*
   字符串转化
   toLowerCase() 大写转小写
   toUpperCase() 小写转大写
   */ 
  var str15 = 'Good Good Study';
  var str16 = str15.toLowerCase();
  console.log(str16);
   var str17 = str16.toUpperCase();
   console.log(str17);
   
   /*
   去除字符串两边的空格
   trim()
   没有参数，新增方法，低版本ie不支持
   
   */ 
  var txt = document.getElementById("txt");
  var btn = document.getElementById("btn");
  btn.onclick = function(){
	  var val = txt.value.trim();
	  console.log('*'+val+'*');
	  
  };
  /*
  字符串拼接, 和 + 拼接是一样的
  concat()
  */
  var str18 = '朱温';
  var str19 = '李克用';
  var str20 = '石敬瑭';
  var str21 = str18.concat(str19,str20);
  console.log(str21);
  
  /*
  split() 把字符串切割成数组
  参数是切割符号
  */
  var str22 = '朱温&李克用&石敬瑭&刘知远&郭威';
  var arr = str22.split('&');
  console.log(arr);
</script>

5.计时器


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计时器</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.wp {
				width:200px;
				height: 200px;
				background: #04BE02;
				color: #ff0;
				text-align: center;
				line-height: 200px;
				font-size:50px;
			}
		</style>
	</head>
	<body>
		<div class="wp"></div>
		<button type="button" id="btn">停止</button>
		<button type="button" id="start">开始</button>
		<button type="button" id="all">清除所有计时器</button>
	</body>
</html>
<script type="text/javascript">
	/*
	计时器
	1.计时器属于BOM的内容
	2.计时器分为两种
		2.1 间隔计时器
			每间隔多长时间，执行一次某个操作
		2.2 延迟计时器
			推迟多长时间，执行一次某个操作
	3.创建计时器的方法
			
	*/
   /* 
	间隔计时器 setInterval()
	两个参数
		1.执行函数：  表示每隔一段时间，需要执行的代码都在该函数中
		2.时间间隔，单位是ms 1s=1000ms
   */
  // 第一种方式：执行函数是一个匿名函数
	var num = 0; 
	var abc = setInterval(function(){
		num++;
		console.log('同一个世界同一个梦想'+num);
	},1000);
	console.log(abc);
	
  //第二种方式：执行函数是一个 普通函数
	var wp = document.getElementsByClassName('wp')[0];
	var num1 = 0;
	// 声明一个函数
	function ab(){
		num1++;
		wp.innerHTML = num1;
	}
	
	// setInterval(ab,500);
	
	//第三种方式 执行函数是一个字符串
	// setInterval('ab()',500);
	
	//延迟计时器,只执行一次，第二个参数代表的是延迟多久执行
	setTimeout(function(){
		wp.style.background = '#f00';
	},2000);
	
	/*
	计时器的返回值，返回值是一个number，是浏览器给计时器的一个编号，谷歌是从1开始的，火狐是从2开始的，IE也是一个编号，无论任何浏览器，从第一个计时器开始，编号会越来越大
	*/ 
   
   /*
   清空计时器，让计时器停止
   clearInterval(num); //清空间隔计时器
   clearTimeout(num); //清空延迟计时器
   
   清空计时器，参数num指向一个计时器
   */ 
	//声明计时器
	var timmer;
	
	timmer = setInterval('ab()',500);
	
	var stop = document.getElementById("btn");
	var start = document.getElementById("start");
	
	//清除计时器
	stop.onclick = function(){
		clearInterval(timmer);
	};
	// 重启计时器，为了防止用户多次连续点击重启，导致计时器累加，需要在重启之前先清除计时器
	start.onclick = function(){
		clearInterval(timmer);
		timmer = setInterval('ab()',500);
	};
	
	var all = document.getElementById("all");
	all.onclick = function(){
		for(var i=0;i<10;i++){
			clearInterval(i);
		}
	};
	
</script>

6.计时器练习


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>计时器练习</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.wp {
				width: 200px;
				height: 200px;
				background: #04BE02;
				border: 1px #f00 solid;
			}
		</style>
	</head>
	<body>
		<div class="wp"></div>
		<button id="start">开始</button>
		<button id="stop">停止</button>
	</body>
</html>
<script type="text/javascript">
	// 每隔0.5妙，随机改变wp的颜色
	var wp = document.getElementsByClassName('wp')[0];
	var start = document.getElementById("start");
	var stop = document.getElementById("stop");
	var timmer;
	var num = 10;
	wp.innerHTML = num;
	var t;
	t = setInterval(function(){
		num--;
		wp.innerHTML = num;
		if(num<=0){
			clearInterval(t);
		}
	},1000);
	
	start.onclick = function(){
		clearInterval(timmer);
		timmer = setInterval(function(){
			var r = Math.floor(Math.random()*256);
			var g = Math.floor(Math.random()*256);
			var b = Math.floor(Math.random()*256);
			wp.style.background = 'rgb('+r+','+g+','+b+')';
		},500);
	};
	stop.onclick = function(){
		clearInterval(timmer);
	};
</script>
敲代码的皮皮
关注
js-双色球
weixin_64948861的博客
05-05 390
js-双色球 一、代码 1.html 代码如下（示例）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-sca
第一阶段第十天（数组排序（二维），双色球，杨辉三角）
jonney的程序职业生涯
05-26 710
1、对一维数组{12,21,9,45,32,23}进行冒泡排序 package day10; import java.util.Arrays;   /**  *   * 对一维数组{12,21,9,45,32,23}进行冒泡排序  *  */ public class Demo10_1 {         /**          * 入口文件          *
Java 用两个一维数组实现双色球彩票
weixin_30425949的博客
07-15 280
设计一个程序，模拟双色球的选号过程（6个蓝球+1个红球）， 要求：生成的6个红球号码不重复数字大小在（1-33）之间，蓝球大小（1-16）之间。 思路： 1、创建一个int类型的一维数组balls，用来保存33个彩球的编号 2、创建一个boolean类型的一维数组flags，用来保存33个红球的状态，默认全部为false （比如：flags[0]=true,意味着编...
利用数组求解双色球问题
mnimxq的博客
07-25 431
import java.util.Random;        public class DoubleBall{             public static void main (String [] args){                           int [] array=new int [7];                           int k;
JS实现双色球
dabaiZhang的博客
09-26 1759
JS实现双色球 首先在HTML里面实现以下代码： 接下来是JS代码： // 随机生成范围内的数字 function suijishu(min, max = 0) { if (min > max) { [min, max] = [max, min]; } return parseInt((max - min + 1) * Math.random() + min); } // 电脑随机生成红色球和蓝色球数字 function ballNums() { // 建一个接收红篮球的数组 let arr = [
js用定时器几句话实现双色球开奖效果
JackieDYH的博客
04-01 819
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
js生成双色球
web_seeker的博客
08-08 1815
题目：设计一个函数随机一注双色球号码，返回格式为字符串：“01,04,09,14,25,31|09”。 注：双色球分红、蓝。红：01~33组成。蓝：01~16组成。一注可投的号码为6个红球，一个蓝球，按从小到大顺序排列。 很多前端初学同学去公司面试的时候可能会遇到跟随机数相关的题目，下面根据这一综合案例，我为大家整理了一下两种解法。当然，还会有其他不一样的解法也是可以的，大家多多思考哦
javaScript之Math实战应用-双色球
weixin_33901843的博客
10-10 249
本次的分享呢是对上篇的Math数学对象的一个实战应用，案例是一个双色球的小demo，实现效果如下图。 在我看来，实现任何一个功能，都有其核心思想，在这个案例中，核心就是随机数，我们要取7个随机数，而且是限定在1到35之间，不仅如此，还要保证红色球的数字不能重复。有了这样的认识我们玖可以开始了，在本次案例，将主要应用到的Math方法是 Math.random()，而对数字取整的方法是 Math.f...
Javascript 机选双色球
王玉宇的博客
02-08 784
【代码】Javascript 机选双色球。
学习html第四天 双色球
未来会有初音
12-10 500
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div{ /* width: 50px; 宽 height: 50px; 高 background-color: greenyellow; 背景颜色 color:
JS一起学04：函数返回值、定时器、随机数、自动播放的幻灯片
u011587845的专栏
11-17 229
一、函数返回值----将相应的值返回到函数调用的地方 1. 可以不写返回值 2. 可以没有return，如果不返回，默认返回undefined 3. 本函数内，renturn之后的JS语句不再执行，跳出 4. 可以返回任意类型 例一： window.onload=function() {   function fn() {        var a=4;     ...
双色球
cqbdqn1的博客
08-19 171
具体实现方案： 界面，由Visual Studio 工具编写C#的winform程序，根据具体的功能分为数个界面，并通过功能之间的联系由相关数据将界面之间联系起来，常用控件为combox,datagridview,button……. 数据信息，每次关于摇奖和购彩的信息都将根据时间关联存储到数据库中，显示相关信息时则读取对应数据库表中的信息 功能实现， 因为只是模拟，大...
数组的概述（一维、二维数组）
最新发布
El_ia_uk的博客
03-28 687
针对于初始化方式一：比如：int[ ][ ] arr = new int [4][3];2、如何调用数组的指定位置的元素：通过角标（从0开始，到数组长度-1结束）的方式调用。②数组属于引用数据类型的变量，数组的元素既可以是基本数据类型，又可以是引用数据类型。内层元素：arr[0][0],arr[1][2]等。>数组元素是char型：0或'\u000',而非'0'>数组元素是char型：0或'\u000',而非'0'②按数组元素的类型：个元素基本数据类型的数组、引用数据类型的数组。
Day7、彩票算法、可变长数组、二位数组
tangzihao_c的博客
08-05 627
编写程序产生一组彩票（彩票里包含7个随机数，每个随机数在1到32之间） 产生完彩票后把彩票里的数字显示在屏幕上（不允许彩票里出现重复数字）   1#include   2#include   3int main(){  4     int num=0，cnt=0;  5     int arr[7]={0};  6     srand(time(0));  7     do{
学懂字符串
七代目鸽影
02-20 304
收录了字符串的「简单例题」，测试你是否学懂了字符串。
Java基础之双色球彩票玩法
C_time的博客
04-01 2201
一、双色球彩票玩法 玩法说明： 双色球投注区分为红球号码区和蓝球号码区，红球号码范围为01～33，蓝球号码范围为01～16。双色球每期从33个红球中开出6个号码，从16个蓝球中开出1个号码作为中奖号码，双色球玩法即是竞猜开奖号码的6个红球号码和1个蓝球号码，顺序不限。 二、案例分析： 1、如何产生蓝球和红球？ 2、如何接收用户选号？ 3、如何验证是否中奖？ 4、公布本期中奖号码？ 三、实现步骤： ...
js 实现双色球
weixin_63649124的博客
05-03 2014
前端代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } li{ list-style: none; width: 50px; height:
双色球：字符串比较（day03-13.09.27）
生如夏花IT的专栏
09-27 621
package DoubleBall; import java.util.Arrays; import java.util.Random; public class DoubleBall { /** * @param args */ public static void main(String[] args) { // TODO Auto-generated method s
彩票摇奖【数组】
weixin_45962274的博客
04-10 160
输入 2 23 31 1 14 19 17 18 12 8 9 23 1 16 7 11 7 10 21 2 9 31 输出 0 0 0 0 0 1 1 #include<iostream> using namespace std; int f[33], p[10], n, m; int main() { // int sum = 0; cin >> n; for(int i = 1; i <= 7; i++) { cin >> m; f[m.
用c语言如何用二维数组存入多个字符串
02-06
用 c 语言如何用二维数组存储多个字符串呢？ 首先，需要确定要存储的字符串的个数和每个字符串的长度。然后定义一个二维数组，其中第一维表示字符串的个数，第二维表示每个字符串的长度。 例如，假设要存储 3 个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值