HTML+JavaScript+CSS做一个界面

　　下面是一个web界面主要是前端没有后端功能：关于JavaScript几种比较常见的样式

Javaweb(1),html

<!DOCTYPE html>

<head>

<title>Document</title>

进入页面加载的方法

window.onload=function()

{

var date=new Date(),time=date.getTime();

setInterval(function() {set(time);time = Number(time);time += 1000;},1000);

setTodayDate(date);

}

设置日期的方法，针对年月日星期的显示

function setTodayDate(today)

{

var years,months,dates,weeks, intYears,intMonths,intDates,intWeeks,today,timeString;

intYears = today.getFullYear();//获得年

intMonths = today.getMonth() + 1;//获得月份+1

intDates = today.getDate();//获得天数

intWeeks = today.getDay();//获得星期

years = intYears + '年 ';

if(intMonths < 10){

months = '0' + intMonths + '月';

}else{

months = intMonths + '月';

}

if(intDates < 10){

dates = '0' + intDates + '日 ';

}else{

dates = intDates + '日 ';

}

var weekArray = new Array(7);

weekArray[0] = '星期日';

weekArray[1] = '星期一';

weekArray[2] = '星期二';

weekArray[3] = '星期三';

weekArray[4] = '星期四';

weekArray[5] = '星期五';

weekArray[6] = '星期六';

weeks =weekArray[intWeeks] + ' ';

timeString = years + months + dates + weeks;

document.getElementById('time').innerHTML=timeString;

}

设置北京时间的方法，针对时分秒的显示

function set(time)

{

var beijingTimeZone = 8;

var timeOffset = ((-1 * (new Date()).getTimezoneOffset()) - (beijingTimeZone * 60)) * 60000;

var now = new Date(time - timeOffset);

document.getElementById('bjtime').innerHTML = p(now.getHours())+':'+p(now.getMinutes())+':'+p(now.getSeconds());

}

格式化时间的显示方式

function p(s)

{

return s < 10 ? '0' + s : s;

}

</script>

#main-top{

width: 100%;

height: 150px;

}

#main-right{

width: 30%;

height: 950px;

float: left;

text-align: center;

/* background-color: aquamarine; */

}

#main-middle

{

float:left;

width: 70%;

height: 950px;

/* background-color: antiquewhite; */

}

#main-footer

{

width: 100%;

clear:both;/*清除左右浮动*/

margin-top:20px;

position:relative;/*避免底部留白*/

height: auto;

}

body

{

background-image: url(back.png);

}

#topnav{

width: 100%;

overflow: hidden;

background-color: white;

border: 1px solid black;

border-radius: 10px;

opacity: 0.4;

text-align: center;

}

#footer{

width: 100%;

overflow: hidden;

border-radius: 10px;

text-align: center;

}

font-size: 40px;

color: black;

text-decoration: none;

}

.afooter

{

font-size: 30px;

color:teal ;

font-weight: bold;

text-decoration: none;

}

h1{

font-size: 60px;

text-align: center;

}

ul{

background-color: white;

padding-left: 70px;

opacity: 0.4;

text-align: left;

font-size:40px ;

text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);

list-style-type: none;

border: 1px solid white;

border-radius: 10px;

}

.a-left{

font-size: 35px ;

}

#photo{

height: 50px;

width: 50px;

}

#photo1{

height: 300px;

width: 300px;

opacity: 0.9;

border-radius: 20px;

}

.li-k{

font-size: 30px;

text-align: center;

}

.left-ul

{

background-color: white;

padding-left: 70px;

opacity: 0.4;

font-size:40px ;

width: auto;

text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);

list-style-type: none;

border: 1px solid white;

border-radius: 10px;

}

.left-ul1

{

background-color: white;

padding-left: 70px;

opacity: 0.4;

font-size:30px ;

width: auto;

text-shadow: 0px 3px 5px rgba(9, 21, 61, 0.5);

list-style-type: none;

border: 1px solid white;

border-radius: 10px;

}

</style>

</head>

<body>

</div>

</div>

<br>

<br>

记得留言那:

</h1>

<div>

</div>

<a href="#"class="afooter">石家庄铁道大学      信息科学与技术学院      622宿舍著emm</a>

