初学javaDay26-CSS+JavaScript

最新推荐文章于 2024-06-27 17:55:39 发布

qq_36343289

最新推荐文章于 2024-06-27 17:55:39 发布

阅读量128

点赞数

文章标签： java Css javaScript

本文链接：https://blog.csdn.net/qq_36343289/article/details/103265117

版权

CSS

CSS定位属性

CSS定位属性:position:
1) absolute:绝对定位
2) relative:相对定位
3) fixed:固定定位

left:单独设置向右移动— 原来位置移动
top:整个元素这对父元素body进行移动
举例:

<style>
	#d3{
			background-color: #0F0;
			
			/*绝对定位*/
			/*position: absolute;*/
			
			/*left: 30px;
			top:30px;
			*/
			
			/*相对定位
			 
			 * */
			/*
			position: relative;
			left:30px;
			top:30px;
			*/
			
			/*固定定位 (门户网站首页 使用居多)*/
			position: fixed;
			top: 300px;
			left: 850px;
		}
</style>

CSS浮动属性

浮动:某个元素向右或向左浮动,那么该元素就脱了当前的文档流（当前的位置已经不存在了），后面的元素随之被浮动的位置进行移动！
清除浮动的属性(clear属性)：
1) both：当前元素的左右两边禁止浮动 (使用居多)
2) right:右边不浮动
3) left：左边不浮动
举例:

<head>
	<style>
		#d1{
				width: 200px;
				height: 200px;
				border: 1px solid #000;
				background-color: #0F0;
				
				/*浮动属性:float*/
				/*float: right;*/	/*右浮动*/
				/*float: left;*/
				
				/*左浮动了*/
				float: left;
			}
			#clear{
					//当前元素的左右两边禁止浮动 (使用居多)
					clear: both;
					//right:右边不浮动
					/*
					clear: right;
					//left:左边不浮动
					clear: left;
					* */
					}
	</style>
</head>
<body>
	<div id="d1">div1</div>
	<!--清除浮动的div-->
	<div id="clear"></div>
	<div id="d2">div2</div>
</body>

JavaScript

js流程控制语句

1.if语句:如果条件表达式true,成立,false,不成立;
表达式是 number类型: 具体的数值,条件成立;如果是0,条件不成立;
表达式是 string类型:是非空字符串或字符,条件成立;如果空字符串,条件不成立
表达式是 boolean类型:true 条件成立;否则不成立
表达式是 object:非null的内容,条件成立;null,条件不成立
2.switch语句
格式:

switch(表达式){
 		case 值1:
 			语句1;
 		break ;
 		case 2:
 			语句2
 		break;
 		...
 		
 		default:
 		语句n+1;
 		break;
 	}

符合java中的一些语法规则:
如果case后面的值跟switch中的值都不匹配,执行defalut语句
如果case语句中没有书写break,造成case穿透

和java语言的唯一区别:
case后面的值可以是常量,也可以是变量! (js语言弱类型的体现)

js运算符

算术运算付:+,-,,/,%,++,- -…
赋值运算符：=,+=,-=,=,/=,%= var a = 10 ;
比较运算符：>,<,>=,<=,==
逻辑运算符：逻辑单与&，逻辑双与&&，逻辑单或|，逻辑双或||
注意: true 和false在参与运算的时候 true ：代表1 false ：代表0

js中的函数

格式:
function 函数名(形式参数){
语句;
}
注意事项: (js是一个弱类型语言)
1)函数定义中,形式参数不能使用var定义,直接写上形式参数名即可!
2)在js中,函数里面是可以有return语句的,但是定义的格式不需要返回值类型.
3)在js中,没有重载的概念,后面定义的函数会将前面定义的函数覆盖掉 (js是弱类型语言)
4)在js中,形式参数个无论大于实际参数个数还是小于实际参数个数,函数依然会被调用!
5)函数中存在默认的数组:arguments,该数组的作用是将实际参数给形参进行赋值
调用函数:函数名(实际参数) ;
参数个数问题:
当形式参数个数 > 实际参数个数 — NaN 有一个形式参数没有被赋值
形式参数个数 <实际参数个数 — 将前面的形参赋值 ,然后计算,后面多余的实际参数丢弃掉!

String对象

