JS、JQuery 、HTML5、CSS3的一些学习笔记

最新推荐文章于 2022-10-22 15:14:04 发布

雪丿下

最新推荐文章于 2022-10-22 15:14:04 发布

阅读量201

点赞数

文章标签： js css html jquery

本文链接：https://blog.csdn.net/weixin_42732353/article/details/106411758

版权

JS部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>蓝毒魔方</title>
	<!-- 1.js是外部js文件 用src直接引用 中间不要添加其他js代码-->
	<script src="../js/1.js"></script>  
	<style>
		#js{
			line-height: 30px;
			height: 40px;
			width: 80px;
			border: 1px solid blue;
			border-radius: 5px;
			background-color: pink;
		}

		.jsc{
			background-color: orange;
		}
	</style>
	<script>  //用内嵌的方式在里面写JS代码

	    var sum = 100;  //定义的一个全局变量
		function trans() {
			window.open('http:www.baidu.com','_blank','width=600','height=600') //注意这里不能带分号
		}
		function max(){
			var max,p;      //var定义变量
			p = prompt("输入一个数据");
					//console.log(isNaN(p)\n); isNaN()判断 是不是一个数字 不是为true
				max = parseInt(p)+1;
			document.write("蓝毒真可爱");
			//console.log(isNaN(max))
			return max;
		}
		function ifex(A){  //选择语句
				if (A) {

				}
				switch(A){
					case 1: break;
					case 2: break;
				}
		}
		function Loop(a){   //循环语句
			while(a)
			{
				a--;
			} 
			for (var i = a.length - 1; i >= 0; i--) {
				a[i]
			}
		}
		function arr(){     //数组
			var array = new Array('1','2','3');
			array[3] = '4';
			array["bookname"] = '书名'    //关联数组 自定义名 用for..in 去遍历
			document.write(array[3]);
			document.write(array["bookname"]);
		}
		function arrapi(){   //数组操作
			var arr = new Array('1','2','3','-');
			concat();   //拼接多个数组
			slice();    //返回现有数组的子数组 含头不含尾 arr.slice() 直接复制数组
			splice();   //删除数组  或者插入和替换
			reverse();  //颠倒数组
			sort();     //转成字符串之后排序
			document.write(arr.join("-"));  //join内的为字符串的连接符 将数组内容连接
			document.write(arr.join(""));
			document.write(String(arr));  //逗号隔开
		}
		
		// DOM document object model 对网页进行增删查改的操作
		function id_look(){
			var tst = document.getElementById('id_name');
			var tst = document.getElementsByTagName('button');
			//document.getElementsByName('');  找name属性
			//parent.getElementsByClassName('');  找父元素下的class属性
			console.log(tst);
		}
		document.write(sum);  //HTML会直接按照顺序执行<script>语句的内容
		/*  DOM添加元素
		document.creatElement("a"); 创建一个a元素
		a.innerHTML = " " ;  给元素设置属性
		a.herf="#";
		a.style.opacity = " 1 ";  设置关键样式
		a.style.cssText = "width:30px;height:30px";

		a.style
		*/


		/* 	BOM
		window    
		          .outerWidth/outerHeight  获取窗口大小
		history
		navigator
		document
		location
		screen
		event
		
		定时器
				setInterval(exp,time)
		*/
		
	</script>

	<!-- 魔方CSS -->
	<style>
		.container{
				margin: 150px auto;
				padding: 0px;
				width: 300px;
				height: 300px;
				/*border: 1px solid #000;*/
				perspective: 20000px;
				
		}
		.box{
				width: 300px;
				height: 300px;
				border-radius: 20px;
				transform-style: preserve-3d;	
				/*transition: transform 3s,linear 3s;	*/
				animation: ro 4s linear infinite;
		}
		@keyframes ro{
			0%   {transform: rotateX(0deg) rotateY(0deg);}
			100% {transform: rotateX(360deg) rotateY(360deg);}

		}

		.box-page{
				width: 300px;
				height: 300px;	
				position: absolute;
				transform-style: preserve-3d;
		}
		.top{
		 	/*background-color: red;*/
			transform: translateZ(150px);
		}
		.bottom{
			/*background-color: pink;*/
			transform: translateY(150px) rotateX(90deg);
		}
		.left{
			/*background-color: green;*/
			transform: translateX(-150px) rotateY(90deg);
		}
		.right{
			/*background-color: blue;*/
			transform: translateX(150px) rotateY(90deg);
		}
		.before{
			/*background-color: black;*/
			transform: translateY(-150px) rotateX(90deg);
		}
		.after{
			/*background-color: orange;*/
			transform: translateZ(-150px);
		}
		.box:hover{
			transform: rotateX(270deg) rotateY(270deg) rotateZ(270deg);
		}
	
		.box-page div:nth-child(1){
			animation: a1 4.5s ease-in 0s;
		}
		.box-page div:nth-child(2){
			animation: a1 4.5s ease-in 0.5s;
		}
		.box-page div:nth-child(3){
			animation: a1 4.5s ease-in 1s;
		}
		.box-page div:nth-child(4){
			animation: a1 4.5s ease-in 1.5s;
		}
		.box-page div:nth-child(5){
			animation: a1 4.5s ease-in 2s;
		}
		.box-page div:nth-child(6){
			animation: a1 4.5s ease-in 2.5s;
		}
		.box-page div:nth-child(7){
			animation: a1 4.5s ease-in 3s;
		}
		.box-page div:nth-child(8){
			animation: a1 4.5s ease-in 3.5s;
		}
		.box-page div:nth-child(9){
			animation: a1 4.5s ease-in 4s;
		}
		@keyframes a1{
			0%     {transform: translateZ(0px) scale(1) rotateZ(0deg);}
			20%    {transform: translateZ(300px) scale(0) rotateZ(720deg);}
			90%    {transform: translateZ(300px) scale(0) rotateZ(720deg);}
			100%   {transform: translateZ(0px) scale(1) rotateZ(0deg);}
		}
	</style>