</div>

</body>

</html>

Javweb(1.1).html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<tr>

</tr>

<tr>

<td style="width: 50%">国籍：中华人民共和国</td>

<td style="width: 50%">出生地：山东省菏泽市</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<p>江银涛于2002年9月21日出生于山东省菏泽市单县人民医院，2014年毕业天于孝义市第九中学，2017年毕业于孝义市第二中学，2020年进入了石家庄铁道大学，正式步入了自己的大学生涯。</p>

<p>由于自小身体状态不好在小学时期报名了跆拳道这一项目。训练时间长达4年，并在之中参加多次市级省级比赛并取得不错的成绩。</p>

<p>对于军旅生涯非常期望的，对于每一次军训都是十分的刻苦认真。长空砺剑洒热血，万里云天祭忠魂。</p>

</td>

</tr>

</table>

</td>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

javawebwork（1.3）.html

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr> <td><p>以下内容纯属瞎造：</p>

<p> 布克奖是英国最重要的文学奖项，享有很高的声誉。这一奖项每年颁发给在过去12个月中出版杰出小说的作者。</p>

该奖项成立于1993年，由约翰·S·科恩基金会和英国艺术委员会共同颁发。这个奖项只授予英国文学，是一个非常著名的奖项。</br>

3、普利策奖</br>

普利策奖设立于1917年，由哥伦比亚大学颁发。该奖项每年在美国颁发，以表彰在写作、新闻和音乐方面的成就，它们以出版商约瑟夫·普利策的名字命名。

</br>

4、Ashok Chakra</br>

它是和平时期的军事装饰，用来奖励勇敢、勇敢或自我牺牲的行为。这是印度和平时期颁发给士兵、陆军、空军、陆军、海军和许多其他合法部队的最高奖项之一。

</br>

5、国际笔会奖

</br>

国际笔会奖于1921年在伦敦成立，由非政府组织国际笔会颁发，这个奖是世界上最古老的国际文学组织的荣誉，国际笔会有不同类型的奖项。

</br>

6、金棕榈奖

</br>

金棕榈奖成立于1955年，旨在表彰电影导演。很多颁奖典礼都是为电影明星举办的，但导演却不多，所以这是一个非常有声望的奖项。

</br>

7、拉蒙·麦格塞塞奖

</br>

拉蒙·麦格塞塞奖成立于1957年，由菲律宾颁发给已故总统拉蒙·麦格塞塞。这个奖项是授予在文学、公共服务、创意艺术、社区领导。

</br>

8、奥斯卡金像奖

</br>

奥斯卡金像奖是在1929年设立的，由电影学院和艺术与科学学院共同颁发。这是一个世界知名的电影奖项，旨在鼓励优秀电影的创作与发展。

</br>

9、卡林加奖

</br>

卡林加奖于1951年创立，该奖项由印度政府教科文组织颁发，以表彰科学的传播和普及。联合国教科文组织在每年的世界科学日上颁发这一奖项。

</br>

10、诺贝尔奖

</br>

诺贝尔奖于1901年设立，以科学家、瑞典工程师阿尔弗雷德·诺贝尔命名，诺贝尔奖是一项伟大的成就，也是在医药、和平、科学和经济领域上最令人尊敬和最有声望的奖项。

</td></tr> </table>

</div>

</div> </body>

</html>

HTML+JavaScript+CSS做一个界面的更多相关文章

