前言：
如今咱们对“html动态显示时间”可能比较关怀，姐妹们都想要学习一些“html动态显示时间”的相关资讯。那么小编同时在网络上搜集了一些关于“html动态显示时间””的相关内容，希望姐妹们能喜欢，咱们一起来学习一下吧！来源：python技术
作者：python技术
今天给大家推荐一个Streamlit带导航的网页应用制作方法。
streamlit-option-menu是一个全新的网页导航制作模块包，安装方法:
pip install streamlit_option_menu今天的实现效果
已部署到linux服务器上
今天的实现效果.mp4
可以一个小脚本，很简单就做一个侧边导航栏、自我介绍、浏览图片音频视频、单词翻译、可视化、在线浏览PDF文档等等。
比较来说，它比用django、flask等框架搭一个站点，或docsify、vuepress、pelican等博客建设工具来的快。很多时候，我们只需要简单展示一些东西，收集几首有趣的歌曲，帮我翻译个单词，如此如此就好啦，不要给我搞得太麻烦！
侧边导航栏
Img
import streamlit as st,requests,jsonfrom streamlit_option_menu import option_menuimport streamlit.components.v1 as htmlst.set_page_config(page_title="桃花朵朵开", page_icon="", layout="wide")sysmenu = '''<style>#MainMenu {visibility:hidden;}footer {visibility:hidden;}'''st.markdown(sysmenu,unsafe_allow_html=True)with st.sidebar: choose = option_menu("ssw", ["介绍", "图片/音乐/视频", "数据可视化", "翻译", "其他应用"], icons=['house', 'file-earmark-music', 'bar-chart', 'translate', 'brightness-high'], menu_icon="broadcast", default_index=0)第一个参数是文字提示。第二个参数是一个列表，用于列出你的导航栏中有哪些内容，可以理解为提纲。第三个参数是第二个参数对应的图标，这些图标可以从bootstrap网站找到。
图片音频视频
Imgelif choose == "图片/音乐/视频":
selecte1 = option_menu(None, ["图片", "音乐", "视频"],
icons=['house', 'cloud-upload', "list-task"],
menu_icon="cast", default_index=0, orientation="horizontal")
if selecte1 == "图片":
with st.container():
col1 = st.columns(1)
with col1:
st.image("./图片/1.jpg")
with st.container():
st.image("./图片/5.jpg")
elif selecte1 == "音乐":
st.write("1. Day By Day")
st.audio("./音乐/1.flac")
elif selecte1 == "视频":
st.video("./视频/1.mp4")
数据可视化
Img
可以结合Echarts、Plotly等，如Plotly柱状图：
elif choose == "数据可视化": selecte2 = option_menu(None, ["Plotly"], icons=["list-task"], menu_icon="cast", default_index=0, orientation="horizontal") if selecte2 == "Plotly": import plotly.graph_objs as go c1, c2, c3, c4, c5 = st.columns([0.05, 1.5, 0.2, 1.5, 0.2]) with c1: st.empty() with c2: # 柱状图 trace_basic = [go.Bar( 。。略单词翻译
Img
结合Streamlit，可以花几分钟时间打造出我们自己的中英单词互翻工具。原理如下：
使用requests.get构造一个请求，把我们要查询的内容发送到指定的网址然后使用json.loads功能把返回的对象转换为json对象最后从json格式数据中提取出我们自己需要的key和paraphrase对象值
elif choose == "翻译": selecte3 = option_menu(None, ["单词翻译"], icons=['house'], menu_icon="cast", default_index=0, orientation="horizontal") if selecte3 == "单词翻译": st.header("中英单词互翻神器") st.info("要翻译中文单词，请输入中文，会返回对应英文；\n\n\n\n要翻译英文单词，请输入英文，会返回对应中文;") danci = st.text_input("请输入要查找的中文单词或英文单词") fanhui = requests.get("; + danci) data1 = fanhui.text data2 = json.loads(data1) for i in range(len(data2["message"])): st.write(data2["message"][i]["key"], data2["message"][i]["paraphrase"]) # 隐藏按钮及底部链接 sysmenu = ''' <style> #MainMenu {visibility:hidden;} footer {visibility:hidden;} ''' st.markdown(sysmenu, unsafe_allow_html=True)结合Javascript此案例使用streamlit.components.v1组件直接调用我们写好的javascript代码：
elif choose == "其他应用": selecte5 = option_menu(None, ["Javascript", "嵌入PDF"], icons=['house', "list-task"], menu_icon="cast", default_index=0, orientation="horizontal") if selecte5 == "Javascript": from streamlit.components.v1 import html html(""" <script> function startTime(){ var today=new Date(); var current_time=today.toLocaleString(); document.getElementById('txt').innerHTML="当前时间为："+current_time; t=setTimeout(function(){startTime()},500); } function checkTime(i){ if (i<10){ i="0" + i; } return i; } </script> </head> <body onload="startTime()"> <p id="txt" style="color:blue"></p> """)浏览PDFImg
嵌入PDF文档的原理是，使用base64模块对PDF文档进行了编解码操作，然后使用html中的embed方法，把编解码后的信息进行显示
elif selecte5 == "嵌入PDF": import base64 uploaded_file = st.file_uploader("上传pdf", type=["pdf"]) if uploaded_file is not None: base64_pdf = base64.b64encode(uploaded_file.read()).decode('utf-8') pdf_display = f'<embed src="data:application/pdf;base64,{base64_pdf}" width="100%" height="1000" type="application/pdf">' st.markdown(pdf_display, unsafe_allow_html=True) 标签： #html动态显示时间
