校内综合实训（一）

最新推荐文章于 2021-06-29 13:17:41 发布

VinegarQAQ

最新推荐文章于 2021-06-29 13:17:41 发布

阅读量534

点赞数

本文链接：https://blog.csdn.net/Lum_0813/article/details/92759555

版权

一、实习目的及要求

1、掌握微信小程序项目环境搭建;

2、掌握微信小程序项目界面设计编写;;

3、掌握微信小程序项目业务逻辑处理;

4、掌握MVVM设计模式框架开发;

5、通过本课程的学习，培养学生观察、分析、解决问题的能力；

6、培养学生严肃认真、实事求是的良好作风。

二、教师指导内容

1、辅导学生学习html,css,js基础知识；

2、指导学生运用html,css,js开展第一天项目实训；

三、作业以及完成情况

1、通过js获取输入框中的vlaue值


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Day01 作业</title>
<script >
	function f(){
		var content = document.getElementById("text");
		alert(content.value);
	}
</script>

</head>
<body bgcolor="#E6E6FA">
	<h2>好好学习</h2>
	<p><font color="708090">天天向上</font></p>
	<input id="text"/>
	<input type="button" value="提交" onclick="f()">
</body>

</html>

2、点击某个元素，更改该元素的样式

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>点击某个元素，更改该元素的样式</title>
<script>
			function getElementsByClassName(clsName, tagName) {
			var ClassElements = [];
			selElements = document.getElementsByTagName(tagName);
			
			for (var i = 0; i < selElements.length; i++) {
			if (selElements[i].className == clsName) {
			ClassElements[ClassElements.length] = selElements[i];
			}
			}
			return ClassElements;
			}
			
			//通过改变元素class名达到间接改变背景样式
			function onFirstMenuChangeBg(e) {
			//先清除已经改变的元素背景样式
			var getElements = getElementsByClassName('firstLevelMenuClassHover', 'td');
			for (var i = 0; i < getElements.length; i++) {
			getElements[i].className = "firstLevelMenuClass";
			}
			//设置鼠标点击元素背景样式
			e.className = "firstLevelMenuClassHover";
			}
</script>
</head>
<body>    
	<td class="firstLevelMenuClass" id="firstLevelMenu0"  onclick="onFirstMenuChangeBg(this);" >
	<a href='#'>test0</a>
	</td>
	<td class="firstLevelMenuClass" id="firstLevelMenu1"  onclick="onFirstMenuChangeBg(this);" >
	<a href='#'>test1</a>
	</td>
	
	<td class="firstLevelMenuClass" id="firstLevelMenu2"  onclick="onFirstMenuChangeBg(this);" >
	<a href='#'>test2</a>

</body>
</html>

点击前

点击后

3、互换变量值

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Examples</title>
<script>
	function change(){
		var a=8;
		var b=10;
		a=b-a; /**a=2,b=10**/
		b=b-a; /**a=2,b=8**/
		a=a+b;/**a=10,b=8**/
	}
	document.write("a=10,b=8,交换成功！");
</script>
</head>
<body>
    
</body>
</html>

4、乘法口诀

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>九九乘法表</title>
<style type="text/css">
	table{
		width:600px;
		border-collapse: collapse;
	}
	table th{
		border:pink 1px solid ;
	}
</style>
</head>

<body align="center" bgcolor="F0F8FF">
	<h3>九九乘法表</h3>
	<script type="text/javascript">
		//生成表格，在每个格子内部输出
		document.write("<table>");
		// 运用2层FOR循环来进行
		for (var a=1; a<=9; a++)
		{
			document.write("<tr>");
			for (var b=1; b<=a; b++)
			{
				document.write("<th>"+b+"*"+a+"="+b*a+"</th>");
			}
		}
		document.write("</table>");
	</script>
    
</body>
</html>

四、心得感受

感受到了前端的乐趣。

VinegarQAQ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
校内综合实训（一）

一、实习目的及要求1、掌握微信小程序项目环境搭建;2、掌握微信小程序项目界面设计编写;;3、掌握微信小程序项目业务逻辑处理;4、掌握MVVM设计模式框架开发;5、通过本课程的学习，培养学生观察、分析、解决问题的能力；6、培养学生严肃认真、实事求是的良好作风。二、教师指导内容1、辅导学生学习html,css,js基础知识；2、指导学生运用html,css,js开展...
复制链接

扫一扫