JavaScript图形实例：平面镶嵌

Javascript综合应用小案例

按需求弄了一个取词以及标红的小应用。 先上demo ：/ 很多平时常用的东西，都用上了，所以拿出来说说。 一、代码 View Code 以上是所有js代码，比较长，下面将列举一些比较突出的点（望高人多多指点）。 二、代码分析 1.获取文本 getSelectionText: function(){ if(window.getSelection) { return window.getSelection().toString(); } else if(document.selection && { return; } return ''; } 这个在以前（JavaScript操控光标，你会么？）的文章里也说过，就不赘述了。 2.创建控制框 createBtn: function(evt){ var button = document.createElement("div"), //...csses= { "height" : "30px", "line-height" : "30px", "position": "absolute", "top": y + 10 + "px", "left": x + 10 + "px", "cursor": "pointer", "border": "1px solid #000", "background": "#EEE", "padding": "2px 8px", "border-radius": "3px" }; for(i in csses){

if(csses.hasOwnProperty(i)){ cssList += i + ":" + csses[i] + ";"; } } =cssList; button.innerHTML = "添加到关键词列表"; button.setAttribute("id", "btn"); //...} 这里有一点我想说说，在写js的时候，会经常涉及到对DOM对象style的处理，如果不想额外加入一个plugins.css之类的文件，可以像上面一样，将样式放置在一个对象中，然后利用for in将其写入，本来开始我用的是 obj.style[i] = csses[i]; 不知道为什么，在IE下报错了，后来便用cssText代替。 效果： 3.标红 //关键词标红 setRed: function(str){ var content = this._("article"), temp = '(' + str + ')'; reg = new RegExp(temp,'g'); content.innerHTML = , "$1"); } 这里主要就是正则表达式的事情了，正则的话，推荐两篇文章 ?一篇是司徒正美的，讲的比较全面，比较系统。点我链接过去→ ?一篇是30分钟搞定正则，这个讲说是对所有语言，JS的话正则这一块还不是特别完善和强大。点我链接过去→ 哈哈，相信用过正则的人不需要我来解释这个$1了吧，他的意思就是匹配到的第一个。 当然，删除标红和这个原理是差不多的。 //删除标红 rmRed: function(str){ var content = this._("article"), temp = "()"; reg = new RegExp(temp,'g i'); content.innerHTML = , str); }

《HTML CSS JavaScript网页制作案例教程》_教学大纲讲解

《HTML+CSS+JavaScript网页制作案例教程》课程教学大纲 （课程英文名称） 课程编号：201509210011 学分：5学分 学时：64学时（其中：讲课学时：45 上机学时： 19 ） 先修课程：计算机基础、计算机网络、计算机应用 后续课程：UI设计、 JavaScript网页特效 适用专业：信息及其计算机相关专业 开课部门：计算机系 一、课程的性质与目标 《HTML+CSS+JavaScript网页制作案例教程)》是面向计算机相关专业的一门专业基础课，涉及网页基础、HTML标记、CSS样式、网页布局、JavaScript 编程基础与事件处理等内容。通过本课程的学习，学生能够了解HTML、CSS及JavaScript语言的发展历史及未来方向，熟悉网页制作流程、掌握常见的网页布局效果、学会制作各种企业、门户、电商类网站。 二、课程的主要内容及基本要求 第一章网页那点事（2学时） [知识点] 认识网页 常见的互联网专业术语 Web标准 HTML简介 CSS简介 JavaScript简介 常用浏览器介绍 Dreamweaver 工具的使用

使用Dreamweaver创建第一个页面 [重点] Web标准 Dreamweaver工具的使用 [难点] Web标准 Dreamweaver工具创建第一个页面 [基本要求] 了解Web标准，明确HTML、CSS及JavaScript在其中的作用。 熟悉Dreamweaver工具的基本操作，能使用Dreamweaver创建简单的网页。第二章从零开始构建HTML页面（4学时） [相关案例] 【案例1】简单的网页： 【案例2】新闻页面： 【案例3】图文混排： [知识点] HTML文档基本格式

多边形的平面镶嵌

多边形的平面镶嵌 郝易 18号一、1.概念： 从数学的角度看，用不重叠摆放的多边形把平面的一部分完全覆盖用形状和大小完全相同的一种或几种平面图形进行拼接，彼此之间不留空隙、不重叠地铺成一片，这就是平面图形的密铺；通常把这类问题叫做用多边形的平面镶嵌。 2.正n边形的镶嵌： 可找出规律：正n边形，内角和是（n-2）*180度，一个内角的度数是（n-2）*180÷n度。若（n-2）*180÷n能整除360，那么它就能来进行镶嵌，若不能，则不能用其进行镶嵌。 由此可以看出，只有正三角形、正方形、正六边形这三个正n边 形可以进行镶嵌。

