2020-12-31

最新推荐文章于 2021-01-01 20:14:38 发布
最新推荐文章于 2021-01-01 20:14:38 发布
阅读量430 收藏
点赞数
原文链接：https://blog.csdn.net/qq_43624878/article/details/111837402?depth_1-
版权

聊聊页面中的锚点效果和回到顶部

2020-12-28 11:20:27 8077 收藏 4
分类专栏： 高效前端：前端性能优化实践 文章标签： css3 javascript a链接与锚点 回到顶部效果 id
最后发布:2020-12-28 11:20:27 首次发布:2020-12-28 11:20:27
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接： https://blog.csdn.net/qq_43624878/article/details/111837402
版权

页面中的锚点各位想必都“了如指掌”，其基于a链接“同页面跳转”和“id属性标签的历史问题”。

可能有人不知道的是：HTML中的“id”非常神奇：id属性的元素不仅可以在js中直接使用，而不必先获取；还可以和url相关联。
直接用id访问是旧版本js遗留下来的特性，浏览器会建立window实例的id同名属性，这是为了兼容旧的网页。但不要依赖这个特性，在含有特殊字符或者和window实例的其他属性有冲突时可能失效。

我们都知道，锚点应该这样用：

<a href="这里写#号+id名">去这里</a>

<div id=“上面a中引用的id名”>我是目的地</div>

  • 1
  • 2
  • 3

如此便可。

但是这里面有两个小问题：

  1. 使用锚点后url中也会带有href中的字符串（#号+id名）
  2. 因为是类似跳转方式，所以过程非常生硬

比如有的网页中有这样的效果：点击侧边栏或顶部某一个div后整个页面滑动到相应的位置，就像这样——
js点击滚动对应区域

以前来说用锚点肯定是不现实的，所以我们需要找到一个适合的API。

按照需求，即点击某个div后对应部分的顶部要“刚好”到窗口可视区的顶部！这里面我们要考虑的一定是“如何算div的顶部在窗口可视区顶部”。
js提供了一个有趣的API可以完成我们的需求 —— getBoundingClient() ，它相当于是封装了client API并把它应用在普通元素上，通过它我们能得到此元素距离可视区顶部、左边的距离，比如：
getBoundingClient-API

并且根据上一篇文章(点击阅读文章)中所提，document下的scrollTop API可为我们提供文档流（页面整体区域）向上滚动了多少距离。

笔者在这里再次提醒各位要区分js中inner系、page系、client系、offset系、outer系、screen系…事件，他们的含义各不相同。比如常说的offsetTop/Left，是距离上一级父元素的上/左边距，通常用 if(dom.parentElement) 做累加求的是“距离文档流顶部的距离”，就不适用于此处。

将二者结合起来使用，就可以达到：若想要展示的区域在下方，就让文档流不断向上滚动，直到此区域滑动到可视区顶端；反之若想要展示的区域已经滑过，就让文档流不断向下滚动。

/**
	leftBtn：侧边栏中所有负责页面滚动的div，都有一个class属性为left-btn
	i：left-btn所属div的下标（第几个）
	.mao1/2/3：页面中负责“滑到顶部”的div，一般是某一个区域的小标题
*/
let leftBtn=document.querySelectorAll(".left-btn")

