php爬取热搜会自动滚动可以加入自己的网页内（左侧为比特币走势）

neteast · 发表于 2022-7-27 13:54

可以自动滚动，或者点左侧箭头上下翻动。（左侧为比特币报价）

套入网页的效果如下

代码如下。主要用到了jquery插件， jQuery News Ticker插件
另：压缩了woff字体并且集成在页面内，所以代码是有点大的。

[PHP] 纯文本查看 复制代码

<?php
ini_set("error_reporting","E_ALL & ~E_NOTICE");
function geturl(){
		$url = 'https://top.baidu.com/board?tab=realtime';
        $ch = curl_init();
        curl_setopt($ch, CURLOPT_URL, $url);
        curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE); 
        curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE); 
        curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
        $output = curl_exec($ch);
        curl_close($ch);
     //   $output = json_decode($output,true);
        return $output;
}
$content = geturl();

$pattern_neirong = '/<div.*class="c-single-text-ellipsis">(.*)<\/div>.*/isU';
preg_match_all($pattern_neirong, $content, $match_neirong);
$pattern_souvalue = '/<div.*class="hot-index_1Bl1a">(.*)<\/div>.*/isU';
preg_match_all($pattern_souvalue, $content, $match_souvalue);
function float_number($number)
{
    $length = strlen($number);  //数字长度
    if ($length > 10) { //亿单位
        $str = substr_replace(floor($number * 0.0000001), '.', -1, 0) . "亿";
    } elseif ($length > 6) { //万单位
        //截取前俩为
        $str = floor($number * 0.001) * 0.1 . "万";
    } else {
        return $number;
    }
    return $str;
}

foreach ($match_souvalue[1] as $key => $value) {
    $match_souvalue[1][$key] = float_number($value);
}
?>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <style data-for="result" type="text/css" id="css_newi_result">
	@font-face {
	           font-family: cIconfont;
	           font-weight: 400;
	           font-style: normal;
	           src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2');
     }
	*{padding:0;margin:0}
	.pages{
		height: 80px; 
		width:617px;
		font-size: 14px;
		color: #9195A3;
		 
		 
	}
		ul,li{list-style:none}
		.left{
			position: relative;
			float: left;			 
			font-size: 14px;
			    width: 75px;
				height: 60px;
			margin:0;
			padding-left: 55px;
			background-image:url([img]https://image.sinajs.cn/newchart/v8/futures/global/mins/BTC.gif[/img]);
			 background-size:144px 73px;
			 
		}
		.srolls{
			float: left;
			height: 55px;
			overflow: hidden;
			padding-left: 50px;
			width: 360px;
		}
		
		.hotwords-side{
			position: relative;
			width:300px; 
			height: 11px;
			 
		}
		 
		 .rright{
			 position: relative;
			 float: right;			 
			 
			 
		 }
		 .refresh{
			 position: relative;
			 float: left;
			 padding: right;
			 height: 60px;
			 margin: 1px 0 0 47px;;
		 }
		 .c-icon {
		 		            font-family: cIconfont !important;
		 		            font-style: normal;
		 		            -webkit-font-smoothing: antialiased;
		 		            -moz-osx-font-smoothing: grayscale
		 		        }
		 .icon-dot, .icon-next, .icon-prev {
		             font-size: 16px;
		             height: 18px;
		             width: 18px;
		             margin-right: 2px;
		             color: #4E6EF2;					  
					 display: flex;
		         }
			.icon-dot {
						
						margin-left: 5px;
						
					}
		  a {
			font-size: 14px;
			font-color: #666;
			text-align: left;
			margin-top: 2px;
			text-decoration-line: none
		}

 
    </style>

</head>

<body>
   <div  class = "pages">
   <div class ="left" style="color: #9195A3;" id="nt-BTCPrice" >热搜</div>
	   <div class="srolls">
			<ul  id="nt-example1" >
<?php
	foreach ($match_neirong[1] as $key => $value) {
	   
			$xuhao = ($key + 1);
			$souvalue = $match_souvalue[1][$key];
print <<<EOT
			<li  >
				$xuhao
				<a target="_blank" title="$value"  class="s-wea">$value </a>
				 <div class="rright">$souvalue<div>
			</li>
EOT;
						 
	}
?>
			   
		   </ul>  
		</div>
		<div class="refresh" >
			
			<i id="nt-prev" class="c-icon icon-prev "></i><span>
			<i  class="c-icon icon-dot "></i><span>
			<i id="nt-next" class="c-icon icon-next "></i><span>
			
		</div
  
	</div>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> 
 <script src="http://risq.github.io/jquery-advanced-news-ticker/assets/js/jquery.newsTicker.js"></script>
	 
	<script>
		var nt_example1 = $('#nt-example1').newsTicker({
			row_height: 18,
			max_rows: 3,
			duration: 60000,
			prevButton: $('#nt-prev'),
			nextButton: $('#nt-next')
		});
	</script>
	<script type="text/javascript">
		 setInterval(getBTCPrice,10000);
		 function getLocalTime(time) {
		         var date = new Date(time*1000 + 8 * 3600*1000 );
		         return date.toJSON().substr(0, 19).replace('T', ' ');
		}
		function getBTCPrice(){
		   $.get( "https://chain.so/api/v2/get_info/BTC", function( response ) {
		     $("#nt-BTCPrice").empty();
			 $( "#nt-BTCPrice" )		       
		   	.append( response.data.price.substr(0, 8) )  ; //  current block count
		   }, "json" );
		 }
		
		</script> 
</body>

</html>

kololi · 发表于 2022-7-27 22:00

非常感谢分享，可以把这个功能加入我的个人导航页里了，方便了看新闻

忧郁之子 · 发表于 2022-7-29 18:38

学到了，支持一下。

xinyangtuina · 发表于 2022-8-2 18:54

请问下，我保存为php 文件，在浏览器中显示不了左侧的趋势图

neteast · 发表于 2022-8-2 20:19

xinyangtuina 发表于 2022-8-2 18:54
请问下，我保存为php 文件，在浏览器中显示不了左侧的趋势图

左侧那个图是新浪的，不显示是不是屏蔽了网址

xinyangtuina · 发表于 2022-8-3 12:13

background-image:url("https://image.sinajs.cn/newchart/v8/futures/global/mins/BTC.gif");
改成这样就可以了。
不知这个gif图是实时变化的不，先留意下。
谢谢！

neteast · 发表于 2022-8-3 21:29

xinyangtuina 发表于 2022-8-3 12:13
background-image:url("https://image.sinajs.cn/newchart/v8/futures/global/mins/BTC.gif");
改成这样就 ...

我看了一下贴上去的代码，雀食是论坛转意的时候转错了。

图片源址是会刷新的，但是在我这里没有做刷新处理

小小的石头13 · 发表于 2022-8-3 21:31

php干这个，可以呀，写到自己博客里

arley · 发表于 2022-8-4 11:40

好家伙不错 marker

ly765893958 · 发表于 2022-10-12 16:06

不错不错试了可以用界面如果可以更加精美一点就好了加油！

帐号		自动登录	找回密码
密码			注册[Register]

[其他转载] php爬取热搜会自动滚动可以加入自己的网页内（左侧为比特币走势）

免费评分

[其他转载] php爬取热搜 会自动滚动可以加入自己的网页内（左侧为比特币走势）

免费评分

[其他转载] php爬取热搜会自动滚动可以加入自己的网页内（左侧为比特币走势）