</head>
<body>
	<div id="js" onclick="console.log('hell');"> 点击试试</div>

	<button class="jsc" onclick="trans()"> 转入链接</button>

	<button class="jsc" onclick="alert('答案错误')"> 交卷</button>   
	<button class="jsc" onclick="max()"> 输入</button>
	<button class="jsc" onclick="id_look()"> 查找id_name</button>
	
	<ui id='id_name'>  查找到id_name 的元素显示到控制台</ui>

	<!-- alert()用于警告提示弹窗 也就是弹窗输出信息 -->

	<!-- 魔方 -->

	<div class="container">
		<div class="box">
			<div class="box-page top"></div>
			<div class="box-page bottom"></div>
			<div class="box-page left"></div>
			<div class="box-page right"></div>
			<div class="box-page before"></div>
			<div class="box-page after"></div>

		</div>
	</div>
</body>

<script type="text/javascript">
	var arr = document.querySelectorAll(".box-page");
	for (var i = 0; i <= arr.length; i++) {
			for (var j = 0; j < 3; j++) {
				for(var c = 0;c < 3; c++){
					var divs = document.createElement("div");
					divs.style.cssText = "width:100px;height:100px;border:1.5px solid #fff;box-sizing:border-box;position:absolute;background-image:url(img/a"+i+".jpg);background-size:300px 300px;"
					arr[i].appendChild(divs);

					divs.style.left = c*100 +"px";
					divs.style.top = j*100 +"px";

					divs.style.backgroundPositionX = -c*100 +"px";
					divs.style.backgroundPositionY = -j*100 +"px";
				}
			}
		}	
</script>
</html>