function gotoTop(i,top){
var timer=null;
leftBtn[i].onclick=function(){
let scrollTop=document.body.scrollTop ||document.documentElement.scrollTop || window.pageYOffset
// 若目标位置在当前位置上方
if(scrollTop>top){
clearInterval(timer)
timer=null;
timer=setInterval(function(){
scrollTop=scrollTop-90<top?top:scrollTop-90;
document.body.scrollTop=document.documentElement.scrollTop=window.pageYOffset=scrollTop
if(scrollTop<=top){
clearInterval(timer);
timer=null;
}
},50)
// 目标位置在当前位置下方
}else if(scrollTop<top){
clearInterval(timer)
timer=null;
timer=setInterval(function(){
scrollTop=scrollTop+90>top?top:scrollTop+90;
document.body.scrollTop=document.documentElement.scrollTop=window.pageYOffset=scrollTop
if(scrollTop>=top){
clearInterval(timer);
timer=null;
}
},50)
}
}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

使用如：

let one_top=document.querySelector(".mao1").getBoundingClientRect().top
let two_top=document.querySelector(".mao2").getBoundingClientRect().top
let thr_top=document.querySelector(".mao3").getBoundingClientRect().top
gotoTop(0,one_top);
gotoTop(1,two_top);
gotoTop(2,thr_top);

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

这样就能达到上面展示的效果了。

这里面需要注意的是：setInterval() 定时器的清除！
如果上方代码去掉第14、15、26、27行，则页面滚动行为会发生错误。看上去似乎是clearInterval失效了！其实这个问题本身是由于js定时器特性产生的。clearInterval是根据定时器本身的标识来进行清除的，如果在期间生成了新的interval，并覆盖timer标识对象，旧有的timer定时器对象并不会被停止和清除，而且标识也会丢失导致再也无法被清除，所以写定时器时一定要注意。建议在调用某个定时器任务的函数的时候，一定一开始就把之前的定时器先清除！

这个问题到这里似乎很好的解决了。但是上面代码毕竟还是太长了，而且里面要进行严格的判断以决定开始和结束（定时器的增加和删除），似乎稍有不妥。

不过别急，js更新了另一个神器 —— scrollIntoView() ，原先这个API的作用就是让指定的div的顶部跳到窗口可视区顶部（从效果上看类似锚点），但是更新后增加了配置参数：

dom.scrollIntoView({
	behavior:"smooth"   // ！
})

 
 

 
 
  • 1
  • 2
  • 3

这个参数的作用就是“平滑滚动”！不过由于新所以兼容性目前还不算很好，但是也无妨，毕竟它原本的作用还在，可以把新特性当做“只对少数用户更新的体验”。

说完了锚点效果，来说说页面中普遍存在的“回到顶部”。

同样的，之前笔者做社团官网的时候就采用了控制scrollTop不断--的方法。现在看来太麻烦了，用上面提到的 scrollIntoView() API就可完成：
目前大部分官网/网站都采用了在页面顶部（左上角）放一张logo的形式。针对使用这种形式的网站，若是logo所在div不是采用 position:fixed; 的方式固定在顶部的话，我们可以将img外面包裹一层a标签，然后就可以在“回到顶部”按钮的事件中这么写：

document.links[0].scrollIntoView({
	behavior:"smooth"
})
//或者 直接定位图片
document.images[0].scrollIntoView({behavior:"smooth"})

 
 

 
 
  • 1
  • 2
  • 3
  • 4
  • 5

scrollIntoView

这里还要提到js中后来新加入的两个原生API：scrollTo（滚动到哪里） 和 scrollBy（滚动多少距离）。这里为啥提到这俩？因为scrillTo这个API可以在ie上使用！它被支持在window上，比如：回到顶部window.scrollTo(0,0);
但这里也只是提一句让各位有个印象，非要用在本文所提场景下则大可不必。

说到这，前几天惊奇的发现CSS中多了一个控制页面滚动的属性！（去年年底开始支持的）原生平滑滚动定位 —— scroll-behavior ，它有两个值：

  1. auto：初始值。啥也没有。
  2. smooth：作用在滚动容器元素上，可以让容器内的滚动变得平滑。

比如在笔者文章中多次出现的tab框切换，如果你只设置了父容器的 overflow:hidden; 而子元素采用了相对父元素定位的方式展示（display、opacity、visibility都不行，因为他们本质上都不是通过位置移动展示元素的），那么就可以在父容器上加上一行：scroll-behavior: smooth;

效果贼好，生动了许多！

还有上面说的“回到顶部”（和“锚点”），如果不想用js实现而且又不抗拒url后面的小小“#”的话，其实你可以这么实现：

/** css样式 */
html, body { scroll-behavior:smooth; }

 
 

 
 
  • 1
  • 2
<a href="#">返回顶部</a>

 
 

 
 
  • 1

包括上面的“锚点效果”也可以这么来~

perfect！

元旦将至，提前祝各位元旦快乐，溜了溜了~

行舟客 CSDN认证博客专家 ECMAScript 6 Node.js CSS
江湖人称“云小梦”。一个大前端路上还未“毕业”的“小学生”。爱好分享、执着探索、乐于开源；曾参与过中大型微信小程序项目前端开发，并主导过一些官网（原生）开发；着迷于vue、node、css以及原生js技术。热衷研究现有技术的成型创新应用。目前对前端AI和RTC感兴趣。开源且目前维护的有：微信小程序扩展组件库—— https://github.com/1314mxc/yunUI ，欢迎star！
腾讯位置服务开发应用征文大赛开启报名！大疆无人机等你来挑战！
12-28
如今与地图相关的位置服务已经成为开发者工具箱里的“标配”，不管是小程序开发、获取定位信息还是展示地图上的某个地点。现在分享你和腾讯位置服务有关的故事，可以是使用教程、案例分享、知识总结…大疆无人机、王者荣耀机器人多重好礼陪你跨年！
vue-router 页面跳转，返回到顶部的几种方式
胡聊前端的博客
12-24 274
标准答案： const router = new VueRouter({ routes, // 对于 页面跳转，全部都返 回到 页面 顶部。 scrollBehavior(to, from, savedPosition) { return { x: 0, y: 0 }; }, });

如上，简单解释一下，其实scrollBehavior这个api初衷应该是用于定位锚点的。也就是比如你的页面有一些<div id=“abc”></div>这种锚点，希望在跳转路由之后自动


  <textarea class="comment-content" name="comment_content" id="comment_content" placeholder="优质评论可以帮助作者获得更高权重" maxlength="1000"></textarea>
		<div class="comment-emoticon"><img class="comment-emoticon-img" data-url="https://csdnimg.cn/release/blogv2/dist/pc/img/" src="https://csdnimg.cn/release/blogv2/dist/pc/img/emoticon.png" alt="表情包"></div> 
  <span class="comment-emoticon-tip">插入表情</span>
  <div class="comment-emoticon-box">
    <div class="comment-emoticon-img-box">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:001.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/001.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:002.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/002.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:003.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/003.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:004.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/004.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:005.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/005.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:006.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/006.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:007.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/007.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:008.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/008.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:009.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/009.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:010.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/010.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:011.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/011.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:012.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/012.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:013.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/013.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:014.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/014.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:015.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/015.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:016.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/016.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:017.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/017.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:018.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/018.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:019.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/019.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:020.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/020.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:021.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/021.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:022.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/022.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:023.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/023.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:024.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/024.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:025.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/025.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:026.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/026.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:027.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/027.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:028.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/028.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:029.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/029.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:030.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/030.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:031.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/031.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:032.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/032.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:033.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/033.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:034.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/034.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:035.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/035.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:036.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/036.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:037.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/037.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:038.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/038.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:039.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/039.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:040.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/040.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:041.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/041.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:042.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/042.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:043.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/043.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:044.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/044.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:045.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/045.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:046.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/046.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:047.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/047.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:048.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/048.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:049.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/049.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:050.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/050.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:051.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/051.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:052.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/052.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:053.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/053.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:054.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/054.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:055.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/055.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:056.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/056.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:057.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/057.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:058.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/058.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:059.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/059.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:060.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/060.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:061.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/061.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:062.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/062.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:063.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/063.png">
        <img class="emoticon-monkey-img" data-emoticon="[face]monkey2:064.png[/face]" src="https://g.csdnimg.cn/static/face/monkey2/064.png">
    </div>
  </div>
  <div class="opt-box">
			<div id="ubbtools" class="add_code">
				<a href="#insertcode" code="code" target="_self"><i class="icon iconfont icon-daima"></i></a>
			</div>
			<input type="hidden" id="comment_replyId" name="comment_replyId">
			<input type="hidden" id="article_id" name="article_id" value="111837402">
			<input type="hidden" id="comment_userId" name="comment_userId" value="">
			<input type="hidden" id="commentId" name="commentId" value="">
			<div class="dropdown" id="myDrap">
				<a class="dropdown-face d-flex align-items-center" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
					<div class="txt-selected text-truncate">添加代码片</div>
					<svg class="icon d-block" width="200px" height="100.00px" viewBox="0 0 2048 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M597.33333292 298.666667h853.333334L1023.99999992 725.333333 597.33333292 298.666667z"></path></svg>
				</a>
				<ul class="dropdown-menu" id="commentCode" aria-labelledby="drop4">
					<li><a data-code="html">HTML/XML</a></li>
					<li><a data-code="objc">objective-c</a></li>
					<li><a data-code="ruby">Ruby</a></li>
					<li><a data-code="php">PHP</a></li>
					<li><a data-code="csharp">C</a></li>
					<li><a data-code="cpp">C++</a></li>
					<li><a data-code="javascript">JavaScript</a></li>
					<li><a data-code="python">Python</a></li>
					<li><a data-code="java">Java</a></li>
					<li><a data-code="css">CSS</a></li>
					<li><a data-code="sql">SQL</a></li>
					<li><a data-code="plain">其它</a></li>
				</ul>
			</div>
			<div class="right-box" id="rightBox" data-type="2">
						<span id="tip_comment" class="tip">还能输入<em>1000</em>个字符</span>
						<a data-report-click="{&quot;spm&quot;:&quot;3001.4374&quot;}" class="btn btn-sm btn-quick-comment" id="quickComment">“速评一下”</a>
						<a data-report-click="{&quot;mod&quot;:&quot;1582594662_003&quot;,&quot;spm&quot;:&quot;1001.2101.3001.4227&quot;,&quot;ab&quot;:&quot;new&quot;}"><input type="submit" class="btn btn-sm btn-comment" value="发表评论"></a>
			</div>
		</div>
	</form>
	<input type="button" class="bt-comment-show" value="评论">
</div>
<div class="comment-list-container" style="display: block;">
	<a id="comments"></a>
	<div class="comment-list-box"><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14419262" data-replyname="qq_31182873"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/qq_31182873"><img src="https://profile.csdnimg.cn/1/F/8/3_qq_31182873" username="qq_31182873" alt="qq_31182873" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a target="_blank" href="https://blog.csdn.net/qq_31182873"><span class="name ">qq_31182873</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment"><img src="//g.csdnimg.cn/static/face/monkey2/037.png" alt="表情包"></span><span class="date" title="2020-12-31 07:20:41">1小时前</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14419262"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14417039" data-replyname="kimol_justdo"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/kimol_justdo"><img src="https://profile.csdnimg.cn/E/6/2/3_kimol_justdo" username="kimol_justdo" alt="kimol_justdo" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">爱码士<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowWhite.png" title="爱码士"></a><a target="_blank" href="https://blog.csdn.net/kimol_justdo"><span class="name ">不正经的kimol君</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">写的不错，学习了，学习的道路上一起进步，也期待你的关注与支持！</span><span class="date" title="2020-12-30 21:34:13">11小时前</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14417039"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14416672" data-replyname="sinat_36521655"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/sinat_36521655"><img src="https://profile.csdnimg.cn/4/E/7/3_sinat_36521655" username="sinat_36521655" alt="sinat_36521655" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">码农<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowWhite.png" title="码农"></a><a target="_blank" href="https://blog.csdn.net/sinat_36521655"><span class="name ">随风丶逆风</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">原生就支持scrollIntoview吧？</span><span class="date" title="2020-12-30 21:10:01">12小时前</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14416672"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14411935" data-replyname="xun__xing"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/xun__xing"><img src="https://profile.csdnimg.cn/3/E/A/3_xun__xing" username="xun__xing" alt="xun__xing" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">码皇<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowWhite.png" title="码皇"></a><a target="_blank" href="https://blog.csdn.net/xun__xing"><span class="name ">xun__xing</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">这位仁兄高见，着实让人敬佩!</span><span class="date" title="2020-12-30 15:46:46">17小时前</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14411935"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14407579" data-replyname="qq_43958325"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/qq_43958325"><img src="https://profile.csdnimg.cn/5/F/D/3_qq_43958325" username="qq_43958325" alt="qq_43958325" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">爱码士<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowWhite.png" title="爱码士"></a><a target="_blank" href="https://blog.csdn.net/qq_43958325"><span class="name ">轻叹年华逝，</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">感谢大佬分享，很详细。</span><span class="date" title="2020-12-30 11:29:18">21小时前</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14407579"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14400114" data-replyname="qq_37924905"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/qq_37924905"><img src="https://profile.csdnimg.cn/F/F/E/3_qq_37924905" username="qq_37924905" alt="qq_37924905" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">爱码士<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowWhite.png" title="爱码士"></a><a target="_blank" href="https://blog.csdn.net/qq_37924905"><span class="name ">水巷石子</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">真棒！茅塞顿开的感觉。</span><span class="date" title="2020-12-29 18:32:38">昨天</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14400114"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14396108" data-replyname="qq_40542534"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/qq_40542534"><img src="https://profile.csdnimg.cn/D/D/E/3_qq_40542534" username="qq_40542534" alt="qq_40542534" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">爱码士<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowWhite.png" title="爱码士"></a><a target="_blank" href="https://blog.csdn.net/qq_40542534"><span class="name ">strive_day</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">文章很详细，小白的我都看的懂，学会了学会了，谢谢分享</span><span class="date" title="2020-12-29 15:11:33">昨天</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14396108"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14378045" data-replyname="Smell_rookie"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/Smell_rookie"><img src="https://profile.csdnimg.cn/0/2/E/3_smell_rookie" username="Smell_rookie" alt="Smell_rookie" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">爱码士<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowWhite.png" title="爱码士"></a><a target="_blank" href="https://blog.csdn.net/Smell_rookie"><span class="name ">小佑@小佐</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">感谢分享🙏</span><span class="date" title="2020-12-28 12:39:27">2天前</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14378045"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14377995" data-replyname="weixin_44705869"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/weixin_44705869"><img src="https://profile.csdnimg.cn/D/5/6/3_weixin_44705869" username="weixin_44705869" alt="weixin_44705869" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">爱码士<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowWhite.png" title="爱码士"></a><a target="_blank" href="https://blog.csdn.net/weixin_44705869"><span class="name ">俗人sir</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">66666</span><span class="date" title="2020-12-28 12:33:34">2天前</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14377995"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul><ul class="comment-list"><li class="comment-line-box d-flex" data-commentid="14377225" data-replyname="caoyuan666"><div style="display: flex;width: 100%;">      <a target="_blank" href="https://blog.csdn.net/caoyuan666"><img src="https://profile.csdnimg.cn/E/0/2/3_caoyuan666" username="caoyuan666" alt="caoyuan666" class="avatar"></a>        <div class="right-box ">          <div class="new-info-box clearfix">            <a class="comment-tag" target="_blank" href="https://blog.csdn.net/blogdevteam/article/details/103478461">码神<img class="comment-tag-img" src="https://csdnimg.cn/release/blogv2/dist/components/img/commentTagArrowWhite.png" title="码神"></a><a target="_blank" href="https://blog.csdn.net/caoyuan666"><span class="name ">努力改掉拖延症的小白</span></a><span class="colon">:</span><span class="floor-num"></span><span class="new-comment">不错，讲的很详细</span><span class="date" title="2020-12-28 11:23:34">2天前</span><span class="new-opt-floating"><a class="btn-bt  btn-reply" data-type="reply" data-flag="true">回复</a><a class="btn-bt  btn-report"><img class="btn-report-img" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentMore.png" title=""><span data-type="report" class="hide-report">举报</span></a></span></div><div class="comment-like " data-commentid="14377225"><img class="comment-like-img unclickImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentUnHeart.png" title="点赞"><img class="comment-like-img comment-like-img-hover" style="display:none" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><img class="comment-like-img clickedImg" src="https://csdnimg.cn/release/blogv2/dist/pc/img/commentActiveHeart.png" title="点赞"><span></span></div></div></div></li></ul></div>
	<div id="commentPage" class="pagination-box" style="display: block;"><div id="Paging_014333542151037193" class="ui-paging-container"><ul><li class="js-page-first js-page-action ui-pager ui-pager-disabled"></li><li class="js-page-prev js-page-action ui-pager ui-pager-disabled">&lt;</li><li data-page="1" class="ui-pager focus">1</li><li data-page="2" class="ui-pager">2</li><li class="js-page-next js-page-action ui-pager">&gt;</li><li class="js-page-last js-page-action ui-pager"></li></ul></div></div>
	
</div>
对单页面应用与Router的一些思考
CSDN文章已停止维护，后续文章会在 https://blog.hufeifei.cn 持续更新
04-27 1278
昨晚鑫哥到我宿舍聊天，聊了很多，从各自公司用的技术到杭州和深圳的房价，从后端技术到前端技术，一直聊到凌晨一点多，直到鑫哥被室友“驱逐”出去。中间有一段聊到公司用到的React，提到了单 页面应用和Router，觉得思路很好有必要写个笔记记下来。

最开始的网页

早期的网页都是一个个独立的html页面，通过a标签从这个页面跳转到另外一个页面。但是同一个网站中的两个页面很多内容都是相同的，比如页头…


A标签使用javascript:伪协议
weixin_30693683的博客
03-15 344
一、前言 今天，遇到一个别人挖的坑，问题是这样的。 做了一个列表页，可以筛选数据，有很多筛条件。主要是有input复选框和<a>标签两种。如图：

其中房价的筛选条件使用<a>标签，代码如下

1 <a href=“javascript:;” name=“price”>150元-300元</a>

用javasc…


聊聊 页面 中的 锚点 效果和 回到 顶部_ZZ100861122的博客
12-30
聊聊 页面 中的 锚点 效果和 回到 顶部 页面 中的 锚点各位想必都“了如指掌”,其基于a链接“同 页面跳转”和“id属性标签的历史问题”。 可能有人不知道的是:HTML 中的...
采微博_chen782079048的博客
12-28
聊聊 页面 中的 锚点 效果和 回到 顶部 go语言开发日志系统 Sqlserver 之 CROSS APPLY 与 OUTER APPLY <--> INNER/LEFT JOIN java简单滚动字幕 python编程开发之...
iphone开发笔记和技巧总结
05-28 7775
在iphone程序中实现截屏的一种方法： //导入头文件   #importQuartzCore/QuartzCore.h //将整个self.view大小的图层形式创建一张图片imageUIGraphicsBeginImageContext(self.view.bounds.size)； [self.view.layerrenderInContext：UIGraphicsGetCurren
史上最全Windows&Mac系统各种快捷键大全(1000余个)
weixin_34245082的博客
01-03 283
史上最全Windows&Mac系统各种快捷键大全(1000余个) Windows NT6.2+专用快捷键：Windows+F搜索文件或文件夹Windows+空格键切换语言或输入法(如果启用了多种语言或输入法)Windows+L锁定计算机或切换用户Windows+Tab在已打开应用程序间循环切换(开始屏幕)Windows+P选择演示显示模式Windows+E打开...
JMX学习笔记(一)_java_huashan的专栏
12-28
聊聊 页面 中的 锚点 效果和 回到 顶部 go语言开发日志系统 Sqlserver 之 CROSS APPLY 与 OUTER APPLY <--> INNER/LEFT JOIN java简单滚动字幕 python编程开发之...
JIRA-2-JIRA之高级搜索及分析报告_起舞的日子
12-28
聊聊 页面 中的 锚点 效果和 回到 顶部 go语言开发日志系统 Sqlserver 之 CROSS APPLY 与 OUTER APPLY <--> INNER/LEFT JOIN java简单滚动字幕 python编程开发之...
老男孩上海校区Python面试题
DominicJi的博客
11-08 5291
python面试题 第一章:python基础 数据类型： 1 字典: 1.1 现有字典 dict={‘a’:24，‘g’:52，‘i’:12，‘k’:33}请按字典 中的 value 值进行排序？ 1. sorted(dict.items()，key = lambda x:x[1])

1.2 说一下字典和json的区别？

  1. 字典是一种数据结构，json是一种数据的表现形式，字典的key值只要是…

微信小程序踩坑集合
weixin_30326515的博客
03-07 2931
1：官方工具：https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2：简易教程：https://mp.weixin.qq.com/debug/wxadoc/dev/?t=1476434677599 3：设计指南：https://mp.weixin.qq.com/debug/wxadoc/design/index.html 4：设计...
基于用户的协同过滤算法的电影推荐系统_行者小朱的博客
12-28
聊聊 页面 中的 锚点 效果和 回到 顶部 go语言开发日志系统 Sqlserver 之 CROSS APPLY 与 OUTER APPLY <--> INNER/LEFT JOIN java简单滚动字幕 python编程开发之...
最大数对差_打酱油的专栏
12-28
聊聊 页面 中的 锚点 效果和 回到 顶部 go语言开发日志系统 Sqlserver 之 CROSS APPLY 与 OUTER APPLY <--> INNER/LEFT JOIN java简单滚动字幕 python编程开发之...
Vue的完整学习笔记(介绍，基础语法，组件开发与通信，模块化概念，webpack，vue-cli，vue-router，vuex，axios)
小莫の咕哒君
07-20 611
前端发展和架构 先聊一下前端开发模式的发展。

静态页面

最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务端到客户端单向流通。开发人员也只关心页面的样式和内容即可。

异步刷新，操作DOM

1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言.
随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。
ajax盛行：

2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页


揭秘用小程序裂变给公众号涨粉10w的7个案例
xinmei6的博客
08-22 1万+

2017年1月9日，张小龙宣布小程序上线，到今天，陆陆续续出现了拼多多、摩拜单车、语音红包、头脑王者、心理测试等爆款小程序。今天来和大家聊聊如何利用好这巨大的流量洼地来给公众号涨粉。

一.带你飞

「带你飞」是一款订机票的服务号，以全球免费机票为诱饵，通过“集碎片”的玩法，引导用户转发小程序到微信群，获得抽奖机会。再以获取中奖通知为理由引导用户关注「公众号」

用户路径：

1.点击微…


©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页

博主有话说

江湖人称“云小梦”。一个大前端路上还未“毕业”的“小学生”。爱好分享、执着探索、乐于开源；曾参与过中大型微信小程序项目前端开发，并主导过一些官网（原生）开发；着迷于vue、node、css以及原生js技术。目前对RTC和前端AI感兴趣。

开源项目：
  1. 已开源（并维护） ☞ 微信小程序功能组件库 至 GitHub， 欢迎star！
  2. 已开源 ☞ 纯前端图片在线处理工具 至 GitHub，欢迎体验和star！
  3. 整理、总结并开源 ☞ CSS开发实践文档 至 GitHub，欢迎阅读和star！

我的QQ（非诚勿扰，仅供技术讨论，暂时不接项目，加好友请注明来自 CSDN）

最新评论

weixin_46315812
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
人民日报微博数据（2019-12-31至2020-12-31）13577条
01-30
微博id 微博正文 原始图片url 发布位置 发布时间 发布工具 点赞数 转发数 评论数
2020-02-12 19-55-31.mp4
02-12
结果演示
2020-05-31
GJJailang的博客
05-31 857
现在后端不做云计算，大数据，人工智能，底层程序员是不是只剩增删改查了。感觉自己混了两年混成运维了。
go每日新闻--2020-12-31
韩亚军的博客
01-01 1250
go中文网每日资讯--2020-12-31 一、#公众号：Go语言中文网 像跟踪分布式服务调用那样跟踪Go函数调用链 Go 经典入门系列 31：自定义错误 一篇文章带你了解Go语言基础之网络编程 二、#公众号：亚军进化史 Go每日信息--2020-12-30 三、#公众号：k8s技术圈 Kubernetes Service APIs 介绍 四、#公众号：五分选手 HTTPS 温故知新（六） —— TLS 中的 Extensions 六、#公众号：HHFCodeRv 当 Go struct 遇上
[2020-12-31]ogg 判断表是否开启附加日志的方法
m15217321304的博客
12-31 2125
--//创建测试表 SQL> alter table t3 add supplemental log data (all) columns ; Table altered. SQL> --//方法1 查看表的ddl语句 SQL> select dbms_metadata.get_ddl('TABLE','T3','POSTGRES') from dual; DBMS_METADATA.GET_DDL('TABLE','T3','POSTGRES') -----------
2020-04-10
m0_46591785的博客
04-10 2320
Super关键字 可以访问父类中定义的属性 可以调用父类中定义的成员方法 可以在子类构造器中调用父类构造器 .子类所有的构造器默认都访问父类中空参数的构造器 .子类一定会调用父类构造器（默认过程调用无参） //如果没有显示定义构造方法，Java编译阶段提供一个默认构造方法 //如果定义了自己的构造器，Java使用自己的构造器 //父类所有的构造器：子类必须实现它，子类默认当中一定使用到了父类的构造...
2020-03-14
东哥的博客
03-14 990
<% } %> 这个怎么改成随机
2020-06-07
lyyzxl的博客
06-07 2714
arcgis engine 实现栅格计算器，包括数学运算、逻辑运算、三角函数运算和代数运算。有大佬能帮一下吗？arcgis用10.2版本，环境用vs2015，代码加注释。求大佬。
2020-12-26
wubaoyu123的博客
12-26 3856
博客园Logo 首页 新闻 博问 专区 闪存 班级 代码改变世界 搜索 注册 登录 返回主页 哥不是小萝莉 博客园 首页 新随笔 联系 订阅 管理随笔 - 145 文章 - 0 评论 - 425 Kafka数据每5分钟同步到Hive 1.概述 最近有同学留言咨询Kafka数据落地到Hive的一些问题，今天笔者将为大家来介绍一种除Flink流批一体以外的方式（流批一体下次再单独写一篇给大家分享）。 2.内容 首先，我们简单来描述一下数据场景，比如有这样一个数据场景，有一批实时流数据实时写入Kafka，然后
2020-07-02
thinkoutresult的博客
07-02 1008
标题java String类型复杂json串如果解析 1.根据json串解析相应的成相应的entity 2. Gson gson = new Gson（）； 3. gson.fromJson(String类型复杂的json串，根据json串解析的类entity.class ） 4. 注意解析成entity的类其他的类需要注明是public，如果要张一个entity里面去弄的话 ...
2020-05-09
wanghuanll的博客
05-09 1218
Dⅹ3.4
2020-07-09
拱拱大白菜的博客
07-09 1060
CPA 数据分析师认证 sql留存率 sql经典问题 spark rdd
赛迪-中国石墨烯产业发展指数（2020）-2020.12-31页精品报告2020.pdf
04-24
赛迪-中国石墨烯产业发展指数（2020）-2020.12-31页精品报告2020.pdf
UCF-LKM-DATA-PT-12-2020-UC
02-21
UCF-LKM-DATA-PT-12-2020-UC 欢迎来到UCF的数据可视化课程，该课程将于2020年12月至2021年6月运行！...2020年12月31日 周四 2021年1月2日 周六 纪念日 2021年5月29日 周六 回购准则 您对该存储库具有只读访问权限，并
Draft 2020-10-31 12:24:52-数据集
03-19
标题 "Draft 2020-10-31 12:24:52-数据集" 暗示这是一个与数据处理相关的项目，可能是一个机器学习或数据分析任务的训练数据集。描述中提到的 "train1.txt" 和 "train2.txt" 表明压缩包内包含了两个文本文件，这些...
AI提示词prompt系列：因果溯源大师
07-03
帮助用户找出从给定起点到终点的因果链路 只能按照给定的起点和终点进行搜索 - 限制最多生成 10 个因果链节点
Airdoc2023版基于视网膜人工智能评估的四百万体检人群健康蓝皮书-爱康集团鹰瞳(1).pdf
07-03
Airdoc2023版基于视网膜人工智能评估的四百万体检人群健康蓝皮书-爱康集团鹰瞳(1)
硕士毕业文章论述
07-03
硕士毕业文章论述
2024大模型AI工程师必备技能
最新发布
07-03
五个级别的大语言模型 (LLM)应用。可以将此视为一个框架，帮助你决定在哪些地方可以使用LLM。 关于LLM能做什么、不能做什么，有很多不同的误解。那么今天你在哪里使用LLM呢？因此，我决定整理这份材料，带你通过一个基于你使用LLM的扩展或深度的思维框架。你可以决定将LLM适用于哪个层面。首先我们来看一下我整理出的不同级别的LLM，然后我们会稍微扩展一下这个内容。我准备了两个不同的文档带你了解这些内容。这将帮助你了解今天LLM的使用情况以及你如何在自己的应用中使用LLM。
php根据传入的2020 获取2020-01-01，获取2020-12-31
06-10
可以使用 PHP 中的 `date()` 和 `strtotime()` 函数来实现根据传入的年份获取该年份的起始日期和结束日期。 具体实现方法如下： ```php $year = 2020; // 获取该年份的起始日期 $startDate = date('Y-m-d', strtotime($year . '-01-01')); // 获取该年份的结束日期 $endDate = date('Y-m-d', strtotime($year . '-12-31')); echo $startDate; // 输出：2020-01-01 echo $endDate; // 输出：2020-12-31 ``` 在上述代码中，我们首先定义了一个变量 `$year`，表示需要获取的年份。然后，我们使用 `strtotime()` 函数将该年份的起始日期和结束日期转换成时间戳，再使用 `date()` 函数将时间戳转换成指定格式的日期字符串。最后，我们将起始日期和结束日期分别存储在变量 `$startDate` 和 `$endDate` 中，并输出它们的值。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值