String对象中常用的功能:
charAt(var index):返回指定索引处的字符
indexOf(var s):查询当前s子字符串第一次在大字符串中出现的索引值
fontcolor(#f00/red…) : 指定字符串颜色(重点)
substring (var start,var end):从指定位置开始截取,到指定位置结束(不包含end)
substr(var start,var length):从指定位置截取指定长度

== 和valueOf()的区别,看下列代码

//创建两个String对象
//格式1:var 对象名 = new String("") ;
var str1 = new String("hello") ;
var str2 = new String("hello") ;
document.write((str1==str2)+"<br />") ;   //false

//String:valueOf()方法:比较的是两个字符串对象的内容是否相同  (原始值是否相同)
document.write(str1.valueOf() == str2.valueOf()+"<br />") ;    //true
document.write("<hr/>") ;

Date日期对象

回顾java:
Java中有一个日期类: 日期类Date java.util.Date;
日期Date格式---- String 日期文本格式 2019-11-26
1)Date d = new Date() ;
2)中间类: DateFormat(抽象类)
子类:SimpleDateFormat sdf = new SimpleDateFormat(“yyyy-MM-dd”);
String s = sdf.format(d) ; format(Date d) :格式化方法
日期文本格式String s = “2019-11-26”; Date 日期格式 (解析)
SimpleDateFormat sdf = new SimpleDateFormat(“yyyy-MM-dd”);
Date d = sdf.parse(s) ; 对日期文本格式进行解析
-----------------------------------分割----------------------
下面是js:

//创建内置对象Date
var date = new Date() ;
//document.write(date) ;
//获取年份	getYear():它代表了所保存的年份与 1900 年之间的差距
//document.write(date.getYear()+"年") ;	//119

//getFullYear(); 获取年
document.write(date.getFullYear()+"年")
//getMonth()返回一个处于 0 到 11 之间的整数		获取月
document.write((date.getMonth()+1)+"月") ;
//getDate() 获取月中的日期值
document.write(date.getDate()+"日"+"&nbsp;&nbsp;") ;
//getHours():获取小时
document.write(date.getHours()+":") ;
//获取分钟值 getMinutes():  getSeconds():获取秒
document.write(date.getMinutes()+":") ;
document.write(date.getSeconds()) ;

innerHTML属性

每一个标签对象中都存在文本属性:innerHTML
下面是一个网页时钟的示例代码:

<html>
	<head>
		<meta charset="UTF-8">
		<title>网页时钟</title>

	</head>
	<body>
当前系统时间是:<span id="spanTip"></span>
<script>
	
	function newDate(){
		//1创建日期对象
		var date = new Date() ;
		//2拼接日期字符串：日期 时间
		var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"+date.getDate()+
		"&nbsp;&nbsp;"
		+date.getHours()+":"+date.getMinutes()+":"+date.getSeconds() ;
		
		//3)想要将dateStr字符串放置到span的文本中，必须获取span标签对象
		var span = document.getElementById("spanTip") ;
		//设置span标签对象文本内容  innerHTML
		span.innerHTML = dateStr ;
	}
	
	
	//设置定时器
	//window.setInterval("任务()",“每经过多少毫秒”) ：每经过多少毫秒重复执行这个任务
	//window.setTimeout("任务()","毫秒数"):经过多少毫秒后执行一次这个任务
	
	setInterval("newDate()","1000") ;	//每1000毫秒重复执行  newDate()这个任务！

</script>
</html>

Array对象

数组的定义有三种方式
1）new Array();
2)new Array(size)
3)js的静态初始化 new Array([element0[, element1[, …[, elementN]]]])
简化格式：var array = [元素1，元素2,元素3.。。] ;

注意事项：
1)js中的数组不存在ArrayIndexOutOfBoundsException异常，可以给js数组不断给定内容的
2）js中的数组可以存储任意类型的元素
功能：
reverse():将数组元素进行反转
join(var s) :通过当前s分隔符号将数组的元素拼接成一个字符串值
举例:

var arr = ["JavaEE","JavaSE","JavaME","Hadoop","Go","R"] ;
var str = arr.join("-") ;
document.write(str) ;

js中的for-in语句 类似与Java中的增强for循环

for(var 变量名 in 数组对象/自定义对象) {
输出数组对象[变量]
输出自定义对象[属性名称] ;
}

事件编程的三要素

1）事件源：哪个标签发生事件
2）事件监听器：编写一个函数符合函数的定义
3）绑定事件监听器：
onfocus:获取焦点事件
onclick：单击点击事件

其他

//向浏览器输出内容
document.write("hello,javascript...") ;
//弹框
//window对象是js所有对象的顶级对象    可以省略不写
//window.alert("高圆圆") ;
alert("高圆圆") ;

<!--导入外部js文件
	scrript标签：有标签体标签 <script><</script>
			src属性：加载外部的js文件路径
	举例:<script src="js/01.js" />
-->

qq_36343289

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初学javaDay26-CSS+JavaScript

CSSCSS定位属性CSS定位属性:position:1) absolute:绝对定位2) relative:相对定位3) fixed:固定定位left:单独设置向右移动— 原来位置移动top:整个元素这对父元素body进行移动举例:<style> #d3{ background-color: #0F0; /*绝对定位*/ /*positi...
复制链接

扫一扫