您的位置：首页 > Web前端 > JavaScript

如何用简易的HTML+简易的JS给你的头像戴一顶简易的圣诞帽

2020-02-02 10:47 961 查看

如何用简易的HTML+简易的JS给你的头像戴一顶简易的圣诞帽

  • 马上圣诞节了，我相信很多同学的头像已经戴上了圣诞帽

  • 我之前也打算用PS给我的头像加一顶圣诞帽，但是想了想要不就用最简单的HTML给头像加上一顶吧

  • 其实是我自己不会PS，哈哈哈

  • 废话不多说，效果图

  • 代码

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>圣诞帽</title>
<style>
*{
padding:0;
margin:0;
font-weight:bold;
}
#hat{
margin:0 auto;
color:red;
text-align:center;
height:160px;				/* 设置高度 */
width:160px;				/* 设置宽度 */
transform:rotate(-15deg);	/* 设置旋转角度 */
position:relative;
top:220px;					/* 调节Y坐标 */
left:-80px;					/* 调节X坐标 */
}
.header{
height:640px;				/* 给你头像设置高度 */
width:640px;				/* 给你头像设置宽度 */
margin:0 auto;

}
</style>
</head>
<body>
<div id="hat" >
</div>
<div class="header">
<img src="header.jpg" />  <!-- 这里是图片的路径 -->
</div>

</body>
<script>
window.onload = function(){
var Hat = document.getElementById('hat');		//拿到hat
var line = Hat.offsetHeight / 20;				//拿到高度 并计算出需要多少行
var str = "";
for(var i = 0; i < line; i++){					//画帽子
for(var j = 0; j < i; j++){
str += '10';
//Hat.innerHTML += '10';
}
if(i > line - 2 || i == 1){
Hat.innerHTML += '<p style="color:white;">' + str + '</p>';
}else{
Hat.innerHTML += '<p>' + str + '</p>';
}
str = '';
}

};
</script>
</html>

  • 如果你觉得好玩，又不想自己再写一份

  • 那么你用我的只需要改img标签的src 以及自己挪动一下帽子的位置即可（在css里面的hat改就OK了）

  • 点赞 1
  • 收藏
  • 分享
  • 文章举报
南柯33 发布了3 篇原创文章 · 获赞 2 · 访问量 824 私信 关注
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航