将Javascript从应用于整个文档设置为仅div

我是JavaScript新手，我发现了一个代码笔，它可以让我坦白自己爱上了JavaScript。javascript代码适用于整个正文，因此整个文档都有自白。相反，我希望confettis效果仅适用于我的div（confettis部分）。我还是这门语言的初学者，因此不知道如何按照我想要的方式修改它。谢谢你的帮助

<div class="confettis-section">
</div>

---

我更改了HTML和JS

<div class="row">
  <div class="col m6"style="width:50%; height: 30vh; border: 1px solid black">
    <h4>Hi</h4>
    <h4>Hi</h4>
    <h4>Hi</h4>
</div>
  <div class="col m6" id="area">
    <h4>Hi</h4>
    <h4>Hi</h4>
    <h4>Hi</h4>
  </div>
</div>

你好
你好
你好
你好
你好
你好

我将第115行改为：

var container = document.getElementById('area');
  container.style.position = 'fixed';
  container.style.top      = '0';
  container.style.left     = '50vw'; //<-- start from half the screen width
  container.style.width    = '50%';//<-- width of container itself is 50% of screen
  container.style.height   = '30vh';//<--height of area is 30/100 of screen height
  container.style.overflow = 'visible';
  container.style.zIndex   = '9999';
  container.style.border = '1px solid black';//<--setting border here 

var container=document.getElementById（'area'）；
container.style.position='fixed'；
container.style.top='0'；
container.style.left='50vw'// 这是您更新的代码笔链接：


“严格使用”；
//如果设置为true，则用户必须按
//上下左右左右A B
//触发带有随机颜色主题的五彩纸屑。
//否则，五彩纸屑会不断掉落。
var onlyOnKonami=false；
$（函数（）{
//全球的
变量$window=$（“#区域”），
random=数学，random，
cos=Math.cos，
sin=Math.sin，
PI=Math.PI，
PI2=PI*2，
计时器=未定义，
帧=未定义，
五彩纸屑=[]；
//背景
var konami=[38,38,40,40,37,39,37,39,66,65]，
指针=0；
var粒子=150，
排列=40，
sizeMin=3，
sizeMax=12-sizeMin，
偏心率=10，
偏差=100，
dxThetaMin=-.1，
dx thetamax=-dx thetamin-dx thetamin，
dyMin=.13，
dyMax=.18，
dThetaMin=.4，
dThetaMax=.7-dThetaMin；
var colorThemes=[
函数（）{
返回颜色（200*random（）| 0，200*random（）| 0，200*random（）| 0）；
},
函数（）{
var black=200*random（）| 0；
返回颜色（200，黑色，黑色）；
},
函数（）{
var black=200*random（）| 0；
返回颜色（黑色、200、黑色）；
},
函数（）{
var black=200*random（）| 0；
返回颜色（黑色，黑色，200）；
},
函数（）{
返回颜色（200100200*random（）| 0）；
},
函数（）{
返回颜色（200*random（）| 0、200、200）；
},
函数（）{
var black=256*random（）| 0；
返回颜色（黑色、黑色、黑色）；
},
函数（）{
返回颜色主题[random（）<.5？1:2]（）；
},
函数（）{
返回颜色主题[random（）<.5？3:5]（）；
},
函数（）{
返回颜色主题[random（）<.5？2:4]（）；
}
];
功能色（r、g、b）{
返回'rgb（'+r+'、'+g+'、'+b+'）；
}
//余弦插值
函数插值（a、b、t）{
返回（1-cos（PI*t））/2*（b-a）+a；
}
//在[0,1]上创建1D最大泊松圆盘
var半径=1/偏心率，
半径2=半径+半径；
函数createPoisson（）{
//域是仍可从中拾取的点集
//D=并{[D_i，D_i+1]| i是偶数}
变量域=[半径，1-半径]，
测量值=1-半径2，
样条曲线=[0,1]；
while（度量）{
var dart=measure*random（），
i、 l，间隔，a，b，c，d；
//找到飞镖所在的地方
对于（i=0，l=domain.length，measure=0；i0；i-=2）{
l=i-1，a=domain[l]，b=domain[i]；
//c---d c---d什么也不做
//c---d c---d向内部移动
//c-------d删除间隔
//c--d分裂间隔
//a---b
如果（a>=c&&ad）域[l]=d；//移动内部（左例）
else域。拼接（l，2）；//删除间隔
否则如果（ac）
如果（b=this.splineX[j]）i=j++；
var rho=插值(
这个,斯普林尼,，
这个.splineY[j],，
（phi-this.splineX[i]）/（this.splineX[j]-this.splineX[i]）
);
phi*=PI2；
outerStyle.left=this.x+rho*cos（phi）+'px'；
outerStyle.top=this.y+rho*sin（phi）+“px”；
innerStyle.transform=this.axis+this.theta+deg）；
返回此.y>高度+偏差；
};
}
函数poof（）{
如果（！帧）{
//附加容器
文件.正文.附件（容器）；
//添加五彩纸屑
var theme=colorThemes[onlyOnKonami？colorThemes.length*random（）| 0:0]，
计数=0；
（功能addConfetto（）{
if（仅限yonkonami&&++count>粒子）
返回计时器=未定义；
var confetto=新的confetto（主题）；
五彩纸屑。推（五彩纸屑）；
容器。附属物（忏悔室。外部）；
定时器=设置超时（addConfetto，spread*random（））；
})(0);
//开始循环
var prev=未定义；
requestAnimationFrame（函数循环（时间戳）{
var delta=prev？时间戳-prev:0；
prev=时间戳；
var height=$window.height（）；
对于（变量i=五彩纸屑长度-1；i>=0；--i）{
if（五彩纸屑[i].更新（高度，增量））{
容器.removeChild（五彩纸屑[i].外部）；
五彩纸屑.拼接（i，1）；
}
}
if（计时器| |五彩纸屑长度）
返回帧=请求动画帧（循环）；
//清理
文件.正文.删除文件（容器）；
帧=未定义；
});
}
}
$window.keydown（函数（事件）{
指针=konami[pointer]==event.which？
指针+1：
+（event.which==konami[0]）；
if（指针===konami.length）{
指针=0；
poof（）；
}
});
如果（！onlyOnKonami）poof