js编写一个时钟时间插件效果代码
代码语言:html
所属分类:其他
代码描述:js编写一个时钟时间插件效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link href="https://fonts.googleapis.com/css?family=Orbitron" rel='stylesheet' type='text/css'> <style> body { background: #fafafa; } .container { margin: 150px auto; max-width: 960px; font-family: 'Orbitron'; } .container span { display: inline-block; padding: 10px; background: #222; color: #fff; border-radius: 3px; text-align: center; } h1 { margin-bottom: 5rem; } </style> </head> <body> <div class="container"> <div> <span id="date"></span> <span id="month"></span> <span id="year"></span> <span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span> </div> </div> <script> class Clock { defaultOptions = { dateId: 'date', monthId: 'month', yearId: 'year', hoursId: 'hours', minutesId: 'minutes', secondsId: 'seconds', timeZoneOffset: null, monthNames: [ 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December' ] }; constructor(options) { // options = { // dateId: 'date', // monthId: 'month', // yearId: 'year', // hoursId: 'hours', // minutesId: 'minutes', // secondsId: 'seconds', // timeZoneOffset: +4.00, // monthNames: [ // 'January', // 'February', // 'March', // 'April', // 'May', // 'June', // 'July', // 'August', // 'September', // 'October', // 'November', // 'December' // ] // } if (typeof options === 'undefined') { options = this.defaultOptions; } const .........完整代码请登录后点击上方下载按钮下载查看
网友评论0