题目概览
- 怎样在页面上实现一个圆形的可点击区域?
- 什么是FOUC?你是如何避免FOUC的?
- "use strict"是什么?
题目解答
怎样在页面上实现一个圆形的可点击区域?
-
map+area:效果
<html><body> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </body></html>
-
利用
border-radius: 50%
:用一个div,给div添加圆角属性50,在div上添加点击事件div { overflow: hidden; 50px; height: 50px; background: red; border-radius: 50%; }
-
用canvas画布,弧线画圆,在canvas上监听点击事件
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke();
-
利用 SVG 作出圆形,然后添加点击事件
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onclick="alert(3)"/> </svg>
什么是FOUC?你是如何避免FOUC的?
-
现象:如果使用import方法对css进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象,以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC
-
原因:当样式表晚于结构性html 加载,当加载到此样式表时,页面将停止之前的渲染。此样式表被下载和解析后,将重新渲染页面,也就出现了短暂的花屏现象,下列可能会出现:
- 使用import方法导入样式表
- 将样式表放在页面底部
- 有几个样式表,放在html结构的不同位置
-
解决办法:使用link标签将样式表放在文档head中
"use strict"是什么?
-
含义:除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行
-
目的:
- 消除Javascript语法的一些不合理、不严谨之处,减少一些怪异行为
- 消除代码运行的一些不安全之处,保证代码运行的安全;
- 提高编译器效率,增加运行速度;
- 为未来新版本的Javascript做好铺垫
-
进入标志:
"use strict"; //老版本的浏览器会把它当作一行普通字符串,加以忽略。
-
如何调用:
-
针对整个脚本文件:将"use strict"放在脚本文件的第一行,则整个脚本都将以"严格模式"运行。如果这行语句不在第一行,则无效,整个脚本以"正常模式"运行。如果不同模式的代码文件合并成一个文件,这一点需要特别意。(严格地说,只要前面不是产生实际运行结果的语句,"use strict"可以不在第一行,比如直接跟在一个空的分号后面。)
<script> "use strict"; console.log("这是严格模式。"); </script>
-
针对单个函数:将"use strict"放在函数体的第一行,则整个函数以"严格模式"运行
function strict(){ "use strict"; return "这是严格模式。" }
-
脚本文件的变通写法:因为第一种调用方法不利于文件合并,所以更好的做法是,借用第二种方法,将整个脚本文件放在一个立即执行的匿名函数之中
(function (){ "use strict"; // some code here })();
-
-
语法和行为改变
-
不允许使用未声明的变量
"use strict"; x = 3.14; // 报错 (x 未定义) x = {p1:10, p2:20}; // 报错 (x 未定义:对象也是一个变量)
-
不允许删除变量或对象
"use strict"; var x = 3.14; delete x; // 报错
-
不允许删除函数
"use strict"; function x(p1, p2) {}; delete x; // 报错
-
不允许变量重名
"use strict"; function x(p1, p1) {}; // 报错
-
不允许使用八进制
"use strict"; var x = 010; // 报错
-
不允许使用转义字符
"use strict"; var x = 10; // 报错
-
不允许对只读属性赋值
"use strict"; var obj = {}; Object.defineProperty(obj, "x", {value:0, writable:false}); obj.x = 3.14; // 报错
-
不允许对一个使用getter方法读取的属性进行赋值
"use strict"; delete Object.prototype; // 报错
-
变量名不能使用 "eval" 字符串
"use strict"; var eval = 3.14; // 报错
-
变量名不能使用 "arguments" 字符串
"use strict"; var arguments = 3.14; // 报错
-
不允许使用
with
语句"use strict"; with (Math){x = cos(2)}; // 报错
-
由于一些安全原因,在作用域 eval() 创建的变量不能被调用
"use strict"; eval ("var x = 2"); alert (x); // 报错
-
禁止this关键字指向全局对象
function f(){ return !this; } // 返回false,因为"this"指向全局对象,"!this"就是false function f(){ "use strict"; return !this; } // 返回true,因为严格模式下,this的值为undefined,所以"!this"为true。 function f(){ "use strict"; this.a = 1; }; f();// 报错,this未定义
-
保留关键字:
implements
、interface
、let
、package
、private
、protected
、public
、static
、yield
"use strict"; var public = 1500; // 报错
-