二、三角形的平面镶嵌 因为三边形四个角和为 180度。所以只要把 不同的角往一个点 凑，这样两个就可以进行 平面镶嵌。 三、四边形的平面镶嵌 因为四边形四个角和为 360度。所以只要把 不同的角往一个点 凑，就可以进行 平面镶嵌。 四、五边形的平面镶嵌 设在一个顶点处，有n个角。若n > = 4 ，4 * 108 > 360 ，不能平面镶嵌。 若n < 4 ，3 * 108 < 360 ，不能平面镶嵌。 由此得出：五边形不能平面镶嵌。 五、六边形的平面镶嵌 正六边形一个角的度数为120度。120\360， 所以正六边形可以平面镶嵌，如图：

对边相等的六边形也可以平面镶嵌： 六、两种正多边形的平面镶嵌 ①正三角形和正方形 设需要用正三角形m个，正方形n个 60m+90n=360 2m+3n=12 m=(12-3n)/2 m=3 n =2 ②正三角形和正六边形 设需要用正三角形m个，正六边形n个60m+120n=360 m+2n=6

数学探究活动课《平面图形的镶嵌》教案

《平面图形的镶嵌》探究活动课 一、探究课题 《平面图形的镶嵌》 二、探究背景 《平面图形的镶嵌》是在华师大版七（下）教材中以数学活动的形式呈现的。课标中已将综合实践活动作为数学学习的一个重要组成部分。“综合与实践”是一类以问题为载体，学生主动参与的学习活动．学生在教师的指导下，将所学过的知识有机地结合，增强对知识的理解；注意与实际问题有机地结合，进一步获得数学活动的经验，增强应用意识。 三、教材分析 （一）学习目标分析： 本课是在信息环境、资源环境中让学生通过实例认识图形的镶嵌，理解构成镶嵌的条件，在发现只用正三角形、正四边形、正六边形可以镶嵌的基础上，上升到任意三角形、四边形可以镶嵌平面，再将图形的镶嵌知识由平面拓展到空间。通过学生思考，相互讨论，动手操作，丰富学生对镶嵌的认识，提高动手能力，发展空间观念，增强审美意识。 （二）资源环境分析： 现代信息技术及各种有效的资源既能调动学生思维的主观能动性，培养其创新精神，又能使学生活跃思路，多角度、全方位的思考问题。为此，我构建了图形镶嵌的图片资源、拼图动画资源、现场实物操作资源等环境。在思考、操作、欣赏与提高各板块的活动中，充分利用现代信息技术让学生欣赏图形的镶嵌、感受到图形镶嵌的魅力；在合作学习、快乐体验中达到学习目标。 整个活动过程中学生积极性很高，最后学生在欣赏图片中，将图形的镶嵌知识由平面拓展到空间，从而达到了活动的高潮。 （三）学生学习心理分析： 我所面对的教学对象是八年级学生，他们思维活跃、求知欲强，对事情有自己的看法，他们的学习在很大的程度上受着兴趣、情感的支配。信息技术的运用这对他们来说是一种新异刺激，可使其充分集中注意力，更激发他们参与活动的内在动机。

《HTML+CSS+JavaScript网页制作案例教程》课程教学

传智播客 《HTML+CSS+JavaScript网页制作案例教程》 教学设计 课程名称：HTML+CSS+JavaScript网页制作案例教程 授课年级：2015年级 授课学期：2015学年第二学期 教师姓名：某某老师

201 年月日 课题名称第5章列表与超链接 计划 课时 6课时 内容分析通过第4章盒子模型的学习，已经很容易对网页做一个简单的结构划分。但是一个网站由多个网页构成，每个网页上都有大量的信息，要想使网页中的信息排列有序，条理清晰，并且网页与网页之间有一定的联系，就需要使用列表和超链接。本章将对列表标记、超链接标记以及CSS控制列表和超链接的样式进行详细讲解。 教学目标●掌握无序、有序及定义列表的使用，可以制作常见的网页列表模块； ●掌握超链接标记的使用，能够使用超链接定义网页元素； ●掌握CSS伪类，会使用CSS伪类实现超链接特效； 重点及措施 教学重点：无序列表、有序列表、定义列表、超链接、链接伪类、锚点链接。 措施：通过上机操作加强学习和补充案例进行巩固。 难点及措施 教学难点：有序列表、定义列表、链接伪类。 措施：通过上机操作加强学习和补充案例进行巩固。 教学方式教学采用教师课堂讲授为主，使用教学PPT讲解。 教学过程 第一课时 （制作“精美电商悬浮框”，讲解无序列表、有序列表） 复习上节课内容 在讲解本节内容前，抛出以下问题让学生回答，以复习第四章“CSS盒子模型”的相关知识。 1、一个盒子的宽（width）和高（height）均为300px，左内边距为30px， 同时盒子有3px的边框，请问这个盒子的总宽度是多少？（） A、333px B、366px C、336px D、363px

