前端每日知识3+1_第18天-CSDN博客

本文链接：https://blog.csdn.net/qq_44665456/article/details/127264977

第18天 (2022-10-08)

HTML：

1、用canvas画布，弧线画圆，在canvas上监听点击事件
2、用一个div,给div添加圆角属性50，在div上添加点击事件
3、button 上添加圆角属性
4、a标签添加圆角属性

@github-linong
github-linong commented May 22, 2019
这个问题也可以理解为做一个圆。方案为两种，真的圆和模拟圆

map+area , demo
圆角属性（楼上的2.3.4）
判断圆心点和单击点的距离是不是在半径中。（楼上1方案）
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>

// 实现如下：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		div {
			width: 100px;
			height: 100px;
			color: aqua;
			border: 1px solid pink;
			border-radius: 50px;
			display: inline-block;
		}
	</style>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

CSS：

FOUC 即 Flash of Unstyled Content，是指页面一开始以样式 A（或无样式）的渲染，突然变成样式B。
原因是样式表的晚于 HTML 加载导致页面重新进行绘制。

通过 @import 方式导入样式表
style 标签在 body 中
解决方法：把 link 标签将样式放在 head 中

参考文档:什么是 FOUC？如何避免 FOUC？

参考文档:什么是 FOUC？如何避免 FOUC？

JS：

严格模式，其实就是更严格了

设立"严格模式"的目的，主要有以下几个：
　　- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
　　- 消除代码运行的一些不安全之处，保证代码运行的安全；
　　- 提高编译器效率，增加运行速度；
　　- 为未来新版本的Javascript做好铺垫。

我放几个常见的吧，详情可以去下面的文章中看

禁止this关键字指向全局对象
禁止在函数内部遍历调用栈
全局变量必须显式声明
arguments不再追踪参数的变化
(function(){
	"use strict"
	b=1//Uncaught ReferenceError: b is not defined
})()

参考文章