【CSS】如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
如何用css做一个爱心
摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...
简单说用CSS做一个魔方旋转的效果
说明魔方大家应该是不会陌生的,这次我们来一起用CSS实现一个魔方旋转的特效,先来看看效果图! 解释我们要做这样的效果,重点在于怎么把6张图片,摆放成魔方的样子,而把它们摆放成魔方的样子,重点在于用 ...
CSS做一个Switch开关
本文为博主原创,转载请注明出处. Switch开关: 根据需求可知,Switch开关只有两种选择,true或false.所以我们想到HTML的checkbox控件,用它来做. <input id ...
js/html/css做一个简单的图片自动（auto）轮播效果//带注释
FF(firefox)/chrom/ie稳定暂无bug...注意:请自己建立一个images文件,放入几张900*238的图片(注意图片格式和名字与程序中一致). 1. [图片] 1.JPG 2. [ ...
C/C++编程笔记：编写完成了一个C/C++程序，如何做一个界面出来？
最简单的方法是用vc6新建一个Win32 Application空工程,然后添加一个cpp文件,输入 (注意添加对话框资源,并且在对话框上添加一个文本框) #include #include &quo ...
如何用css做一个细虚线边框表格
<style type="text/css"> <!-- .dashed_tbl { border-top: 1px dashed #333333; border ...
项目实践2:(问卷)用html和css做一个网页
好家伙,又来写项目了 1.以下是考题,姑且把他理解为甲方吧. 2.以下是附带的题目素材开干.
纯CSS做3D旋转魔方
昨天偶然看见网友(简单说用CSS做一个魔方旋转的效果)做的一个3D旋转魔方效果就是本博客右侧公告栏所示在这里把做法展现出来感兴趣的可以试试做成自己特有的魔方 <!DOCTYPE h ...
用bootstrap做一个背景可轮转的登录界面
用bootstrap做一个背景可轮转的登录界面一.总结一句话总结:用css3的动画的 @keyframes 规则,制作轮转图. 1.用bootstrap做一个背景可轮转的登录界面? a.动画部分用 ...

随机推荐

iOS手工Crash解析
一.测试导出来一份ips crash文件,现在需要进行手工解析现在需要下载对应的dsym文件,为了确定下载好的dsym文件和crash log是不是一致的,可以先看下dsym文件中的uuid p.p ...
Dump Rtmp Stream To FLV File （从Rtmp流保存为FLV文件）
一.准备工作搭建本地rtmp服务: https://www.cnblogs.com/doudouyoutang/p/6602430.html 获取使用到的库,openssl 和 librtmp 参考 ...
linux上使用webdav
webdav 干什么用的? 对于我来说,主要是用来同步文件的,n年以前,那时候还啥都不懂,要分享一个文件都是用qq/或者微信发,那时候就一个手机一个电脑,而且文件大部分是分享给认识的人. qq分享完全 ...
minos 1.1 内存虚拟化——hyp
首发公号:Rand_cs minos 1.1 内存虚拟化--hyp 内存虚拟化,目前理解主要两方面: 内存管理,没有虚拟化的情况时,对于 Linux 内核运行在物理硬件之上,内核需要管理物理内存,需要 ...
《Javscript实用教程》目录
图书购买地址: 京东:<Javscript实用教程> 当当:<Javscript实用教程> 天猫:<Javscript实用教程> 注:本书提供源码和ppt课件,下载 ...
Springboot3.0+spring6.0+JDK17+配置jsp和打war包
由于某些缘故,公司的产品需要升级,但并不希望花费大量时间重写前端代码(原来的就不是前后分离的).所以虽然spring和springboot都升级为最新的版本,但是依然还是需要支持jsp,并继续用打包为 ...
CentOS7安装最新版ruby
背景直接通过yum安装的ruby版本太低,不能满足redis.fpm等软件的需求. 系统环境 CentOS7 安装步骤下载ruby http://www.ruby-lang.org/en/down ...
初识python day1记录
程序语言中的分类在程序中有分为高级语言Java python go与低级语言C 汇编,每种语言都有自己的规则,但是最终目的都是给计算机识别的,所以他的底层肯定是一些二进制010101,像java/p ...
【论文阅读】IROS2022: Dynamics-Aware Spatiotemporal Occupancy Prediction in Urban Environments
0.参考与前言完整题目: Dynamics-Aware Spatiotemporal Occupancy Prediction in Urban Environments 论文链接:https:// ...
跟我一起学习和开发动态表单系统-后端用spring boot、mybatis实现方法(4)
## 动态表单系统:利用 Spring Boot 和 MyBatis 实现后端服务在现代企业应用中,表单是数据收集和处理的核心部分.然而,传统的表单系统难以适应快速变化的需求.为了解决这个问题,我们 ...

HTML+JavaScript+CSS做一个界面

HTML+JavaScript+CSS做一个界面的更多相关文章

随机推荐

热门专题