数学综合实践课《平面图形的镶嵌》教案

数学综合实践课《平面图形的镶嵌》教案 徐州市西苑中学解春玲一、教学课题 《平面图形的镶嵌》 二、教案背景 《平面图形的镶嵌》是在苏科版八上教材中以数学活动的形式呈现的。课标中已将综合实践活动作为数学学习的一个重要组成部分。“综合与实践”是一类以问题为载体，学生主动参与的学习活动．学生在教师的指导下，将所学过的知识有机地结合，增强对知识的理解；注意与实际问题有机地结合，进一步获得数学活动的经验，增强应用意识。 三、教材分析 （一）学习目标分析： 本课是在信息环境、资源环境中让学生通过实例认识图形的镶嵌，理解构成镶嵌的条件，在发现只用正三角形、正四边形、正六边形可以镶嵌的基础上，上升到任意三角形、四边形可以镶嵌平面，再将图形的镶嵌知识由平面拓展到空间。通过学生思考，相互讨论，动手操作，丰富学生对镶嵌的认识，提高动手能力，发展空间观念，增强审美意识。 （二）资源环境分析： 现代信息技术及各种有效的资源既能调动学生思维的主观能动性，培养其创新精神，又能使学生活跃思路，多角度、全方位的思考问题。为此，我构建了图形镶嵌的图片资源、拼图动画资源、现场实物操作资源等环境。在思考、操作、欣赏与提高各板块的活动中，充分利用现代信息技术让学生欣赏图形的镶嵌、感受到图形镶嵌的魅力；在合作学习、快乐体验中达到学习目标。 整个活动过程中学生积极性很高，最后学生在欣赏图片中，将图形的镶嵌知识由平面拓展到空间，从而达到了活动的高潮。 （三）学生学习心理分析： 我所面对的教学对象是八年级学生，他们思维活跃、求知欲强，对事情有自己的看法，他们的学习在很大的程度上受着兴趣、情感的支配。信息技术的运用

这对他们来说是一种新异刺激，可使其充分集中注意力，更激发他们参与活动的内在动机。 苏霍姆林斯基说：“儿童是用形象、色彩、声音来思维的”。从儿童心理学角度看，儿童具有直观、形象的思维特征。所以我同时又在信息环境的氛围中采用具体、形象的教学形式，学生在信息技术的引导下清楚的了解到图形镶嵌的实质。学生在整个活动中思维活跃，从接受灌输的被动地位转变为发现知识、理解知识掌握知识的主体地位，构成了探究式的学习氛围。 四、教学方法 本课力求突出数学综合实践的特点，以问题为主线，以“图案欣赏——探究镶嵌——拓展应用”的模式展开教学，学生在动手操作、独立思考、小组合作的过程中积累数学经验，解决实际问题。 五、教学过程 （一）情境创设： 课件展示拼图的图片。 【本课开始展示拼图的图片，勾起学生美好回忆，拉近生活和数学的距离，再辅以上述问题，激起学生数学学习的兴趣。】 课件上展示生活中瓷砖的图片。

JavaScript图形实例：蝴蝶结图案

JavaScript图形实例：蝴蝶结图案 1．长短瓣相间的蝴蝶结 设定曲线的坐标方程为： b=r*(1+cos(n*θ)/4)*(1+sin(2*n*θ)); x1=b*cos(θ); x2=b*cos(θ+π/8); y1=b*Math.sin(θ); y2=b*Math.sin(θ+π/8); （0≤θ≤2π，2≤n≤5） 在0~2π区间中从θ=0开始，每隔π/360按曲线方程求得两个点的坐标值(x1,y1)和(x2,y2)，并将求得的两点连成一条线段，这样，可以得到一个长短瓣相间的蝴蝶结图案。 编写如下的HTML代码。