CSS3部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS3</title>
	<style type="text/css">   /*圆角边框与阴影*/
		h1{
			color: white
			text-shadow: 5px 5px 5px black;
		}
		.ssa{
			height: 80px;
			width: 80px;
			border: 1px solid blue;
			background-color: orange;            /*设置圆边框*/
			border-top-left-radius: 20px 20px;    
			-webkit-border-bottom-left-radius: 20px 20px;
			-webkit-border-top-right-radius: 20px 20px;
			-webkit-border-bottom-right-radius:20px 20px;
			box-shadow: 5px 5px 5px #888;   /*--水平偏移 垂直偏移 模糊范围 颜色 */
			transform: rotate(30deg);     /*2D旋转 */

		}
		.a{
			height: 80px;
			width: 80px;
			border: 1px solid blue;

			transform: scale(0.5); /*缩放盒子的大小*/
		}
		.tra{
			height: 60px;
			width: 80px;
			line-height: 30px;
			border: 1px solid red;
			border-radius: 5px;
			background-color: blue;
			transition: width 3s,transform 2s,linear 2s;/*设置鼠标悬停的过渡效果*/
		}
		.tra:hover{     /*hover是.tra*/

			color: white;
			background-color: #45b823;
			width: 160px;
			transform: rotate(360deg);
		}
		@keyframes mycolor{             /*animation 动画的关键帧*/
			0% {background-color: red;}
			30% {background-color: green;}
			60% {background-color: blue;}
			100% {background-color: pink;}
		}
		.animation{
			height: 60px;
			width: 80px;
			border: 1px solid red;
			border-radius: 5px;

		}
		.animation:hover{             /*鼠标悬停时播放keyframes*/
			animation: mycolor 5s linear running;
		}

		.T-3D{
			height: 60px;
			width: 80px;
			border: 1px solid red;
			transform-style: preserve-3d;
			perspective: 100px;		
		}
		.T-3D:hover{
			transition: linear 1.5s;
			transform: rotateY(360deg);
		}
		

	</style>
</head>
<body>
	<h1>大标题</h1>
	<div class = "ssa"><p> css3</p></div>
	<div class = "a"><p> css3</p></div>

	<div class="tra">transiton过渡</div>

	<div class="animation">animation动画</div>

	<div class="T-3D">3D变换</div>
<!--
    这是多行注释
    这是多行注释
    这是多行注释
-->
</body>
</html>

JQuery和HTML5部分：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>


	<style>
		#myC{
			border: 1px solid orange; 
		}
	</style>
</head>
<body>
	<!--  
	#id.class
	1）访问元素属性
		$bj.attr("name");			获取北京节点的name属性值
		$bj.attr("name","beijin");	设置...

	2）html操作
		$("p").html()							获取<p>元素中的HTML内容
		$("p").html("<strong>exp</strong>")		设置...
	3) 文本操作
		$("p").text()				获取<p>元素中的文本内容
		$("p").text("exp")			设置...
	4）值操作
		$("input:eq[5]").val()		读取节点的value属性值
		$("input").val("exp")		设置
	5）修改CSS样式
		$("...").css("CSS属性名")
		$("...").css("CSS属性名"，值)
	6）创建元素
		var $new = $("html代码片段")		创建新元素
		$(parent).append($newelem)
	7) 删除
		$("...").remove()
	8) 事件绑定
		$("...").bind("事件类型"，function(e){...})
		例：			$("#btn").bind("click"，function(e){console.log("hello");})
	-->
	
	<!-- HTML5部分
		<header>
		<nav>
		<aside>
		<content>
		<footer>

		添加音频：
		<audio src="" controls="controls"></audio>
		添加视频：
		<video src=""></video>
		

		<canvas></canvas>

	-->
	<header><h1>HTML5新标签</h1></header>
	<nav>
		<ul>
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
		</ul>
	</nav>
	
	<content>
		<section>
			<header>
				<p>文章标题</p>
			</header>
			<footer>
				<p>文章结尾</p>
			</footer>
		</section>
	</content>

	<aside>
		相关内容
	</aside>

	<footer>
		版权声明
	</footer>
	<video id="myV" width="900" height="800" > 
		<source src="../audio/p.mp4" type="video/mp4"/>
	不支持
	</video>
		<button onclick="playpause()">播放/暂停</button>

	<canvas id="myC" width="860" height="600">
		
	</canvas>

	<!-- <audio src="../audio/洲崎綾 - ドラマチックマーケットライド.mp3" controls="controls">音频</audio> -->

	<!-- 最好把script放到HTML的最后 -->
	<script src="../js/jquery-3.5.1.js"></script>  
	<script type="text/javascript">
		// var v=$("#myV");
		var v = document.getElementById("myV");
		function playpause(){
			if (v.paused) 
				v.play();
			else
				v.pause();

		}
		function draw(event){
			var canvas = document.getElementById("myC");
			var pen = canvas.getContext("2d");
			pen.moveTo(50,50);
			pen.lineTo(300,300);
			pen.lineWidth = 5;
			pen.strokeStyle = "red";
			pen.stroke();
		}
		window.onload = draw();
	</script>
</body>
</html>